​Хоткеи для VS Code: гифки с демонстрацией и шпаргалка

Любую команду в Visual Studio Code можно выполнить через командную строку (Ctrl + Shift + P), но сочетания клавиш помогают сильно экономить время. Достаточно только привыкнуть их использовать.

Добавить в закладки: https://prglb.ru/1xx83

#tools #editor

Крутые CSS-эффекты

👉 Серия видео с примерами создания эффектов на CSS
👉 Кнопки при наведении с крутыми эффектами на HTML и CSS
👉 Стилизация radio кнопок с использованием HTML и CSS
👉 Создание страницы 404 Error Page Not Found в стиле CyberPunk используя CSS
👉 Стилизация input checkbox на чистом CSS
👉 Форма регистрации HTML CSS
👉 Стилизация select на чистом CSS
👉 Адаптивный слайдер с использованием HTML и CSS
👉 Кнопка с hover эффектом с использованием HTML CSS
👉 Кнопки социальных сетей с hover эффектом, градиентом и анимацией на HTML и CSS
👉 Темная и светлая тема с переключателем на CSS и jQuery
👉 Light Button with Animation CSS Effects on Hover

Смотреть: https://prglb.ru/371kw

#video #css #effects

Теперь bug hunter'ы могут помочь сервису, которым пользуются они сами, друзья, близкие и мама с бабушкой — Ozon первым среди российских e-commerce компаний запустил собственную bug bounty программу.

За найденные на сайте уязвимости можно получить до 120 000 ₽. Отправлять репорты можно на HackerOne: hackerone.com/ozon. Удачной охоты!

Противоречивый UX с нативной ленивой загрузкой

В статье разобраны особенности реализации loading=lazy в разных браузерах.

Читать: https://prglb.ru/ool1

#interface #browser

​"Умные" анимации с кастомными CSS-свойствами

Создание гибких настраиваемых анимаций на CSS-переменных.

Ссылка: https://prglb.ru/37yhd

#css #animation

Правильный ответ: зеленого цвета

Директива !important имеет больший приоритет, чем простые инлайн-стили.

Узнать больше о каскаде и конкурирующих стилях в CSS: https://prglb.ru/4pcyn

#css

MoscowJS 47

4 видео со встречи MoscowJS 47:
В погоне за перформансом
Как разработчику находить максимум багов за минимум времени
Как писать код с уважением
Путь к разработке расширяемых интерфейсов

Смотреть: https://prglb.ru/5vitb

#video #javascript #moscowjs

​Как загружать полифиллы только тогда, когда они нужны

Иван Акулов разбирает три подхода умного подключения полифиллов в вашем коде:
polyfill.io
module/nomodule
опция useBuiltIns

Ссылка: https://prglb.ru/4ow5f

#performance #polyfill

​Вам не нужен Moment.js

Подборка функций для замены библиотеки moment.js при работе с датами и временем.

В закладки: https://prglb.ru/ovb6

#javascript #library

Руководство по Svelte

Краткий туториал с важными концепциями Svelte и множеством полезных ссылок.

#frameworks #svelte

В закладки: https://prglb.ru/2yqmu

​Полный список решений для валидации форм в React-приложениях

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

👉 Formik
👉 React Final Form
👉 Unform
👉 React Form
👉 react-json-schema-form
👉 React Hook Form
👉 Redux Form
👉 Formsy
👉 Simple React Validator

Подробный обзор с примерами использования здесь: https://prglb.ru/5wgzp

#frameworks #react #validation

​9 прекрасных проектов, которые можно создать на ванильном JavaScript

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

Список идей с видео-объяснениями: https://prglb.ru/5j7bt

#javascript #projects

​Инклюзивные компоненты: слайдер

Слайдеры похожи на мужчин. Буквально не все они плохие. Кто-то из них даже отзывчивый и тактичный.

Все, что вы должны знать о слайдерах в переводе Татьяны Фокиной: https://prglb.ru/4ra49

#accessibility #interface

​SVG-редакторы в браузере

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

Есть множество инструментов для работы с SVG, в том числе браузерные:

👉 editor.method.ac
👉 SVG edit
👉 Vector Paint
👉 Drawing SVG
👉 Vecteezy Editor
👉 Vectr
👉 Janvas
👉 Boxy SVG
👉 RollApp

Подробный список с описаниями: https://prglb.ru/5gefr

#tools #svg

Как складные девайсы повлияют на фронтенд-разработку?

Новые возможности или новый кошмар?
Читать: https://prglb.ru/43ced

#web #device

Chrome University

Устройство самого популярного браузера Google Chrome в 22 лекциях.

Смотреть (на английском): https://prglb.ru/5soii

#video #browser

Javascript — единственный язык программирования для браузеров. Если не знаешь JS, программировать будет туго. Зато, если знать JS и ещё пару фреймворков, можно стать перспективным фронтенд-разработчиком.

Для тех, кто хочет научиться разрабатывать веб-приложения и сайты, Skillfactory приглашает на курс «Frontend-разработчик».

За полгода вы:
— Научитесь разрабатывать адаптивные сайты с использованием CSS, Flexbox и интерактивные сайты и приложения на JavaScript и HTML.
— Создадите сайт-визитку, сверстаете лендинг, разработаете аналог Trello на React — канбан-доску и познакомитесь с популярными фреймворками Node.js, Vue и Angular.
— Soft Skills прокачаете на бонусном модуле и соберете портфолио на Github.
Карьерный центр в Skillfactory помогает выпускникам с трудоустройством в крупные IT-компании, так что дерзайте.

🚀Получите курс со скидкой 40%: https://clc.to/-OBN6w

👋 Всем привет!

23 июля приглашаем на онлайн-митап сообщества разработчиков MSK VUE.JS.

В программе митапа:

1️⃣ Разработка конструктора отчетов при помощи Cube.js.

2️⃣ 5 действенных техник оптимизации vue-приложений.

3️⃣ Решение проблем REST API при помощи GraphQL.

Подробности и регистрация 👉 https://clc.to/MSK-VUE.JS

​​Пробовали ли вы заниматься фронтенд разработкой на React без подключения к интернету?

Для студенческих проектов и фриланса очень важно, чтобы посторонние зависимости не были сломаны после завершения работ. Однако, некоторые npm пакеты докачивают файлы с облака Amazon, что в случае с node-sass убило ошибкой 404 кучу дипломных проектов студентов. Полностью обособленный от интернета инструментарий разработки с применением React, где в качестве системы сборки выступает только TypeScript Compiler, можно посмотреть в этом репозитории:

https://github.com/tripolskypetr/material-ui-umd