Как стать автором
Обновить
5
0

Пользователь

Отправить сообщение

Шпаргалка по шаблонам проектирования

Время на прочтение2 мин
Количество просмотров1.5M

Перевод pdf файла с сайта http://www.mcdonaldland.info/ с описанием 23-х шаблонов проектирования GOF. Каждый пункт содержит [очень] короткое описание паттерна и UML-диаграмму. Сама шпаргалка доступна в pdf, в виде двух png файлов (как в оригинале), и в виде 23-х отдельных частей изображений. Для самых нетерпеливых — все файлы в конце статьи.

Под катом — много картинок.

Читать дальше →

Как работает basic-авторизация в ExpressJS

Время на прочтение2 мин
Количество просмотров16K
В Express.JS есть встроенный middleware для авторизации. Если очень хочется заблокировать доступ к приложению — достаточно всего лишь добавить одну строчку в сетап express-приложения:
app.use(express.basicAuth('username', 'password'));

Так же middleware поддерживает альтернативный вариант — с коллбэком:
app.use(express.basicAuth(function(user, pass, next) {
  var result = (user === 'testUser' && pass === 'testPass');
  next(null /* error */, result);
}));

А если нужно ограничить доступ только к определенным url'ам — middleware можно использовать не глобально, а только в рамках роутера. То есть так:
var auth = express.basicAuth(function(user, pass, next) {
  var result = (user === 'testUser' && pass === 'testPass');
  next(null, result);
});

app.get('/home', auth, function(req, res) {
  res.send('Hello World');
});

Если не забираться под капот — на этом можно и закончить. Тех же, кто на диаграмме Венна находится между кругами «Мне интересно, что внутри» и «Я не знаю как работает basic авторизация apache», приглашаю под кат.
Читать дальше →

Вы не знаете Node: краткий обзор основных возможностей

Время на прочтение20 мин
Количество просмотров87K


Ремарка от автора
Это статья новая, но она не о новых возможностях. Она о core, то есть о платформе и о том что многие кто просто используют grunt, или webpack могут не подозревать, так скзать about fundamentals.

Более подробно читайте:

комментарии rumkin:
habrahabr.ru/company/mailru/blog/283228/#comment_8890604

комментарии Aiditz:
habrahabr.ru/company/mailru/blog/283228/#comment_8890476

комментарии Suvitruf:
habrahabr.ru/company/mailru/blog/283228/#comment_8890430


Идея этой публикации была навеяна серией книг Кайла Симпсона «Вы не знаете JavaScript». Они являются хорошим началом для изучения основ этого языка. А Node — это практически тот же JavaScript, за исключением небольших отличий, о которых я расскажу в этой статье. Весь код, приведённый ниже, вы можете скачать из репозитория, из папки code.

Зачем вообще переживать насчёт Node? Node — это JavaScript, а JavaScript используется почти везде! Мир был бы лучше, если бы большинство разработчиков в совершенстве владели Node. Чем лучше приложения, тем лучше жизнь!

Эта статья представляет собой реалистичный взгляд на наиболее интересные основные возможности Node. Ключевые моменты статьи:

  1. Цикл событий: освежаем ключевую концепцию, позволяющую реализовать неблокирующие операции ввода/вывода.
  2. Глобальный объект и процесс: как получить больше информации.
  3. Эмиттеры событий: интенсивное введение в событийную модель (event-based pattern)
  4. Stream’ы и буферы: эффективный способ работы с данными
  5. Кластеры: форкай процессы как профессионал
  6. Обработка асинхронный ошибок: AsyncWrap, Domain и uncaughtException
  7. Аддоны на C++: внесение своих наработок в ядро и написание собственных аддонов на С++
Читать дальше →

5 достойных изучения проектов с открытым исходным кодом на React Native

Время на прочтение2 мин
Количество просмотров41K
Изучение открытого исходного кода – это лучший способ научиться писать качественный код, особенно если речь идет о новом инструменте с не полностью сформировавшимися стандартами. Одним из таких инструментов является React Native. Он постоянно дорабатывается, функциональность его API расширяется с каждым релизом, а количество библиотек растет. В то же время большинство обучающих ресурсов по работе с React Native очень поверхностны и не идут дальше вступительных рекомендаций. Но даже несмотря на это, изучение исходного кода должно быть нормой для каждого разработчика.

Я хочу представить 5 проектов с открытым исходным кодом, которые я изучаю сам и советую остальным.

Читать дальше →

Опасный target="_blank"

Время на прочтение2 мин
Количество просмотров201K
Большинство создают внешние ссылки через target="_blank" и не знают одного интересного нюанса — страница, на которую мы попадем таким образом, получит частичный контроль над ссылающейся на нее страницей через js свойство window.opener.

