Обновить
256K+

Веб-разработка *

Делаем веб лучше

317,2
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

WebRTC на своем сайте — без багов и бюджета

Время на прочтение2 мин
Охват и читатели10K
Технология WebRTC существует давно и поддерживается практически всеми браузерами (97% по нашему опыту). Многие задумываются установить и себе виджет WebRTC для связи с клиентами и повышения конверсии.



Как добавить себе на сайт WebRTC звонки без лишних затрат и обойти баги с граблями,
Читать дальше →

Изучаем Docker, часть 4: уменьшение размеров образов и ускорение их сборки

Время на прочтение8 мин
Охват и читатели208K
В этой части перевода серии материалов, которая посвящена Docker, мы поговорим о том, как оптимизировать размеры образов и ускорить их сборку. В прошлых материалах мы сравнивали образы Docker с пиццей, термины с пончиками, а инструкции файлов Dockerfile с бубликами. Сегодня же не будет никакой выпечки. Пришло время посидеть на диете.

Часть 1: основы
Часть 2: термины и концепции
Часть 3: файлы Dockerfile
Часть 4: уменьшение размеров образов и ускорение их сборки
Часть 5: команды
Часть 6: работа с данными


Для того чтобы разобраться с тем, о чём мы будем тут говорить, вам будет полезно освежить в памяти то, о чём шла речь в третьей части этой серии материалов. А именно, там мы говорили об инструкциях файлов Dockerfile. Знание этих инструкций и тех особенностей Docker, которые мы обсудим сегодня, поможет вам оптимизировать файлы образов Docker.
Читать дальше →

Как размер кода зависит от минификатора, сборщика и языка. Неожиданное обновление webpack

Время на прочтение6 мин
Охват и читатели13K
Меня зовут Илья Гольдфарб, я разработчик интерфейсов Яндекса. Мне интересно следить за тем, как развиваются инструменты для сборки фронтенда, поэтому я стараюсь изучать изменения в каждом релизе популярных решений.

В преддверии выхода пятой версии webpack я хочу рассказать о его, казалось бы, минорном релизе 4.26.0 от 19 ноября 2018 года, где неожиданно и без объявления войны изменилась версия минификатора по умолчанию. Раньше это был пакет UglifyJS, теперь же используется Terser, форк UglifyES — ветки UglifyJS, которая может сжимать и ES5, и ES6 код. Terser появился, когда основной майнтейнер отказался поддерживать и развивать UglifyES. Впрочем, UglifyJS тоже прекратил свое развитие с августа 2018 года, когда был выпущен последний релиз. В новом форке исправили некоторые баги и немного отрефакторили код.

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

Вся эта история подвигла меня провести маленькое личное исследование сжатия. Вот вопросы, которые я задал:

  • Что лучше сжимает ES5, Terser или UglifyJS?
  • Что быстрее загружается: сжатая версия ES5 от Terser или от UglifyJS?
  • Какая версия весит больше: ES5 или ES6? И как на это влияет TypeScript?
  • Большая ли разница между настройками по умолчанию и ручной настройкой?
  • А если не webpack? Кто выдаёт сборку меньшего размера, Rollup или webpack?
И вот какие я получил ответы

JavaScript: Большое целое Ну почему

Время на прочтение5 мин
Охват и читатели15K

Не так давно JavaScript похвастался новым примитивным типом данных BigInt для работы с числами произвольной точности. Про мотивацию и варианты использования уже рассказан/переведен необходимый минимум информации. А мне бы хотелось обратить чуть больше внимания на превнесенную локальную «явность» в приведении типов и неожиданный TypeError. Будем ругать или поймем и простим (опять)?
Читать дальше →

Не умничайте с формами для входа

Время на прочтение4 мин
Охват и читатели50K
В последнее время меня начинает сильно раздражать авторизация на сайтах. Поскольку менеджеры паролей становятся более популярными, такие как 1Password (который я использую) и менеджер паролей Chrome (который я тоже использую), веб-сайтам важно учитывать этот факт.

Давайте рассмотрим некоторые шаблоны входа в систему, которые на мой взгляд не идеальны. А затем рассмотрим лучшие практики. TL;DR; Это страницы авторизации, которые просты, предсказуемы, на обычных страницах и дружат с менеджерами паролей.
Читать дальше →

