Pull to refresh
5
0

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

Send message

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

Reading time2 min
Views15K
В 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», приглашаю под кат.
Читать дальше →
Total votes 17: ↑13 and ↓4+9
Comments9

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

Reading time20 min
Views86K


Ремарка от автора
Это статья новая, но она не о новых возможностях. Она о 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++: внесение своих наработок в ядро и написание собственных аддонов на С++
Читать дальше →
Total votes 50: ↑44 and ↓6+38
Comments32

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

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

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

Читать дальше →
Total votes 29: ↑25 and ↓4+21
Comments7

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

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

Через window.opener.location мы сможем сделать редирект на, к примеру, фишинговую страницу. Это своего рода tabnabbing, только более продвинутый. Так как жертва меньше всего ожидает подмены страницы, в открытой ранее, доверенной вкладке браузера.
Читать дальше →
Total votes 132: ↑126 and ↓6+120
Comments136

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

Reading time6 min
Views26K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости


Читать дальше →
Total votes 20: ↑16 and ↓4+12
Comments2

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

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

Введение


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

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

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

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

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



Демонстрация / Скачать исходники / Спецификация Filter Effects 1.0
Читать дальше →
Total votes 32: ↑24 and ↓8+16
Comments43

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

Reading time2 min
Views48K
Привет, Хабр!
Одна из главных причин тяжёлых увечий дизайнеров претензий к неопытным дизайнерам от верстальщиков, при получении от них PSD-макетов — это наличие слоёв с заданными режимами смешивания, отличными от normal. Вполне возможно, что скоро это уйдёт в прошлое!
Читать дальше →
Total votes 35: ↑31 and ↓4+27
Comments21

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

Reading time1 min
Views32K


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

UPD. Сделать из этой штуки классный скринсейвер можно с помощью WebSaver (OS X). Вариант для Windows (сам не пробовал) — здесь.
Читать дальше →
Total votes 68: ↑62 and ↓6+56
Comments41

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

Reading time12 min
Views179K
После моего недавнего выступления на MoscowJS #17 с одноимённым докладом у многих возник интерес к этому инструменту. В рамках 11-го выпуска RadioJS, Миша Башкиров bashmish рассказал, что решился попробовать его в своём новом проекте, об успешном опыте и множестве положительных эмоций. Но были озвучены вопросы и возникла дискуссия, в результате которой я решил написать эту статью, чтобы раскрыть основные тезисы с доклада и рассказать о том, что тогда не успел.
Статья ориентирована, как на профессионалов, так и на тех, кто с похожими технологиями ещё не сталкивался.
Итак, начнём.
Читать дальше →
Total votes 17: ↑16 and ↓1+15
Comments13

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

Reading time9 min
Views331K
Когда вышла версия 1.0 Redux, я решил потратить немного времени на серию рассказов о моем опыте работы с ним. Недавно я должен был выбрать “реализацию Flux” для клиентского приложения и до сих пор с удовольствием работаю с Redux.

Почему Redux?


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

Redux предлагает думать о приложении, как о начальном состоянии модифицируемом последовательностью действий (actions), что я считаю действительно хорошим подходом для сложных веб-приложений, открывающим много возможностей.
Читать дальше →
Total votes 15: ↑14 and ↓1+13
Comments16

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

Reading time8 min
Views30K
Мы продолжаем наш цикл переводов о Material Design’е, предыдущие статьи которого можно найти здесь и тут. Сегодняшний пост расскажет об одном из самых сложных переводов дизайна с одних «рельс» на другие.



Когда ваше приложение богато на различные функции, предполагает работу не только с текстом и стандартными элементами, а его самобытный дизайн был разработан ещё тогда, когда встречалось калькирование интерфейса с iOS-приложений и скевоморфизма, перейти на новый визуальный язык — поистине титанический труд и крайне сложная задача. Именно о таком приложении сегодня и поговорим.
Читать дальше →
Total votes 17: ↑17 and ↓0+17
Comments6

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

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

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

Также зацените эту инфографику (вариант на русском), если вы просто начинающий программист.
Читать дальше →
Total votes 104: ↑96 and ↓8+88
Comments37

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

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

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

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

image
Читать дальше →
Total votes 68: ↑65 and ↓3+62
Comments116

React boilerplate — Rocket React

Reading time3 min
Views18K
image

Хочу представить вашему вниманию boilerplate (skeleton) на базе React.js + Backbone для быстрого старта разработки приложения любой сложности. Эта связка помогла нашей команде в срок сделать сложное приложение с минимальным количеством проблем а простота позволила быстро подключать новых разработчиков в процесс.
Читать дальше →
Total votes 24: ↑20 and ↓4+16
Comments23

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

Reading time3 min
Views18K

Интро


Цель — создать велосипед скрипт, который пробежится по сайту и проверит каждую страницу сайта на валидность html.
Я слышал, что если нападает перфекционизм, то надо полежать, отдохнуть и это пройдет.
Подумаешь, в валидаторе ошибка…
Но если все же не проходит, то
добро пожаловать под кат
Total votes 20: ↑18 and ↓2+16
Comments7

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

Reading time15 min
Views73K
Здравствуйте, любители нашего хаброблога и прочие читатели!

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



Поскольку вполне понятен читательский интерес «а как он впихнул все это в двести страниц, и зачем мне это нужно»? под катом предлагаем перевод доскональной статьи Томислава Капана о том, зачем на самом деле нужен Node.js.
Читать дальше →
Total votes 23: ↑20 and ↓3+17
Comments24

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

Reading time7 min
Views19K
Создавая визуализации или интерактивные страницы, мы часто используем комбинацию из 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');  

Читать дальше →
Total votes 25: ↑19 and ↓6+13
Comments16

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

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

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

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

С помощью модуля chrome.ttsEngine можно прикрутить к браузеру свой собственный движок синтеза речи, например, для русского языка.
Читать дальше →
Total votes 55: ↑45 and ↓10+35
Comments19

Сделай свой AngularJS: Часть 1 — Scope и Digest

Reading time34 min
Views89K
Angular — зрелый и мощный JavaScript-фреймворк. Он довольно большой и основан на множестве новых концепций, которые необходимо освоить, чтобы работать с ним эффективно. Большинство разработчиков, знакомясь с Angular, сталкиваются с одними и теми же трудностями. Что конкретно делает функция digest? Какие существуют способы создания директив? Чем отличается сервис от провайдера?

Несмотря на то, что у Angular довольно хорошая документация, и существует куча сторонних ресурсов, нет лучшего способа изучить технологию, чем разобрать ее по кусочкам и вскрыть ее магию.

В этой серии статей я собираюсь воссоздать AngularJS с нуля. Мы сделаем это вместе шаг за шагом, в процессе чего, вы намного глубже поймете внутреннее устройство Angular.
Сделаем Angular вместе
Total votes 73: ↑72 and ↓1+71
Comments18

Information

Rating
Does not participate
Registered
Activity