Через window.opener.location мы сможем сделать редирект на, к примеру, фишинговую страницу. Это своего рода tabnabbing, только более продвинутый. Так как жертва меньше всего ожидает подмены страницы, в открытой ранее, доверенной вкладке браузера.
Читать дальше →

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №208 (18 — 24 апреля 2016)

Время на прочтение6 мин
Количество просмотров26K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости


Читать дальше →

Советы, библиотеки и дополнительные материалы по CSS-анимации

Время на прочтение25 мин
Количество просмотров67K
Советы, библиотеки и дополнительные материалы по CSS-анимации

Введение


Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Читать дальше →

Фильтры для изображений с CSS Filter Effects

Время на прочтение1 мин
Количество просмотров153K
В графических редакторах очень легко менять яркость или контраст изображений, применять различные фильтры. С недавних пор это можно делать и средствами CSS прямо на веб-страницах с помощью CSS Filter Effects.



Демонстрация / Скачать исходники / Спецификация Filter Effects 1.0
Читать дальше →

Режимы наложения слоёв в Web

Время на прочтение2 мин
Количество просмотров49K
Привет, Хабр!
Одна из главных причин тяжёлых увечий дизайнеров претензий к неопытным дизайнерам от верстальщиков, при получении от них PSD-макетов — это наличие слоёв с заданными режимами смешивания, отличными от normal. Вполне возможно, что скоро это уйдёт в прошлое!
Читать дальше →

Tweetping — все твиты на карте мира в прямом эфире

Время на прочтение1 мин
Количество просмотров32K


Tweetping — интересный проект от Franck Ernewein, который берет поток твитов из публичного API Twitter и располагает их на карте, попутно считая слова и буквы в твитах, и выводя последнее упоминание и хештег.
Так как берет он твиты из публичного API — на карте показываются лишь около 1% от всех генерируемых твитов, но и этого вполне достаточно для отрисовки красивой карты.

UPD. Сделать из этой штуки классный скринсейвер можно с помощью WebSaver (OS X). Вариант для Windows (сам не пробовал) — здесь.
Читать дальше →

webpack: 7 бед — один ответ

Время на прочтение12 мин
Количество просмотров180K
После моего недавнего выступления на MoscowJS #17 с одноимённым докладом у многих возник интерес к этому инструменту. В рамках 11-го выпуска RadioJS, Миша Башкиров bashmish рассказал, что решился попробовать его в своём новом проекте, об успешном опыте и множестве положительных эмоций. Но были озвучены вопросы и возникла дискуссия, в результате которой я решил написать эту статью, чтобы раскрыть основные тезисы с доклада и рассказать о том, что тогда не успел.
Статья ориентирована, как на профессионалов, так и на тех, кто с похожими технологиями ещё не сталкивался.
Итак, начнём.
Читать дальше →

С 0 до 1. Разбираемся с Redux

Время на прочтение9 мин
Количество просмотров331K
Когда вышла версия 1.0 Redux, я решил потратить немного времени на серию рассказов о моем опыте работы с ним. Недавно я должен был выбрать “реализацию Flux” для клиентского приложения и до сих пор с удовольствием работаю с Redux.

Почему Redux?


Redux позиционирует себя как предсказуемый контейнер состояния (state) для JavaScript приложений. Редакс вдохновлен Flux и Elm. Если вы раньше использовали Flux, я советую прочитать, что Redux имеет с ним общего в разделе "Предшественники" новой (отличной!) документации.

Redux предлагает думать о приложении, как о начальном состоянии модифицируемом последовательностью действий (actions), что я считаю действительно хорошим подходом для сложных веб-приложений, открывающим много возможностей.
Читать дальше →

Адаптации сложных приложений под Material Design: подход от Aviary

Время на прочтение8 мин
Количество просмотров30K
Мы продолжаем наш цикл переводов о Material Design’е, предыдущие статьи которого можно найти здесь и тут. Сегодняшний пост расскажет об одном из самых сложных переводов дизайна с одних «рельс» на другие.



Когда ваше приложение богато на различные функции, предполагает работу не только с текстом и стандартными элементами, а его самобытный дизайн был разработан ещё тогда, когда встречалось калькирование интерфейса с iOS-приложений и скевоморфизма, перейти на новый визуальный язык — поистине титанический труд и крайне сложная задача. Именно о таком приложении сегодня и поговорим.
Читать дальше →

40 ключевых концепций информационных технологий доступно и понятно

Время на прочтение16 мин
Количество просмотров161K
Представляю вашему вниманию перевод очень ёмкой, и в то же время достаточно краткой (для такого масштаба проблемы) статьи Карла Чео. Я решил, что очень хочу сделать её перевод практически сразу, как только начал читать, и очень рад, что в итоге сделал это.
Для того, чтобы сделать обучение более веселым и интересным, представляю вам перечень важных теорий и концепций информатики, объяснённых с помощью аналогий с минимальным количеством технических деталей. Это будет похоже на очень быстрый курс информатики для всех с целью просто дать вам общее представление об основных концепциях.