Как быстро написать веб-сайт или веб-приложение и не увязнуть в сборщиках

Время на прочтение5 мин
Охват и читатели17K
Это маленькое руководство описывает создание реактивного веб-приложения используя отрисовку на стороне сервера (Server-Side Rendering, SSR). Клиентская часть являет собой полноценное Vue-приложение, в моём случае используя шаблон MVVM. Серверное приложение работает на микрофреймворке Flask, который может предоставить конечные точки подключения (endpoint) и отдать готовую HTML страницу. HTML страницы (расположены в подкаталоге myapp/templates) рендерятся шаблонизатором Jinja (устанавливается в качестве зависимости Flask).
Читать дальше →

Реализация свободного перемещения частиц на ReactJS

Время на прочтение3 мин
Охват и читатели7.8K
Приветствую! Хочу вам показать один из способов, как реализовать свободное перемещение частиц в указанном диапазоне. Для выполнения этой задачи я буду использовать ReactJS. Но сам алгоритм все равно будет общим, и вы можете его использовать где угодно.

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

Учебный курс по React, часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов

Время на прочтение8 мин
Охват и читатели16K
В сегодняшней части перевода курса по React мы предлагаем вам выполнить очередное практическое задание и представляем вашему вниманию рассказ о том, как модифицировать состояние компонентов React.

image

Часть 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: курсовой проект
Читать дальше →

Профессиональная контейнеризация Node.js-приложений с помощью Docker

Время на прочтение10 мин
Охват и читатели82K
Автор материала, перевод которого мы публикуем сегодня, работает DevOps-инженером. Он говорит, что ему приходится пользоваться Docker. В частности, эта платформа для управления контейнерами применяется на разных этапах жизненного цикла Node.js-приложений. Использование Docker, технологии, которая, в последнее время, является чрезвычайно популярной, позволяет оптимизировать процесс разработки и вывода в продакшн Node.js-проектов.

image

Сейчас мы публикуем цикл статей о Docker, предназначенных для тех, кто хочет освоить эту платформу для её использования в самых разных ситуациях. Этот же материал сосредоточен, в основном, на профессиональном применении Docker в Node.js-разработке.
Читать дальше →

Почему мы используем GraphQL в 8base

Время на прочтение4 мин
Охват и читатели7K


Друзья, всем привет!

Эта статья в первую очередь будет интересна фронтенд-разработчикам, особенно тем кому актуальна тема GraphQL, но в то же время я надеюсь, что она будет полезна и бэкенд-разработчикам и поможет им понять преимущества GraphQL глазами фронтендера.
Читать дальше →

Открытый вебинар «Работа: своя и чужая»

Время на прочтение6 мин
Охват и читатели1.7K
Добрый день, друзья! Уже в этот четверг мы запускаем новый поток по курсу «Руководитель разработки». И сегодня хотим поделиться с вами транскрипцией открытого вебинара, который прошел на прошлой неделе.

Открытый вебинар «Работа: своя и чужая»

С одной стороны, фраза «это не моя работа» звучит отталкивающе: как-то не проактивно и некомандно. С другой стороны, всю работу сделать невозможно. То есть делать «не свою» работу — это равносильно НЕ делать свою работу! А это уже чревато…

Так как же отделить свою работу от не своей? Что считать своей работой? Что делать с не своей работой, если всё равно нас интересует конечный результат? Обо всём этом и многом другом мы поговорили на очередном открытом уроке курса «Руководитель разработки».



Преподаватель — Станислав Михальский, директор по разработке в компании «Биглион Технологии».

Работа и уровни деятельности

Формальное определение работы звучит так: «Работа — это деятельность человека, направленная на создание ценностей либо на удовлетворение потребностей других людей». Ключевое слово здесь — деятельность. Во-первых, любая деятельность предполагает наличие ресурсов (в нашем случае это время). Во-вторых, деятельность должна приводить к конечному результату. И эти два момента (ресурсы и конечный результат) всегда нужно строго контролировать.

Изучаем Python: модуль argparse

