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

​Redux против React Context. Что выбрать?

Современный React может предложить достойную нативную замену Redux - контекст + хук useReducer. Статья рассказывает, как работает эта связка на примере создания небольшого демо-приложения.

Читать: https://dev.to/ibrahima92/redux-vs-react-context-which-one-should-you-choose-2hhh

#react #redux #frameworks

​​print(f"Hello, {username}")

Мы во ВКонтакте проводим конкурс для самых креативных из вас на лучший мем для статьи с нашего сайта. Правила простые:

1. Вы берете произвольную статью с сайта, не утратившую свою актуальность
2. Делаете для нее мем.
3. Отправляете в предложенные новости ссылку и вашу картинку
4. Мы оформляем и публикуем.

Автор картинки с публикацией с наибольшим охватом среди всех нам отправленных получит 10 тысяч рублей. Поехали: https://vk.com/proglib

Срок окончания конкурса — 7 июля 2020 года.

​Правильный ответ: Компоновщик

Паттерн Компоновщик (Composite) позволяет работать с наборами элементов как будто это отдельные элементы. Например, с коллекцией DOM-узлов как с одним узлом.

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

Узнать больше о паттерне Компоновщик в JavaScript: https://nuancesprog.ru/p/6282/

#designpatterns #bestpractices

​​Собрали все самое актуальное по Front-End в одной online программе с наставником, чтобы ты не терял время, а быстрее устроился на работу в IT. У нас ты изучишь востребованный стек технологий и получишь опыт коммерческой разработки в проекте. Оплата только после трудоустройства. А если не найдешь работу, то обучение за наш счет.

Пройти тестовое задание 🙋‍♂️👉 https://clck.ru/Nstpn

👇Что тебя ждет:
1. Подготовка с личным ментором online по индивидуальной программе за 7 месяцев;
2. Жесткий контроль знаний на каждом этапе
3. Обучение востребованному на рынке стеку технологий: HTML/CSS/JS, React + Redux;
4. Отработка знаний в настоящем бизнес проекте, который дает опыт и строчку для резюме;
5. Общение с одногруппниками и студентами-разработчиками других потоков групповом чате slack (уже более 1500 участников)
6. Быстрое карьерное и финансовое развитие за счет программы поддержки на 2 года: митапы, мастер-классы, закрытые лекции со спикерами и offline интенсивы;
7. Гарантированное трудоустройство и первая зарплата от 100 000 рублей.

Требования к кандидату:
• Обучение минимум 25 часов в неделю
• Проживание или готовность к переезду в Москву для трудоустройства

​Прогрессивные веб-приложения в 2020

Большой обзор современного состояния PWA на разных платформах, реализованные возможности и ожидания.

Читать: https://habr.com/ru/post/482772/

#pwa

Канал без флуда и огромного количества надоевших мемов. Ребята из «ИТ-ГРАД» публикуют только полезные материалы:
🌩 Что нового в VMware Cloud Director 10.1
🌩 Шифровальщик нападает на госсектор и медицинские учреждения
🌩 В Австралии зафиксирована рекордно высокая скорость интернета
🌩 Как стать картошкой в Zoom или Skype
🌩 Чипирование: пока одни только обещают, другие делают

Присоединяйтесь, если вам близки технологии, их история и развитие, и регулярно получайте полезные материалы от команды облачного провайдера → https://yangx.top/iaasblog

​Веб-платформа: большое руководство

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

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

Читать обязательно: https://wpc.guide/

#web #browser