​50 бесплатных ресурсов для создания веб-интерфейсов

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

https://proglib.io/p/50-besplatnyh-resursov-dlya-sozdaniya-veb-interfeysov-2020-05-16

#assets

Познай тайны Flexbox

Видео-курс, посвященный Flexbox-модели в CSS. Наглядный детальный разбор всех свойств и примеры их использования.

Смотреть: https://www.youtube.com/playlist?list=PL_uwZ1gR-hzJob04JV6m7eksx_MPnvDws

#video #css #layout

​5 способов документировать React-компоненты

Компоненты делают код гибким и переиспользуемым. Документированные компоненты к тому же делают его понятным и поддерживаемым. Поэтому документируйте ваши компоненты - в 2020 это даже необязательно делать вручную!

Cтатья рассматривает 5 популярных сервисов для удобной работы с компонентами:

👉 Bit
👉 React Styleguidist
👉 React-Docz
👉 React-docgen
👉 Storybook

Примеры установки и использования прилагаются 😉

Читать: https://blog.bitsrc.io/5-ways-to-document-react-components-in-2020-ecf60f24dee8

#tools #components #react

​Все, что вы должны знать об атрибуте inputmode

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

Очень полезная фича, особенно для специфических данных типа email или номера телефона, для которых приходится постоянно переключать наборы символов.

Самые популярные значения:
- none
- numeric
- tel
- email
- search

Узнать больше: https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

#html #inputmode #interface

​Правильный ответ: 1

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

😲 Почти любой код на JS можно написать с помощью всего лишь 6 символов:

[]()!+

Не верите? Смотрите сами: https://javascript.christmas/2019/17

#javascript #coersion #core

Если вы разработчик полного цикла и жонглируете скриптами, как Илон Маск ракетами, клиенты оторвут вас вместе с компьютером. Вы уже молодцы. А для тех, кто только в начале пути, образовательный портал GeekBrains от Mail.ru Group запустил бесплатный интенсив «Веб-разработка для начинающих». Всего 2 часа –– и билет в профессию у вас в кармане.

Чему научат:
⚡️Создавать небольшие сайты.
🔹Использовать хостинги и публиковать сайты в интернете.
❗️Работать с языком разметки HTML/CSS.
👍Быть молодцом.

Научитесь делать сайты и зарабатывать на этом!

Записаться на вебинар можно по ссылке https://geekbrains.ru/link/2dOJvN

Круглый прогресс-бар на JavaScript

Создание симпатичного динамического прогресс-бара.

Смотреть: https://www.youtube.com/watch?v=amrIqeOXQW0&feature=youtu.be

#video #javascript #snippets #interface

​Инструменты для работы с HTTP-запросами в Node.js

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

Некоторые представляют собой высокоуровневые абстракции, скрывающие сам объект запроса. Другие считают любой статус ответа кроме 200 ошибкой. А как насчет прерывания запроса до его окончания?

Разбираемся в теме: https://medium.com/@tlivings/instrumenting-http-requests-in-node-5bf48c10f1c0

#node #http #tools

​​Когда деревья были большими, а смартфоны еще не изобрели, выход в интернет с любого устройства, помимо компьютера был пыткой. Помните, как сложно было пытаться прочитать на маленьком экране Моторолы или Нокиа хоть что-то, кроме названия сайта?
Но время идёт, и сейчас любая компания имеет сайт mobile-friendly, чтобы пользователю было удобно читать новости, делать покупки, используя только смартфон.

Спасибо за это стоит сказать frontend-разработчикам, придумавшим адаптивную вёрстку, которая подстраивается под экран телефона. Фронтенды вообще молодцы ー пользу приносят, да и зарплаты у них хорошие… Хочешь так же? SkillFactory предлагает стать фронтенд-разработчиком с нуля за 6 месяцев. Теоретические блоки по HTML и CSS, JavaScript и видам вёрстки чередуются с практическими заданиями в специальном тренажёре.
Курс рассчитан на новичков в разработке и на тех, кто хочет повысить свой скилл во фронтенде. В свою очередь, команда наставников и персональный ментор всегда придут на помощь.