Время на прочтение6 мин
Охват и читатели187K
Если вы занимаетесь обработкой и анализом данных с использованием Python, то вам, рано или поздно, придётся выйти за пределы Jupyter Notebook, преобразовав свой код в скрипты, которые можно запускать средствами командной строки. Здесь вам и пригодится модуль argparse. Для новичков, привыкших к Jupyter Notebook, такой шаг означает необходимость покинуть зону комфорта и перейти в новую среду. Материал, перевод которого мы публикуем сегодня, написан для того, чтобы облегчить подобный переход.


Модуль argparse
Читать дальше →

OWASP Proactive Controls: cписок обязательных требований для разработчиков ПО

Время на прочтение14 мин
Охват и читатели17K
image

Предлагаем вашему вниманию Top 10 Proactive Controls for Software developers – 10 аспектов безопасности, на которых должны сосредоточиться разработчики ПО. Данная статья содержит список техник по обеспечению безопасности, обязательных для реализации при разработке каждого нового проекта.
Читать дальше →

Ближайшие события

Дайджест свежих материалов из мира фронтенда за последнюю неделю №352 (11 — 17 февраля 2019)

Время на прочтение3 мин
Охват и читатели16K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

Важные изменения в работе CTE в PostgreSQL 12

Время на прочтение2 мин
Охват и читатели33K
WITH w AS  NOT MATERIALIZED (
    SELECT * 
    FROM very_very_big_table
)
SELECT * 
FROM w AS w1 
    JOIN w AS w2 
        ON w1.key = w2.ref
WHERE w2.key = 123;

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


Это войдет в PostgreSQL 12, и это big deal. Давайте рассмотрим, почему

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

Удобный БЭМ

Время на прочтение5 мин
Охват и читатели41K


Приветствую. В этой статье я расскажу, как можно изменить БЭМ, сохранив лучшие его черты и избавившись от худших.
Читать дальше →

GeekUniversity обновил программу обучения веб-разработке: ещё больше практики и кейсы Delivery Club

Время на прочтение2 мин
Охват и читатели3.4K


Мы рады сообщить об обновлении программы факультета веб-разработки в онлайн-университете для программистов GeekUniversity. Теперь обучение займёт полтора года вместо одного. В программе появится курс о highload-приложениях, разработанный совместно с Delivery Club. Подробнее об обновлениях под катом.

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

О линтерах, качестве кода, качестве вообще и управлении качеством

Время на прочтение7 мин
Охват и читатели20K
Бойтесь своих желаний, они могут исполниться.
Народная мудрость.

Одна пара пожелала пожениться и обрести вечное счастье. Я взорвал их машину у церкви сразу после венчания.
One Wish Grant, фильм Трасса 60.

image

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

Изучаем Docker, часть 3: файлы Dockerfile

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

Часть 1: основы
Часть 2: термины и концепции
Часть 3: файлы Dockerfile
Часть 4: уменьшение размеров образов и ускорение их сборки
Часть 5: команды
Часть 6: работа с данными


Бублики — это инструкции в файле Dockerfile
Читать дальше →

Собираем бандл мечты с помощью Webpack

Время на прочтение18 мин
Охват и читатели71K
JS-приложения, сайты и другие ресурсы становятся сложнее и инструменты сборки — это реальность веб-разработки. Бандлеры помогают упаковывать, компилировать и организовывать библиотеки. Один из мощных и гибких инструментов с открытым исходным кодом, который можно идеально настроить для сборки клиентского приложения — Webpack.

Максим Соснов (crazymax11) — Frontend Lead в N1.RU внедрил Webpack в несколько больших проектов, на которых до этого была своя кастомная сборка, и контрибьютил с ним несколько проектов. Максим знает, как с Webpack собрать бандл мечты, сделать это быстро и конфигурировать так, чтобы конфиг оставался чистым, поддерживаемым и модульным.


Расшифровка отличается от доклада — это сильно усовершенствованная пруфлинками версия. По всей расшифровке рассыпаны пасхалочки на статьи, плагины, минификаторы, опции, транспайлеры и пруфы слов докладчика, ссылки на которые просто не поставить в выступление. Если собрать все, то откроется бонусный уровень в Webpack :-)