Как стать автором
Обновить
12
0
Иван @IPri

инженер-программист

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

Методы защиты от CSRF-атаки

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

Что такое CSRF атака?


Ознакомиться с самой идеей атаки CSRF можно на классических ресурсах:



Выдержка из ответа на SO:

Причина CSRF кроется в том, что браузеры не понимают, как различить, было ли действие явно совершено пользователем (как, скажем, нажатие кнопки на форме или переход по ссылке) или пользователь неумышленно выполнил это действие (например, при посещении bad.com, ресурсом был отправлен запрос на good.com/some_action, в то время как пользователь уже был залогинен на good.com).


Как от нее защититься?


Эффективным и общепринятым на сегодня способом защиты от CSRF-Атаки является токен. Под токеном имеется в виду случайный набор байт, который сервер передает клиенту, а клиент возвращает серверу.


Защита сводится к проверке токена, который сгенерировал сервер, и токена, который прислал пользователь.

Читать дальше →
Всего голосов 22: ↑22 и ↓0+22
Комментарии52

Руководство по Node.js, часть 4: npm, файлы package.json и package-lock.json

Время на прочтение17 мин
Количество просмотров178K
Сегодня мы публикуем четвёртую часть перевода руководства по Node.js. В этом материале мы начнём разговор об npm а также рассмотрим особенности файлов package.json и package-lock.json.



Читать дальше →
Всего голосов 28: ↑28 и ↓0+28
Комментарии8

Service Workers. Инструкция по применению

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


Количество выходов в интернет с мобильных устройств ежегодно растёт на 2-4% в год. Качество связи не успевает за такими темпами. Как итог, даже самое лучшее веб-приложение обеспечит ужасный опыт, если пользователь не сможет его загрузить.

Проблема в том, что до сих пор нет хорошего механизма управления кэшем ресурсов и результатов сетевых запросов. В своей статье я хочу рассказать как Service Worker (SW) может помочь в решении этой задачи. Объясню в формате рецептов — какие элементы и в какой пропорции смешать, чтобы получить нужный результат, исходя из задачи и требований.
Поехали!
Всего голосов 57: ↑57 и ↓0+57
Комментарии40

Иван Тулуп: асинхронщина в JS под капотом

Время на прочтение24 мин
Количество просмотров52K
А вы знакомы с Иваном Тулупом? Скорее всего да, просто вы еще не знаете, что это за человек, и что о состоянии его сердечно-сосудистой системы нужно очень заботиться.

Об этом и о том, как работает асинхронщина в JS под капотом, как Event Loop работает в браузерах и в Node.js, есть ли какие-то различия и, может быть, похожие вещи рассказал Михаил Башуров (SaitoNakamura) в своем докладе на РИТ++. С удовольствием делимся с вами расшифровкой этого познавательного выступления.



О спикере: Михаил Башуров — fullstack веб-разработчик на JS и .NET из Luxoft. Любит красивый UI, зеленые тесты, транспиляцию, компиляцию, технику compiler allowing и улучшать dev experience.

От редактора: Доклад Михаила сопровождался не просто слайдами, а демо-проектом, в котором можно понажимать на кнопочки и самостоятельно посмотреть за выполнением тасок. Оптимальным вариантом будет открыть презентацию в соседней вкладке и периодически к ней обращаться, но и по тексту будут даны отсылки на конкретные страницы. А теперь передаем слово спикеру, приятного чтения.

Всего голосов 40: ↑33 и ↓7+26
Комментарии4

Шесть наиболее полезных докладов с Frontend Conf 2018

Время на прочтение5 мин
Количество просмотров17K
Друзья, с позиции главы программного комитета Frontend Conf поместил под катом краткий обзор шести самых полезных докладов с РИТ++ 2018 по фронтенду.

В подборке нашлось место рассказу про то, как настраивать PWA-приложения и делать их более нативными. Отдельно затронуты вопросы транспиляции, где на примере API Яндекс.Карт показано, как можно писать на ES2015, получая на выходе ES3, и обеспечить поддержку IDE и линтеров. Еще одна история — про популярные форматы хранения изображений, их сжатие и варианты загрузки на мобильные устройства. Не менее хардкорный доклад про то, как перенести нагрузку, связанную с расчетом анимации, с CPU на видеокарту. Плюс два отдельных доклада про секреты и лайфхаки CSS.

Все доклады — сугубо практические, а некоторые — вполне холиварные. Одним словом, именно такие, как мы любим, и отбираем для Frontend Conf Moscow.


Всего голосов 45: ↑45 и ↓0+45
Комментарии2

TypeScript 3.0

Время на прочтение20 мин
Количество просмотров45K
TypeScript 3.0! Да, он вышел, и в нем по-настоящему много нововведений. Под катом вы найдете подробное описание всех новинок последней версии, среди которых режим build, новый тип unknown, значительные изменения в API, улучшения производительности и многое другое. Присоединяйтесь!

Читать дальше →
Всего голосов 45: ↑43 и ↓2+41
Комментарии35

RxJS: Не отписывайся