🤩Подписчикам канала "Библиотека фронтендера" дарим спец.скидку –40% до 10 июня! Успейте записаться на курс по промокоду JUNE40: https://clc.to/C27YZQ

P.S. Просто шепните промо на ушко менеджеру, и он активируется😉

​Интересное использование псевдоэлементов :before и :after

Псевдоэлементы в CSS существенно расширяют возможности стилизации, превращая один элемент в целых три.
Статья рассказывает о простых и сложных кейсах их использования:

👉 добавление иконок
👉 кавычки для цитат
👉 создание форм и фигур
👉 вывод значений атрибутов
👉 сложная анимация

Подробнее: https://zendev.com/2019/03/28/cool-uses-of-before-after-pseudoelements.html

#css

​Микробраузеры повсюду

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

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

Читать: https://24ways.org/2019/microbrowsers-are-everywhere/

#browser #seo

​Правильный ответ: 160px

Если величина паддинга задана в процентах, она рассчитывается от *ширины* родительского блока, которая равна 320px.

Описание свойства на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

Понимание относительных единиц измерения в CSS часто становится проблемой для верстальщиков. Однако в условиях современного веба они очень важны.

Не забываем про зум и пользовательские настройки при тестировании страницы: https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/

#css #responsive

Node.js в действии

Вы узнаете о системах построения интерфейса
и популярных веб-фреймворках Node, а также научитесь строить веб-приложения на базе Express
с нуля. Теперь вы сможете узнать не только о Node и JavaScript, но и получить всю информацию,
включая системы построения фронтэнда, выбор веб-фреймворка, работу с базами данных в Node,
тестирование и развертывание веб-приложений.
Технология Node все чаще используется в сочетании с инструментами командной строки и настольными приложениями на базе Electron, поэтому в книгу были включены главы, посвященные
обеим областям.

Авторы: А. Янг, Б. Мек, М. Кантелон
Год издания: 2018

#books #node

Оптимизация SVG для веба

Подробное руководство по оптимизации векторной графики, из которого вы узнаете, что можно удалить из SVG-файла, чтобы он занимал меньше места.

Читать: https://css-irl.info/optimising-svgs-for-the-web/

#svg #performance

​Создание HTML5 игр с помощь Phaser 3 и JavaScript

Плейлист из 11 видео, посвященный созданию небольших игр на JS-фреймворке Phaser 3.

Что входит в курс:

- установка редактора и его изучение
- работа со спрайтами
- реализация основных игровых механик: движение, анимация, взаимодействие объектов
- структурирование проекта, архитектура игры
- подсчет очков

Смотреть: https://www.youtube.com/playlist?list=PLNtbY2SklBywbsC50hNS7IFn5iurwX7l3

#video #gamedev #frameworks #phaser

​Введение в Web Vitals: новые метрики от Google

Основываясь на опыте миллионов сайтов, Google представляет новую инициативу по оценке пользовательского опыта - Web Vitals - которая включает в себя три важные метрики:

👉 LCP (Largest Contenful Paint) - отрисовка самой большой части видимого контента - позволяет измерить воспринимаемую скорость загрузки.
👉 FID (First Input Delay) - задержка первого ввода - оценивает опыт взаимодействия со страницей
👉 CLS (Cumulative Layout Shift) - характеризует стабильность макета при загрузке

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

Подробнее в Chromium Blog: https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html

​front-end vs back-end vs client-side vs server-side

Статья будет полезна новичкам, которые еще плохо ориентируются в структуре современного веба и с трудом отличают frontend от backend. На понятных примерах описывается, чем занимается сервер, а чем клиент, и в чем разница между клиентским и серверным рендерингом.

Читать: https://chunksofco.de/front-end-vs-back-end-vs-client-side-vs-server-side-7a04b3ec8764

#beginners #frontend #backend