Pull to refresh
1
0
Send message

Адаптивные таблицы в вебе

Reading time53 min
Views21K

Таблица — один из самых эффективных способов подачи ТЕКСТОВОЙ информации: на минимуме пространства размещено максимум данных. И что не менее важно — эти данные доступны не только для восприятия, но и для анализа (СРАВНЕНИЯ). Основная сложность таблиц при верстке — их адаптивность для устройств с небольшими экранами (мобильных девайсов). Можно ли сделать так, чтобы даже на экране с размерами в несколько сантиметров таблицы могли быть удобными для восприятия?

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments7

7 многообещающих расширений VS Code 2021 года

Reading time4 min
Views15K

К старту курса по Fullstack-разработке на Python делимся подборкой расширений Visual Studio Code, среди которых вы найдёте генератор документации для кода JavaScript на базе ИИ и лёгкий, простой клиент REST API. За подробностями приглашаем под кат.

Читать далее
Total votes 21: ↑17 and ↓4+14
Comments5

Библиотека Frontend-разработчика, часть 3: Литература уровня «Middle» и выше

Reading time5 min
Views23K

Явление деления разработчиков на уровни очень распространено. Даже в вакансиях чаще всего пишут не просто "Frontend-разработчик", а более развернуто - "Junior/Middle/Senior/${место для вашей должности} Frontend-разработчик". Для чего? С помощью такого деления легче делегировать задачи в команде. У каждого разработчика своя особая матрица компетенций, свои навыки, которые он оттачивал месяцами, а то и годами. С помощью такого деления процесс разработки ускоряется в разы.


Вообще на рынке (я смотрю на рынок стран СНГ) по состоянию на начало 2021 года среди Frontend-разработчиков имеют место быть такие должности (от низкого уровня, к наивысшему и без привязки к инструментам/библиотекам)

Ну, удиви
Total votes 6: ↑6 and ↓0+6
Comments4

Скачать готовую html-вёрстку письма можно с помощью плагина для Фигмы

Reading time8 min
Views4.4K

Речь пойдёт о Marka Email Generator. Это новый плагин для Фигмы — инструмента, в котором мы работаем с дизайнами и прототипами писем.

До 2019 года мы знали два способа создания вёрстки: в редакторе кода и в блочных редакторах. Идеальный блочный редактор пока не изобрели, поэтому свою агентскую вёрстку мы создавали в редакторах кода. До настоящего момента.

В конце 2019 года появился плагин для Фигмы, который позволяет, при соблюдении определённых правил при создании дизайн-макета, выгружать макет в готовое для отправки письмо.

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

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

Читать далее
Total votes 3: ↑3 and ↓0+3
Comments0

Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

Reading time31 min
Views147K


Доброго времени суток, друзья!

Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.

Основные источники: A Complete Guide to Flexbox, A Complete Guide to Grid.

В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.

Без дальнейших предисловий.


Total votes 11: ↑7 and ↓4+6
Comments7

Как разобраться в API HTML?

Reading time8 min
Views20K
Автор статьи, перевод которой мы сегодня публикуем, решил разобрать несколько HTML5-API  и поговорить об их возможностях, о том, для чего они созданы, об особенностях их использования и об их ограничениях.


Читать дальше →
Total votes 25: ↑23 and ↓2+33
Comments8

Lazy-loading видео

Reading time4 min
Views11K
image

Обычно видео загружаются с помощью тега video (хотя, появился альтернативный метод с использованием img, правда, его возможности ограничены). Способ реализации отложенной загрузки видео зависит от варианта его использования. Давайте обсудим несколько сценариев, для каждого из которых требуется своё решение.
Читать дальше →
Total votes 26: ↑26 and ↓0+26
Comments3

