Category Java Script

10 полезных фреймворков, о которых нужно знать разработчику

jenezis Оставьте комментарий

1) UIkit

getuikit.com

99% проблем юзабилити возникают из-за медленного ответа веб-интерфейсов. Очень важно создавать быстрые интерфейсы. UIKit полезен именно для этого. Он лёгкий, модульный, и идеальный для разработки фронтенда. Предоставляет богатый набор HTML, JavaScript и CSS компонентов.

2) Reveal.js

lab.hakim.se/reveal-js/#

Желаете создавать симпатичные презентации в HTML? Хотите добавить движухи, переходов между слайдами? Это можно сделать при помощи Reveal.js. Он помогает создавать презентации, оптимизированные для сенсорных устройств, которые везде смотрятся приятно. Есть выбор эффектов перехода — Fade, Zoom и так далее.

3) TouchStone.js

touchstonejs.io

Для тех, кто хочет разрабатывать красивые гибридные мобильные приложения. Touchstone.js работает на основе React.js, и имеет такие возможности, как нативное поведение для сенсорных экранов, функции навигации, компоненты форм и многое другое.

4) Skel.js

getskel.com

Легковесный фреймворк, помогающий создавать сайты и приложения с отзывчивым дизайном. Содержит богатый набор возможностей. Что он умеет:

  • CSS Grid System
  • Responsive Handler
  • CSS Shortcuts
  • Plugin System

 

5) Foundation

foundation.zurb.com

Ещё один хороший фреймворк для фронтенда, любимый многими разработчиками отзывчивого дизайна. Этот фреймворк помогает разрабатывать сайты быстро. У него есть много возможностей – отзывчивая сетка, сниппеты, кнопки и другие компоненты интерфейса. Это проект с открытым кодом, доступным на Github

6) Whiteboard Framework

whiteboardframework.com

Позволяет без лишних действий создать тему для WordPress. Минималистический дизайн позволяет просто и легко сделать тему без ненужных функций. Включает код, оптимизирующий юзабельность темы, поддержку мобильных устройств и SEO.

7) Mootor

mootor.voolks.com

Фреймворк на основе HTML5 для разработки минималистичного дизайна мобильных приложений.

8) Knockout

knockoutjs.com

Идеальный фреймворк для разработчиков, создающих упрощённый интерфейс с использованием JS на основе шаблона Model View View (MVVM). Библиотека на чистом JS, работающая в связке с любой серверной или клиентской технологией и в любом современном браузере.

9) Base

matthewhartman.github.io/base

Отзывчивый фреймворк на основе Normalize.css. Работает со старыми и современными браузерами. Содержит только самое необходимое для создание темы с нуля для любых устройств.

10) WordPress Plugin Boilerplate 3.0

github.com/DevinVinson/WordPress-Plugin-Boilerplate

Eloquent JavaScript

jenezis Оставьте комментарий

cover

JS magic: Function.prototype.call.bind(Function.prototype.bind)

jenezis Оставьте комментарий

javascript_logo

От переводчика:
Прошу принять во внимание, что приведенный здесь код, возможно, не является хорошими практиками. Тем не менее разбор сниппета из этого поста может оказаться еще одним поводом окунуться в функциональный JavaScript.

Недавно я увидел изящный JS сниппет в этом твите.

var bind = Function.prototype.call.bind(Function.prototype.bind); // #fp

Взглянув на него, я смог догадаться, что он делает. Он превращает x.y(z) в y(x, z). Радуясь как ребенок, я показал его своим коллегам. Они спросили меня, что же тут происходит. Я открыл рот, чтобы объяснить и… не смог сказать ни слова. Я развернулся и ушел.

В большинстве случаев, взглянув на хорошо написанный код, можно легко догадаться, что он делает. Имея какой-то опыт в функциональном JavaScript, прочитав «Functional JavaScript» и «JavaScript Allongé» (обе замечательны), у меня не возникло особых трудностей в его прочтении. Но как объяснить этот код кому-то без опыта функционального программирования?

Я решил поэтапно разобраться на простых примерах что же тут происходит. Результат был таков:

// Создадим простой объект, чтобы использовать его в качестве контекста
var context = { foo: "bar" };

// Функция, которая возвращает свойство «foo» контекста «this»
function returnFoo () {
  return this.foo;
}

// Свойства не существует в текущей области видимости, поэтому undefined
returnFoo(); // => undefined

// Но если мы свяжем эту функцию с контекстом
var bound = returnFoo.bind(context);

// Свойство теперь в области видимости
bound(); // => "bar"

//
// Так работает Function.prototype.bind.
// Так как returnFoo — это функция, она наследует прототип Function.prototype
//

// Существует несколько способов связывания функции с контекстом
// Call и apply позволяют вам вызывать функцию с нужным контекстом
returnFoo.call(context); // => bar
returnFoo.apply(context); // => bar

// Так же можно вложить функцию в объект
context.returnFoo = returnFoo;
context.returnFoo(); // => bar

//
// Теперь давайте немного усложним
//

// В Array.prototype есть замечательный метод slice.
// При вызове на массиве он возвращает копию массива
// от начального индекса до конечного (исключительно)
[1,2,3].slice(0,1); // => [1]

// Мы берем slice и присваиваем его локальной переменной
var slice = Array.prototype.slice;

// slice теперь оторван от контекста. Из-за того, что Array.prototype.slice
// работает с данным ему контекстом «this», метод больше не работает
slice(0, 1); // => TypeError: can't convert undefined to object
slice([1,2,3], 0, 1); // => TypeError: ...

// Но мы можем использовать apply и call, они позволяют нам передавать нужный контекст
slice.call([1,2,3], 0, 1); // => [1]