Важные замечания:
  • Пункты с неуказанным источником написаны мной самостоятельно. Поправьте меня, если вы заметите какие-то неточности. Предложите лучшую аналогию, если это возможно.
  • Заголовки ссылаются на соответствующие им статьи в Wikipedia. Пожалуйста, читайте эти статьи для более серьезных и детальных объяснений.
  • Аналогии — отличный способ объяснить материал, но они не идеальны. Если вы хотите по-настоящему понять перечисленные концепции, вам следует начать с фундаментальных азов и рассуждать, исходя из них.

Также зацените эту инфографику (вариант на русском), если вы просто начинающий программист.
Читать дальше →

Оттачиваем мастерство работы в консоли

Время на прочтение3 мин
Количество просмотров64K
После того, как у меня появился новый монитор на рабочем месте, я начал новую итерацию улучшения своего «безмышечного» (mouse-less, прим. пер.) опыта. Вы же знаете, что это значит, не так ли? Это значит, что каждый раз, когда вы беретесь за мышку, убирая руку с клавиатуры, вы тратите немного времени и энергии. Если вам нужно набирать много текста (а я много пишу кода), это становится существенным.

Так же существует следующий уровень «безмышечного» опыта, когда вы стараетесь избежать труднодоступных клавиш, например Delete, Backspace, Escape или даже Enter.

Если вы держите руки в стандартной позиции для 10-пальцевой слепой печати, более удобно нажать Ctrl-m вместо того, чтобы тянуться мизинцем к энтеру.

image
Читать дальше →

React boilerplate — Rocket React

Время на прочтение3 мин
Количество просмотров18K
image

Хочу представить вашему вниманию boilerplate (skeleton) на базе React.js + Backbone для быстрого старта разработки приложения любой сложности. Эта связка помогла нашей команде в срок сделать сложное приложение с минимальным количеством проблем а простота позволила быстро подключать новых разработчиков в процесс.
Читать дальше →

Проверяем все страницы сайта в валидаторе html

Время на прочтение3 мин
Количество просмотров18K

Интро


Цель — создать велосипед скрипт, который пробежится по сайту и проверит каждую страницу сайта на валидность html.
Я слышал, что если нападает перфекционизм, то надо полежать, отдохнуть и это пройдет.
Подумаешь, в валидаторе ошибка…
Но если все же не проходит, то
добро пожаловать под кат

Node.js и Express как они есть

Время на прочтение15 мин
Количество просмотров74K
Здравствуйте, любители нашего хаброблога и прочие читатели!

Мы планируем вновь отметиться на поле неувядающего Node.js и рассматриваем возможность издания этой книги:



Поскольку вполне понятен читательский интерес «а как он впихнул все это в двести страниц, и зачем мне это нужно»? под катом предлагаем перевод доскональной статьи Томислава Капана о том, зачем на самом деле нужен Node.js.
Читать дальше →

Как в проекте заменить jQuery на D3

Время на прочтение7 мин
Количество просмотров19K
Создавая визуализации или интерактивные страницы, мы часто используем комбинацию из jQuery и D3. Причём в основном используется D3, а из jQuery берут небольшой набор функций для манипуляций с DOM.

И хотя в D3 есть мощные возможности – селекторы и обёртка для ajax, часто нам не хватает каких-то функций из jQuery. Мы покажем, как можно заменить jQuery, используя D3 повсеместно. В результате ваш код упростится, объём проекта уменьшится, и вы не будете смешивать разные подходы, а будете использовать функции так, как принято в D3.

Для начала рассмотрим, в чём эти две библиотеки сходятся. Это удобно для тех, кто уже знает jQuery, и хочет изучить D3.

Схожести


Селекторы

Обе библиотеки основаны на простых в использовании, но богатых на возможности селекторах.

jQuery

$('.foo').addClass('foobar');
$('.foo').removeClass('foobar');


D3

d3.selectAll('.foo').classed('foobar', true);  
d3.selectAll('.foo').classed('foobar', false); 


Управление стилями и атрибутами

jQuery

$('.foo').attr('data-type', 'foobar');
$('.foo').css('background', '#F00');


D3

d3.selectAll('.foo').attr('data-type', 'foobar');  
d3.selectAll('.foo').style('background', '#F00');  

Читать дальше →

Синтез речи в Chrome

Время на прочтение1 мин
Количество просмотров20K
Google внедрил в браузер интерфейсы Text-to-Speech API, так что теперь любое приложение или расширение Chrome способно читать текст вслух. Синтез речи из расширения осуществляется элементарной командой

chrome.tts.speak('Hello, world!');

(предварительно требуется добавить tts в список разрешений для данного расширения).

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

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность