​Обойдемся без JS

You might not need JavaScript - подборка самых распространенных компонентов интерфейса, реализованных только на HTML+CSS.

Табы, слайдеры, модальные окна и еще много всего.

Чекнуть: http://youmightnotneedjs.com/

#interface #css #html

Делегирование событий в JavaScript

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

Читать: https://prglb.ru/415p2

#javascript #core #beginners

Frontend разработчик (React)

Требования:
— отличное знание HTML и CSS, а также особенностей их отображения в различных браузерах
— знание стека React + MobX
— хорошее знание современного JavaScript, TypeScript
— знание CSS/JS-препроцессоров и систем сборки (Stylus, Babel, Webpack);
— умение работать с системой контроля версий Git

от 100 000 до 160 000 ₽, офис в Москве

Подробнее о вакансии

React в действии

Книга Т. М. Томаса познакомит вас с библиотекой React и ее экосистемой. Отличное систематизированное введение в тему.

#books #frameworks #react

Эффективное использование ARIA в HTML5

ARIA - Accessible Rich Internet Applications (доступные насыщенные интернет-приложения).

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

Читать: https://prglb.ru/ekyb
Спецификация тут: https://www.w3.org/TR/wai-aria-1.1/

#accessibility

Микросервисный подход в веб-разработке: micro frontends

Жизнеспособен ли микросервисный подход во фронтенд-разработке? Каковы его плюсы и минусы? Не пора ли срочно переводить все ваши проекты на новую архитектуру?

Не торопитесь - хоть микрофронтенд предлагает серьезные преимущества, у него очень много недостатков.

Разобраться: https://prglb.ru/5xpap

#bestpractices

Рваные края в диагональных градиентах

👎 При создании диагональных линейных градиентов в CSS с резким переходом на месте стыка цветов образуется рваная линия.
background: linear-gradient(176deg, white, white 75%, black 75%, black 100%);

Маленький хак для решения этой проблемы: начало второго цвета нужно немножко сдвинуть.

👉 Способ 1 - десятые доли процента:
background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);

👉 Способ 2 - функция calc:
background: linear-gradient(176deg, white, white 75%, black calc(75% + 1px), black 100%);

Источник: https://prglb.ru/3wj0g

#css #snippets #code

CSS-переменные в инлайн-стилях

Зачем вам может потребоваться хранить переменные прямо в атрибуте style? Оказывается, таких кейсов немало!

🖍 еще более гибкая грид-сетка
🖍 стили кнопок
🖍 размер юзерпика

Этот подход может здорово упростить написание CSS.

Подробнее: https://prglb.ru/5w37w

#css

Цикл событий: как выполняется асинхронный JavaScript-код в Node.js

Разбираемся, как работает цикл событий Node.js, зачем там коллбэки и в каком порядке они выполняются.

Подробнее: https://proglib.io/p/cikl-sobytiy-kak-vypolnyaetsya-asinhronnyy-javascript-kod-v-node-js-2020-02-26

#javascript #node #core

Коллеги!
На вебинаре курса "Разработчик React.js" рассмотрим:
- что входит в стандартный набор возможностей React.js?
- можно ли с помощью этого построить сложное приложение?
- функциональное программирование - это легко или сложно?
- что такое Redux и зачем он нужен?

Пройдите вступительный тест и зарегистрируйтесь по ссылке: https://otus.pw/7PY1/

5 ошибок начинающего фронтендера

Как не сбиться с пути?

https://prglb.ru/2inuq

#beginners

2 и 3 марта, в 20.00 (мск) разработчиков, тимлидов, архитекторов и технических руководителей ждут на бесплатном двухдневном онлайн-интенсиве «Индексы и репликация: best practices и подводные камни». Запишитесь, чтобы не пропустить и получить напоминание вовремя: https://otus.pw/UxNC/

На интенсиве вы обсудите и проработаете некоторые паттерны и инструменты ускорения работы с базой данных. Для подготовки к практической части занятия желательно установить mysql 5.7

Проведет практические занятия Владислав Родин,  разработчик, архитектор высоконагруженных систем и преподаватель углубленного онлайн-курса «Архитектор высоких нагрузок».

8 классных тем для Visual Studio Code

Выбрать: https://prglb.ru/rphd

#tools #editor

Полное руководство по классам в JavaScript

От конструктора до статических методов. И про прототипы под капотом не забудем 😌

Читать: https://prglb.ru/4hewc

#javascript #core

Я ❤ Фронтенд 2020

8 крутых докладов о состоянии современного фронтенда.

📖 Почитать программу: https://prglb.ru/22uki

📺 Посмотреть доклады: https://prglb.ru/112e1

#video

@xuyanet — Фаричка Рословец, инженер космической отрасли, выпускница MBA и создатель YouTube-канала  про технологии, которые уже работают в России, но о них мало кто знает.

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

Digital Twin, RPA и VR, российские разработки и научные труды.

В общем, заходите: https://t.me/xuyanet

10 способов спрятать элемент на CSS

Существует немало способов скрыть элемент со страницы - и все они по-разному влияют на структуру макета, анимацию, доступность, производительность и обработку событий. В разных ситуациях следует использовать разные техники.

Выбрать подходящую: https://prglb.ru/3ok1d

#css

Как написать хороший HTML & CSS код с помощью Webflow

Webflow — это, по сути, визуальный конструктор для создания HTML и CSS кода. Звучит не очень серьезно, но этот инструмент может существенно облегчить работу верстальщика или дизайнера.

Подробнее: https://prglb.ru/u051

#tools #html #css

​​Приглашаем всех разработчиков 11 марта в 20.00 (мск) на онлайн-интенсив «Архиватор Хаффмана».  Запишитесь сейчас и получите напоминание в день вебинара: https://otus.pw/pLsu/

На практическом вебинаре обсудим и напишем архиватор на основе кода Хаффмана:
• Способы сжатия информации.
• Префиксный код Хаффмана.
• Создание частотного словаря.
• Дерево кода Хаффмана.
• Алгоритм сжатия файла.
• Алгоритм распаковки архива.
• Тестирование программы на разных файлах.

Для активного участия в вебинаре вам понадобятся Microsoft Visual Studio и C# .NET.

Проведет практическое занятие Евгений Волосатов, руководитель продвинутого  онлайн-курса «Алгоритмы для разработчиков» в Отус Онлайн-образование.

Цитирование в HTML

В чем разница между тегами blockquote, q, cite - и какой из них следует использовать для оформления цитат?

Спойлер

✏️ для больших фрагментов - blockquote 👌
✏️ для небольших, находящихся прямо в строке, - q (но не для сарказма 🤔)
✏️ а cite - вообще предназначен не для цитат 😲

Разобраться: https://prglb.ru/1jc9i

P.S. Не вмешивайте сюда тег dialog.

#html #accessibility