​Правильный ответ: 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

​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 года.