Дайджест свежих материалов из мира фронтенда за последнюю неделю №346 (1 — 6 января 2019)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Курс лекций по JavaScript и Node.js в КПИ
2 мин
Товарищи инженеры, как и было обещано в анонсе, половина лекций (а это 51) уже доступны для просмотра на ютюбе и я продолжу их записывать в 2019 году. Часть из нужно будет перезаписать, потому, что в первых лекциях не самый лучший звук и потому, что очень простые темы у меня пока не очень хорошо получаются. Лучше вышли сложные и актуальные темы, которые мне и самому более интересно рассказывать. Я бы не сказал, что это курс для начинающих, скорее, это курс для тех, кто уже знает синтаксис. За это время поступило множество предложений, как улучшить способ подачи материала: делить на более короткие лекции, подготовить задачи для практического освоения, записывать семинары и ответы на вопросы студентов, добавить в программу разбор целого ряда спорных и холиварных тем. Но не все сразу, я и так посвящаю этому треть жизни.
Делаем мессенджер*, который работает даже в лифте
5 мин
*на самом деле мы напишем только прототип протокола.Возможно, вы встречались с подобной ситуацией – сидите в любимом мессенджере, переписываетесь с друзьями, заходите в лифт/тоннель/вагон, и интернет вроде ещё ловит, но отправить ничего не получается? Или иногда ваш провайдер связи неправильно конфигурирует сеть и 50% пакетов пропадает, и тоже ничего не работает. Возможно, вы думали в этот момент — ну ведь можно же наверное как-то сделать, чтобы при плохой связи всё равно можно было отправить тот маленький кусочек текста, который вы хотите? Вы не одни.
Источник картинки
В этой статье я расскажу про свою идею для реализации протокола на основе UDP, который может помочь в этой ситуации.
Dart vs Node.js: сравниваем производительность на реализациях HTTP сервера
2 мин
Всем доброго времени суток!
В этом году с выходом Flutter — фреймворка для кроссплатформенной разработки приложений наметился подъем хайпа по языку Dart. Как и любой перфекционист прокрастинирующий от скуки лентяй я задумался о сравнении производительности серверной реализации виртуальной машины Dart с ее потенциальным антагонистом в лице Node.js. Скажу сразу, что во мне теплилась надежда что Dart победит, а я обрету святой грааль дарующий мне превосходство над потенциальными конкурентами на ближайшие пару тройку пятилеток, но реальность оказалось немного иной...
Дайджест свежих материалов из мира фронтенда за последнюю неделю №345 (24 — 30 декабря 2018)
3 мин
Предлагаем вашему вниманию последнюю в этом году подборку с ссылками на новые материалы из области фронтенда и около него.
Учебный курс по React, часть 5: начало работы над TODO-приложением, основы стилизации
7 мин
Туториал
Перевод
Сегодня, в следующей части перевода учебного курса по React, мы начнём работу над первым учебным проектом и поговорим об основах стилизации.
→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект
→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект
Анимация подчёркивания ссылок на чистом CSS
2 мин
Туториал
Перевод
Одно из преимуществ создания моего личного сайта с нуля вместо использования готовой темы заключается в том, что я начинаю с настроек браузера по умолчанию и постепенно добавляю собственные расцветки. Я стараюсь удержать сайт от раздувания, но и персонализация — важное дело. Нужно найти некий компромисс между спартанскими страницами Hacker News и Craigslist с одной стороны и перегруженностью старого MySpace с другой.
Как-то мне попался сайт с причудливыми анимированными подчёркиваниями для ссылок, и я захотел реализовать эффект. Но мне важно использовать чистый CSS, потому что ради таких легкомысленных вещей негоже добавлять JavaScript, который может вызвать проблемы с производительностью или удобством интерфейса (см. угон полосы прокрутки).
Как-то мне попался сайт с причудливыми анимированными подчёркиваниями для ссылок, и я захотел реализовать эффект. Но мне важно использовать чистый CSS, потому что ради таких легкомысленных вещей негоже добавлять JavaScript, который может вызвать проблемы с производительностью или удобством интерфейса (см. угон полосы прокрутки).
Grid Layout как основа современной раскладки
15 мин
В темные века верстальщики строили сайты на таблицах. Потом они освоили float и flexbox, и тьма отступила. В 2017-м наступила эпоха Просвещения с приходом CSS Grid Layout.
Grid учитывает горизонтальное и вертикальное пространство, с ним можно менять раскладку, не трогая разметку, и все это без медиазапросов. С Grid можно забыть про магические числа, хаки, обходные пути и CSS-фреймворки.
Несмотря на всю мощь, есть маленький нюанс, который портит картину — его все еще редко используют верстальщики. Спецификация Grid есть, браузеры поддерживают, а реальных проектов мало.
Об этом расшифровка доклада Сергея Попова на Frontend Conf: про спецификацию, про то, почему верстальщики боятся Grid и как решиться применять сетку в своих проектах, чтобы «Make your website great again!».
Grid учитывает горизонтальное и вертикальное пространство, с ним можно менять раскладку, не трогая разметку, и все это без медиазапросов. С Grid можно забыть про магические числа, хаки, обходные пути и CSS-фреймворки.
Несмотря на всю мощь, есть маленький нюанс, который портит картину — его все еще редко используют верстальщики. Спецификация Grid есть, браузеры поддерживают, а реальных проектов мало.
Об этом расшифровка доклада Сергея Попова на Frontend Conf: про спецификацию, про то, почему верстальщики боятся Grid и как решиться применять сетку в своих проектах, чтобы «Make your website great again!».
Учебный курс по React, часть 4: родительские и дочерние компоненты
8 мин
Туториал
Перевод
Публикуем очередную часть перевода учебного курса по React. Нашей сегодняшней темой будут взаимоотношения родительских и дочерних компонентов.
→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект
→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект
Оценка и планирование в программных проектах — без купюр
10 мин
Друзья, добрый день!
Мы продолжаем серию публикаций «без купюр» о проектах, связанных с разработкой, часто с приставкой «веб». Сегодня поговорим о том, как наиболее правильно и быстро проводить оценки работ и планировать релизы программной системы. Скорее всего, начинающие менеджеры и энергичные и ищущие себя разработчики будут шокированы рекомендациями, но, поверьте — цель стоит одна и только одна: помочь и сделать из вас настоящего джедая, который и пользу компании приносит, и проекты двигает, да и людей развивает одновременно. Такого джедая, который искренне не заслуживает быть обнаруженным в виде мумии в темной серверной между стойками с веб-серверами и базами данных веб-проекта, летящего в будущее без душевно документированного кода, ТЗ — лишь на энергии чистого «ХЗ». Итак, поехали!
Мы продолжаем серию публикаций «без купюр» о проектах, связанных с разработкой, часто с приставкой «веб». Сегодня поговорим о том, как наиболее правильно и быстро проводить оценки работ и планировать релизы программной системы. Скорее всего, начинающие менеджеры и энергичные и ищущие себя разработчики будут шокированы рекомендациями, но, поверьте — цель стоит одна и только одна: помочь и сделать из вас настоящего джедая, который и пользу компании приносит, и проекты двигает, да и людей развивает одновременно. Такого джедая, который искренне не заслуживает быть обнаруженным в виде мумии в темной серверной между стойками с веб-серверами и базами данных веб-проекта, летящего в будущее без душевно документированного кода, ТЗ — лишь на энергии чистого «ХЗ». Итак, поехали!
Принципы функционального программирования в JavaScript
17 мин
Перевод
Автор материала, перевод которого мы публикуем сегодня, говорит, что он, после того, как долго занимался объектно-ориентированным программированием, задумался о сложности систем. По словам Джона Оустерхаута, сложность (complexity) — это всё, что делает тяжелее понимание или модификацию программного обеспечения. Автор этой статьи, выполнив некоторые изыскания, обнаружил концепции функционального программирования наподобие иммутабельности и чистых функций. Применение таких концепций позволяет создавать функции, не имеющие побочных эффектов. Использование этих функций упрощает поддержку систем и даёт программисту некоторые другие преимущества.
Здесь мы поговорим о функциональном программировании и о некоторых его важных принципах. Всё это будет проиллюстрировано множеством примеров кода на JavaScript.
Здесь мы поговорим о функциональном программировании и о некоторых его важных принципах. Всё это будет проиллюстрировано множеством примеров кода на JavaScript.
19 идей для Node.js-разработчиков, которые стремятся вырасти над собой в 2019 году
16 мин
Перевод
Автор материала, перевод которого мы публикуем, собрал 19 идей, которые могут оказаться полезными для тех Node.js-разработчиков, которые хотят повысить свой профессиональный уровень в 2019 году. Мир JavaScript огромен, поэтому освоить всё то, о чём пойдёт здесь речь, попросту нереально. Вряд ли найдётся кто-то, кто владеет всем этим в совершенстве. Однако кое-что в этом обзоре вполне может пригодиться именно вам.
Ближайшие события
Как усилить защищенность веб-приложений при помощи HTTP заголовков
18 мин
Перевод
Это третья часть серии по веб-безопасности: вторая часть была «Web Security: введение в HTTP», первая "Как работают браузеры — введение в безопасность веб-приложений".
Как мы видели в предыдущих частях этой серии, серверы могут отправлять заголовки HTTP, чтобы предоставить клиенту дополнительные метаданные в ответе, помимо отправки содержимого, запрошенного клиентом. Затем клиентам разрешается указывать, каким образом следует читать, кэшировать или защищать определенный ресурс.
В настоящее время браузеры внедрили очень широкий спектр заголовков, связанных с безопасностью, чтобы злоумышленникам было труднее использовать уязвимости. В этой статье мы попытаемся обсудить каждый из них, объясняя, как они используются, какие атаки они предотвращают, и немного истории по каждому заголовку.
PHP-Дайджест № 146 (10 – 24 декабря 2018) + Итоги 2018 года
5 мин
По традиции подведем итоги уходящего года и вспомним самые значимые события в мире PHP. И конечно, ссылки на свежие новости, полезные инструменты и интересные материалы за последние две недели.
Под катом вас также ждет розыгрыш лицензий на PhpStorm от JetBrains.
Приятного чтения и с наступающим Новым годом!
Дайджест свежих материалов из мира фронтенда за последнюю неделю №344 (17 — 23 декабря 2018)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Post & Pre Processing CSS
8 мин
Привет, читатель. На пути изучения верстки ты постиг CSS и хочешь продвинуться дальше? Тогда тебе под кат. Осторожно, много кода.
Нужны ли cookie-баннеры в эпоху GDPR — обсуждаем ситуацию и требования закона
4 мин
Баннеры на сайтах с информацией о cookies часто закрывают чуть ли не половину контента, чем раздражают пользователей. Разберемся, что на самом деле требуют европейские законы, из-за которых эти всплывающие окна появились, и можно ли обойтись без баннеров совсем.
ECMAScript-модули в Node.js: новый план
3 мин
Перевод
Текущий статус поддержки ECMAScript-модулей (ESM) в Node.js:
- Экспериментальная поддержка ESM была добавлена в Node.js 8.5.0 12 сентября 2017 года.
- После этого Технический Руководящий Комитет Node.js сформировал команду, ответственную за модули (Modules Team), чтобы она помогла спроектировать недостающие части для грядущего (не экспериментального) релиза. Эта команда состоит из людей из различных отраслей веб-разработки (фронтенд, бекенд, JS-движки, и т.д.).
В октябре Modules Team опубликовала "План по реализации Новых Модулей". Этот пост объясняет, что в нем содержится.
Jira DataCenter — что это? Как работает? Как развернуть?
9 мин
Туториал
Введение
С распространением философии Agile российские IT-специалисты с каждым годом накапливают все больше экспертизы и компетенций в области настройки и управления продуктами для команд разработчиков, самым популярным из которых до сих пор остается Jira. Однако работа с самой «старшей», производительной и высокодоступной ее версией — Jira Data Center — все еще вызывает очень много вопросов. В этом посте я расскажу о некоторых принципах и механизмах работы Jira DataCenter, которые мы применяем на практике. Начну с рассказа о структуре кластера Jira.