Время на прочтение5 мин
Количество просмотров11K
Привет, Хабр! Представляю вашему вниманию перевод статьи "RxJS: Don’t Unsubscribe" автора Ben Lesh.

Ну… ладно, просто не отказывайся от подписок.

Я часто помогаю кому-нибудь в отладке проблем с их RxJS кодом, в том числе со структурированием приложений, которые несут в себе много асинхронного кода. При этом я всегда вижу одно и тоже, как люди держат обработчики на тоннах подписок. Разработчик делает 3 HTTP-запроса с Observable, сохраняя 3 объекта подписки, которые будут вызваны, когда произойдет какое-то событие.

Я знаю, почему так происходит. Люди привыкли использовать `addEventListener` N раз, а затем, когда они больше не нужны, вызывать `removeEventListener` N раз. Естественным будет делать то же самое и с объектами-подписками, и по большей части вы будете правы. Но есть и лучшие способы. Сохранение слишком большого количества объектов подписок — это знак того, что вы управляете своими подписками императивно и не пользуетесь преимуществами Rx.
Читать дальше →
Всего голосов 7: ↑7 и ↓0+7
Комментарии2

Полное руководство по стратегии обнаружения изменений Angular onPush

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

image


Default cтратегия обнаружения изменений


По умолчанию Angular использует ChangeDetectionStrategy.Default стратегию обнаружения изменений.


ChangeDetectionStrategy.Default работает таким образом, что каждый раз, когда что-то меняется в нашем приложении, в результате различных пользовательских событий, таймеров, XHR, промисов и т.д., обнаружение изменений будет запускаться по всем компонентам.

Читать дальше →
Всего голосов 19: ↑19 и ↓0+19
Комментарии3

Открытый вебинар «Механизмы контейнеризации Linux»

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

Делимся новым открытым уроком, который провёл Александр Румянцев — преподаватель курса «Администратор Linux». На вебинаре разбиралось современное состояние механизмов контейнеризации и контейнеризация cgroups и cgroups-based, как она реализована в ядре, что такое namespace и почему cgroups — это группы.


Ждём комментарии и вопросы тут или можете задать их преподавателям сегодня на дне открытых дверей.
Всего голосов 23: ↑21 и ↓2+19
Комментарии1

Разбираемся с синтаксисом шаблонов в Angular2

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

Многие впервые увидев синтаксис шаблонов Angular2 начинают причитать, мол ужас какой сделали, неужто нельзя было как в Angular1 хотя-бы. Зачем нужно было вводить это разнообразие скобочек, звездочек и прочей ерунды! Однако при ближайшем рассмотрении все становится куда проще, главное не пугаться.

Так как шаблоны в AngularJS являются неотъемлемой его частью, важно разобраться с ними в самом начале знакомства с новой версии этого фреймворка. Заодно обсудим, какие преимущества дает нам данный синтаксис по сравнению с angular 1.x. Причем лучше всего будет рассматривать это на небольших примерах.

Данная статья во многом основана на материалах этих двух статей:



Для того, что бы упростить подачу материала, давайте разберемся. Под AngularJS я буду подразумевать всю ветку Angular 1.x, в то время как под Angular2 — ветку 2.x.

Так же спасибо господину Bronx за ценное дополнение, которое я включил в текст статьи.

Примечание: вечер выходного дня, потому о опечатках и т.д. сообщайте в личку. Премного благодарен и приятного чтения.
Читать дальше →
Всего голосов 67: ↑64 и ↓3+61
Комментарии64

Открытый урок «Основные понятия баз данных»

Время на прочтение1 мин
Количество просмотров7.6K
Всем привет! Представляем вашему вниманию очередной открытый урок «Основные понятия баз данных», который мы проводили в рамках курса «Backend разработчик на PHP». Вебинар вёл второй преподаватель курса — Олег Козинцев, который разбирал на занятии описание концептуальных схем предметной области при помощи ER-модели, историю SQL, его стандартах и совместимости и подробно разбирал реляционную модель.



Ждём комментарии, предложения тут или заходите на день открытых дверей.
Всего голосов 13: ↑12 и ↓1+11
Комментарии2

Веб-компоненты: обзор и использование в продакшне

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

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


Кратко про веб-компоненты: это набор технологий, которые позволяют использовать компонентный подход с инкапсуляцией стилей и скриптов в вебе нативно, без подключения каких-либо библиотек или фейрмворков. Если вам интересно, что предлагают стандарты вместо привычных уже React или Angular, и как это использовать при разработке под старые браузеры, прошу под кат.


Читать дальше →
Всего голосов 31: ↑31 и ↓0+31
Комментарии18

Ужасный import кракен — как использовать ES6-модули и не сойти с ума

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

Глобальная область видимости (aka namespace в TypeScript) — уже давно не круто. Можно долго перечислять преимущества модулей (ES6 модулей, в частности), но лично для меня решающим стала возможность использовать SystemJS для динамической загрузки исходников и Rollup, для сборки бандла.


Однако, первое, с чем пришлось столкнуться при внедрении ES6-модулей- безумное количество import выражений, с безумным количеством точек внутри:


import { FieldGroup } from "../../../Common/Components/FieldGroup/FieldGroup";

Читать дальше →
Всего голосов 19: ↑17 и ↓2+15
Комментарии108

Метапрограммирование в JavaScript

Время на прочтение17 мин
Количество просмотров23K
Метапрограммирование — вид программирования, связанный с созданием программ, которые порождают другие программы как результат своей работы, либо программ, которые меняют себя во время выполнения. (Википедия)

Говоря более простым языком, метапрограммированием в рамках JavaScript можно считать механизмы, позволяющие анализировать и менять программу в режиме реального времени в зависимости от каких-либо действий. И, скорее всего, вы так или иначе используете их при написании скриптов каждый день.

Всего голосов 41: ↑38 и ↓3+35
Комментарии16

Пульсация экранов телевизоров

Время на прочтение3 мин
Количество просмотров133K
У подавляющего большинства современных телевизоров экраны мерцают, причём уровень пульсации составляет 100% (экран полностью гаснет и загорается). Это может приводить к усталости глаз, головным болям и обострению нервных заболеваний.


Читать дальше →
Всего голосов 144: ↑144 и ↓0+144
Комментарии302

Angular6. PWA. Lazy loading modules. Auto-deploy в Firebase

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

Angular 6 позволяет буквально в несколько команд создать основу для Progressive Web Application (PWA), создавать верстку для навигационных страниц, таблиц, dashboard.

Читать дальше →
Всего голосов 17: ↑16 и ↓1+15
Комментарии2

Практика применения прокси-объектов в JavaScript

Время на прочтение7 мин
Количество просмотров30K
Возможно, вы слышали о том, что в JavaScript ES6 появились новые объекты — так называемые прокси. Тем, кто знает о том, что такое прокси-объекты, и умеет с ними работать, они могут принести немалую пользу. Сегодня мы публикуем перевод материала, который направлен на то, чтобы объяснить всем желающим особенности работы с прокси-объектами JS на множестве примеров.

image

Также откройте в новой вкладке наш предыдущий пост: JavaScript-прокси: и красиво, и полезно
Читать дальше →
Всего голосов 26: ↑25 и ↓1+24
Комментарии15

Как работает JS: анимация средствами CSS и JavaScript

Время на прочтение12 мин
Количество просмотров87K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Анимация — неотъемлемая часть современных веб-интерфейсов. От того, насколько она уместна, привлекательна и производительна, зависит немалая доля впечатлений пользователя от работы с сайтом или веб-приложением. Сегодня, в переводе тринадцатой части серии материалов, посвящённых особенностям JavaScript и связанных с ним технологий, мы поговорим об анимации, выполняемой средствами CSS и JS, а также обсудим подходы к её оптимизации.

Читать дальше →
Всего голосов 20: ↑20 и ↓0+20
Комментарии9

Веб-воркеры в JavaScript: безопасный параллелизм

Время на прочтение15 мин
Количество просмотров19K
Веб-воркеры дают программисту инструмент для выполнения JavaScript-кода за пределами главного потока, который отвечает за то, что происходит в браузере. Этот поток обрабатывает запросы на вывод данных на экран, он поддерживает взаимодействие с пользователем, воспринимая, в частности, нажатия на клавиши клавиатуры и щелчки мышью. Этот же поток отвечает за поддержку сетевого взаимодействия, например, обрабатывая AJAX-запросы.

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

image

Веб-воркеры позволяют выполнять JavaScript-код в отдельном потоке, который совершенно независим от главного потока и от того, что в нём обычно происходит.

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

В материале, перевод который мы публикуем сегодня, будут рассмотрены особенности использования веб-воркеров для решения задач, которые слишком тяжелы для главного потока. В частности, речь здесь пойдёт о том, как организовать обмен данными между главным потоком и потоком веб-воркера. Здесь же будет рассмотрена пара примеров, иллюстрирующих различные сценарии использования веб-воркеров.
Читать дальше →
Всего голосов 27: ↑25 и ↓2+23
Комментарии0

Трансляция один-ко-многим: нужен ли медиасервер?

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

TL;DR – ДА.

Очередная статья нашего израильского коллеги по WebRTC и звонкам между браузерами переведена для Хабра. Мы в Voximplant разрабатываем собственное решение для организации видеоконференций через сервер и можем сказать что да, все именно так. Peer-to-Peer штука хорошая, но работает не во всех случаях. А сделать хорошую видеоконференцию через сервер не так просто, когда к серверу подключается множество разных веб-браузеров и мобильных устройств, каждый со своим подключением к интернет и своей реализацией видеостека. Через некоторое время мы расскажем о внутренностях нашего решения, а сейчас слово передается Цахи Левент-Леви, создателю широко популярного в узких кругах bloggeek.me
Читать дальше →
Всего голосов 28: ↑28 и ↓0+28
Комментарии4

Информация

В рейтинге
Не участвует
Откуда
Санкт-Петербург, Санкт-Петербург и область, Россия
Зарегистрирован
Активность