[Frontend Практика #1] Drag and Drop, Превью изображения, Средний цвет изображения и Отдельный поток

Reading time7 min
Views8K


Всем привет, сегодня разработаем приложение которое определяет средний цвет изображения в отдельном потоке и покажем превью изображения (полезно при создании форм загрузки изображения).

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

Зачем?


Какой-то острой необходимости в этом нет, но определение цветов изображение зачастую используется для:

  • Поиска по цвету
  • Определение заднего фона изображения (если оно не занимает весь экран, что бы хоть как-то сочеталось с остатком экрана)
  • Цветные миниатюры для оптимизации загрузки страницы (показывать цветную палитру вместо обжатого изображения)

Мы будем использовать:

  • Typescript
  • React наряду с Create React App — почему бы и нет? Мы быстро создадим рабочее окружения и сможем билдить наш проект
  • HTML Drag and Drop API — для перетаскивания изображения с рабочего стола в браузер
  • Web workers и Greenlet — для вынесения сложных вычислений в отдельный поток
  • classnames
  • File API
  • Data URLs
Читать дальше →
Total votes 2: ↑1 and ↓10
Comments8

Webpack: руководство для начинающих

Reading time9 min
Views271K


Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

  1. Зачем нужен этот инструмент?
  2. Какие задачи он выполняет?

Если вы не можете ответить на эти вопросы, возможно, вам не нужна изучаемая технология. Давайте попробуем ответить на эти вопросы применительно к Webpack.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments4

Дэн Абрамов о замыканиях в JavaScript

Reading time7 min
Views22K
Замыкания вызывают у программистов сложности из-за того, что это — «невидимая» конструкция.

Когда вы используете объект, переменную или функцию, вы делаете это намеренно. Вы думаете: «Тут мне понадобится переменная» — и добавляете её в свой код.



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

Если в двух словах, то замыкание — это когда функция обращается к переменным, объявленным за её пределами. Например, замыкание содержится в этом фрагменте кода:

let users = ['Alice', 'Dan', 'Jessica'];
let query = 'A';
let user = users.filter(user => user.startsWith(query));

Обратите внимание на то, что user => user.startsWith(query) — это функция. Она использует переменную query. А эта переменная объявлена за пределами функции. Это и есть замыкание.

Вы, если хотите, можете дальше не читать. Оставшаяся часть этого материала рассматривает замыкания в другом свете. Вместо того чтобы говорить о том, что такое замыкания, эта часть статьи посвятит вас в подробности методики обнаружения замыканий. Это похоже на то, как, в 1960-х, работали первые программисты.
Читать дальше →
Total votes 29: ↑21 and ↓8+25
Comments63

Решение проблемы зазубренных линий в градиентах

Reading time2 min
Views5.5K
Одним из достаточно распространенных шаблонов проектирования дизайна, с которым вы, вероятно, сталкивались, являются блоки с угловым переходом градиентных цветов. Это выглядит примерно так, как показано на изображении ниже.


Угловой градиент внутри прямоугольника
Total votes 21: ↑17 and ↓4+13
Comments11

Локальное хранилище или куки? Безопасное хранение JWT на клиенте

Reading time6 min
Views72K
JWT (JSON Web Token) — это замечательный стандарт, основанный на формате JSON, позволяющий создавать токены доступа, обычно используемые для аутентификации в клиент-серверных приложениях. При использовании этих токенов возникает вопрос о том, как безопасно хранить их во фронтенд-части приложения. Этот вопрос нужно решить сразу же после того, как токен сгенерирован на сервере и передан клиентской части приложения.



Материал, перевод которого мы сегодня публикуем, посвящён разбору плюсов и минусов использования локального хранилища браузера (localStorage) и куки-файлов для хранения JWT.
Читать дальше →
Total votes 30: ↑24 and ↓6+32
Comments20

В одной лодке с «ублюдком»: 11 продвинутых советов по использованию Git

Reading time11 min
Views51K

*"ублюдок" — вольный перевод слова "git" — "an unpleasant or contemptible person", "неприятный или презренный человек".



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


Давайте посмотрим, что можно использовать, чтобы улучшить себе жизнь. Статья предполагает, что читатель умеет пользоваться основными возможностями git и понимает что делает, когда, скажем, вводит в консоль git rebase --merge --autostash.

Читать дальше →
Total votes 84: ↑79 and ↓5+95
Comments26

Выбор зависимостей JavaScript

Reading time10 min
Views13K

Выбор зависимостей JavaScript


Всем привет! В предыдущем посте мы подробно поговорили про добавление зависимостей в проект и про способы и стратегии их обновления.


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

Читать дальше →
Total votes 27: ↑25 and ↓2+30
Comments6

Управление зависимостями JavaScript

Reading time10 min
Views35K

Управление зависимостями JavaScript


Всем привет! Меня зовут Слава Фомин, я ведущий разработчик в компании DomClick. За свою 16-ти летнюю практику я в первых рядах наблюдал за становлением и развитием JavaScript как стандарта и экосистемы. В нашей компании мы используем JavaScript, в первую очередь, для продвинутой front-end разработки и успели перепробовать достаточно большое количество различных технологий, инструментов и подходов, набить много шишек. Результатом этого кропотливого труда стал ценнейший опыт, которым я и хочу поделиться с вами.

Читать дальше →
Total votes 28: ↑25 and ↓3+25
Comments19

Установка и обновление зависимостей в JavaScript

Reading time11 min
Views65K

Установка и обновление зависимостей JavaScript


И снова привет! В прошлом посте мы начали рассматривать процесс управления зависимостями в JavaScript, разобрали основы: что такое npm-пакет, как выглядит манифест пакета, в каких полях прописываются зависимости и в принципе что такое дерево зависимостей, а также основы семантического версионирования (semver). Если вы пропустили предыдущий пост, то рекомендую начать с него.


Сегодня мы пойдем немного дальше и более подробно рассмотрим как работает semver, как правильно прописывать диапазоны зависимостей, а также устанавливать и обновлять их.

Читать дальше →
Total votes 28: ↑27 and ↓1+31
Comments9

Устройство ленивой загрузки в популярных фронтенд-фреймворках

Reading time9 min
Views16K
Snail steampunk by Avi-li

Команда Mail.ru Cloud Solutions перевела статью о том, что означает ленивая загрузка в трех фронтенд-фреймворках: Angular, React и Vue.js. Далее текст от лица автора.

Один из моих любимых терминов на сегодняшний день — «ленивая загрузка». Честно говоря, когда несколько лет назад я его услышал, то улыбнулся. В этой статье рассмотрю, что именно означает этот термин применительно к трем наиболее часто используемым фронтенд-фреймворкам: Angular, React и Vue.js.
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments3

5 типичных ошибок при создании React компонентов (с хуками) в 2020 году

Reading time8 min
Views17K
image

Всем привет! Из этой статьи вы узнаете о самых распространенных ошибках при создании React компонентов, а также о том, почему они считаются ошибками, как их избежать или исправить.


Оригинальный материал был написан немецким разработчиком Лоренцом Вайсом для личного блога, а позже собрал много позитивных отзывов на dev.to. Переведено командой Quarkly специально для комьюнити на Хабре.


Читать дальше →
Total votes 14: ↑13 and ↓1+17
Comments38

Что такое CI (Continuous Integration)

Reading time10 min
Views135K
CI (Continuous Integration) — в дословном переводе «непрерывная интеграция». Имеется в виду интеграция отдельных кусочков кода приложения между собой. Чем чаще мы собираем код воедино и проверяем:

  • Собирается ли он?
  • Проходят ли автотесты?

Тем лучше! CI позволяет делать такие проверки автоматически. Он используется в продвинутых командах разработки, которые пишут не только код, но и автотесты. Его спрашивают на собеседованиях — хотя бы понимание того, что это такое. Да, даже у тестировщиков.

Поэтому я расскажу в статье о том, что это такое. Как CI устроен и чем он пригодится вашему проекту. Если вы больше любите видео-формат, можно посмотреть мой ролик на youtube на ту же тему.


Читать дальше →
Total votes 30: ↑26 and ↓4+30
Comments22

Information

Rating
Does not participate
Registered
Activity