// Apply работает как call, но принимает аргументы в виде массива
slice.apply([1,2,3], [0,1]); // => [1]

// Немного надоедает использовать .call каждый раз. Может воспользоваться bind?
// Точно! Давайте привяжем функцию call к контексту slice. 
slice = Function.prototype.call.bind(Array.prototype.slice);

// Теперь slice использует первый аргумент в качестве контекста
slice([1,2,3], 0, 1); // => [1]

//
// Неплохо, правда? Но у меня осталась еще кое-что.
//

// Давайте проделаем с самим bind то же,
// что мы делали со slice
var bind = Function.prototype.call.bind(Function.prototype.bind);

// Обдумайте то, что мы только что сделали.
// Что происходит? Мы оборачиваем call, возвращая функцию, которая принимает функцию и контекст
// и возвращает связанную с контекстом функцию.

// Вернемся к нашему первоначальному примеру
var context = { foo: "bar" };
function returnFoo () {
  return this.foo;
}

// И к нашему новому bind
var amazing = bind(returnFoo, context);
amazing(); // => bar

// Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

JavaScript notes

jenezis Оставьте комментарий

JavaScript — язык со слабой динамической типизацией, автоматическим управлением памятью и прототипным наследованием.JavaScript состоит из трёх обособленных частей:

  • ядро (ECMAScript),
  • объектная модель браузера (Browser Object Model или BOM),
  • объектная модель документа (Document Object Model или DOM).

В статье, в основном, пойдёт речь о ядре. Конечно, в примерах кода будут использоваться элементы DOM и BOM, но заострять на них внимание не буду.

 

Продолжить чтение «JavaScript notes» →

The Little MongoDB Book

jenezis Оставьте комментарий

Технологии развиваются семимильными шагами. Список новых технологий и методологий постоянно растёт. Однако, я всегда придерживался мнения, что фундаментальные технологии, используемые программистами, развиваются не столь стремительно. Можно долгое время обладать актуальными знаниями, не пополняя их. Однако зачастую устоявшиеся технологии заменяются другими с потрясающей скоростью. Внезапные скачки разработок иногда ставят под угрозу устоявшиеся старые технологии.

Яркий пример того — прогресс NoSQL-технологий, приходящих на замену давно известным реляционным базам данных. Вчера ещё веб базировался на нескольких известных СУРБД, однако уже сегодня появилось около пяти NoSQL-решений, достойно зарекомендовших себя.

Несмотря на скачкообразность таких изменений, на деле могут понадобиться годы, чтобы они вошли в общепринятую практику. Начальный энтузиазм, как правило, охватывает небольшое число разработчиков и компаний. Решения оттачиваются, извлекаются уроки, — и, видя, что новая технология развивается, остальные пробуют применять её для своих нужд. Опять же, это касается сферы NoSQL, где множество технологий являются не столько прямой заменой более традиционным механизмам хранения, сколько являются решениями специальных проблем, в дополнение к тому, что можно ожидать от традиционных систем.

Принимая во внимание всё вышеизложенное, мы должны уяснить, чем же является NoSQL. Это широкий термин, который означает разное для разных людей. Лично я использую его в широком смысле, чтобы обозначить систему, участвующую в хранении данных. С другой стороны NoSQL для меня означает убеждённость в том, что задача хранения данных не возлагается на одну большую систему. В то время, как производители большинства баз данных исторически пытались позиционировать свой софт, как решение «всё в одном», NoSQL стремится к меньшему уровню ответственности — когда для определённых задач может быть выбран такой инструмент, который бы решал именно эту задачу наилучшим образом. К примеру, ваш NoSQL-стек может эффективно использовать реляционные базы данных, как например MySQL, однако он также может включать в себя Redis — для организации хранения записей key-value или Hadoop — для интенсивной обработки данных. Проще говоря, NoSQL — это открытая технология, состоящая из альтернативных, существующих и дополнительных шаблонов управления данными.

Удивительно, но MongoDB подходит под все эти определения. Как документ-ориентированная СУБД, Mongo — это довольно-таки обобщённое NoSQL решение. Её можно рассматривать, как альтернативу реляционным СУБД. Подобно реляционным СУБД, она также может выигрышно дополняться более специализированными NoSQL решениями. У MongoDB есть как достоинства, так и недостатки, о них мы поговорим в следующих частях книги.

Как вы уже заметили, термины MongoDB и Mongo используются как синонимы.

Продолжить чтение «The Little MongoDB Book» →

RESTful API на Node.js + MongoDB

jenezis Оставьте комментарий

Я все же решил изучить совершенно неизвестные для меня технологии, которые сейчас весьма популярны и позиционируются, как легко осваиваемые новичками и не требующие глубоких знаний и опыта для реализации масштабных проектов. Вот и проверим вместе, может ли неспециалист написать свой эффективный и правильный бэкенд.

В данной статье будет рассмотрено построение REST API для мобильного приложения на Node.js с использованием фреймворка Express.js и модуля Mongoose.js для работы с MongoDB. Для контроля доступа прибегнем к технологии OAuth 2.0 с помощью модулей OAuth2orize и Passport.js.

Продолжить чтение «RESTful API на Node.js + MongoDB» →

Хватит писать регулярные выражения

jenezis

Сразу оговорюсь, если Вы — профессионал в использовании регулярных выражений, то Вам лучше дальше не читать во избежание ^(.*)$

GitHub-пользователь jehna нашёл интересный метод ухода от реализации сложных регулярных выражений традиционным способом.
Вербальные выражения превращают сложный и иногда нетривиальный путь от логики до собственно регулярного выражения в ненавязчивую прогулку с использованием связанного набора функций.

Основа проекта — JS-библиотека, но также имеется куча реализаций и на других языках.