Ближе всего к пользователю окажется блок green2

Свойство z-index применяется только к элементам с позиционированием, отличным от static, поэтому green1 сразу выбывает из гонки - это обычный блок в потоке.

Z-index работает в текущем контексте наложения. red1, blue1 и green2 находятся в одном контексте - корневом, так что green2 с индексом 2 оказывается выше всех.

Блок red2 находится в контексте блока red1, а блок blue2 - в контексте блока blue1, которые по z-оси ниже, чем green2.

Подробнее о свойстве z-index: https://www.cat-in-web.ru/z-index-v-css-sozdanie-sloev-i-osobennosti-raboty/

#css

Методы консоли, о которых вы опять забыли

Метод console.log() - краеугольный камень JS-разработки, это неоспоримо. Но мы прекрасно знаем, что консоль способна на большее. Давайте в очередной раз вспомним, на что именно.

❌ console.error()

Выделенное красным фоном сообщение об ошибке со стеком вызовов, который к ней привел.

⚠️ console.warn()

Выделенное желтым фоном предупреждение со стеком вызовов.

✅ console.assert()

Проверка значения на истинность/ложность. В случае неверного утверждения возвращает Assertion failed и выводит сообщение об ошибке.

💯 console.count(), console.countReset()

Установка, увеличение и очистка счетчика с определенным именем.

📂 console.group(), console.groupEnd()

Группировка сообщений в блоки с заголовками, которые можно свернуть/развернуть.

🗒 console.table()

Красивое и понятное представление объектов и массивов.

⏳ console.time(), console.timeEnd()

Простой способ измерить время выполнения кода.

Источник: https://webdevblog.ru/vyhod-za-predely-console-log-8-console-metodov-kotorye-sleduet-ispolzovat-pri-otladke-javascript-i-node/

#api #javascript #console

Как работает JavaScript

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

Статья рассказывает о принципиальной схеме самого популярного движка JavaScript - V8, а также немного о сути интерпретации и компиляции кода и о JIT-компиляции.

Вкратце:
1. Парсер разбирает код на значимые части.
2. Строится абстрактное синтаксическое дерево (AST).
3. Интерпретатор создает байт-код, который сразу же начинает выполняться в браузере, чтобы пользователь не ждал.
4. Одновременно профайлер и компилятор работают над оптимизацией кода.
5. Как только готова оптимизированная версия, она заменяет временный байт-код.

Подробнее: https://nuancesprog.ru/p/4553/

#javascript #v8 #engine #browser

Переполнение и потери данных в CSS и как этого избежать

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

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

- flexbox-моделью
- grid-функциями вроде minmax()
- значением min-content
- ключевыми словами safe и unsafe

Читать: https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/

#css

Оптимизация вашего SPA для Google Search

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

Ссылка: https://codelabs.developers.google.com/codelabs/making-a-single-page-app-search-friendly/#0

#seo

JavaScript Canvas

Плейлист из 9 уроков, посвященный основам работы с HTML5 Canvas. Синтаксис старый, но концепции и методы все те же :)

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

#video #canvas

Цвета, текстуры, градиенты

Несколько полезных сервисов для подбора цветов и текстур и экспериментов:

- https://cloudflare.design/color
составление палитры цветов

- https://patternizer.com/xka7
генерация собственного паттерна из полосок разных цветов

- https://flatuicolors.com/
готовые палитры в стиле flat design от дизайнеров со всего мира

- https://www.css-gradient.com/
генератор css-градиентов

- https://www.toptal.com/designers/subtlepatterns/
коллекция бесшовных паттернов

- http://evankarageorgos.github.io/hue/grid.html
коллекция градиентов HUE.CSS

#assets #tools

@Hiddengurus — хороший канал, в котором размещаются свежие вакансии на удаленку для IT и Digital гуру! Хочешь удалённо работать в крутых проектах из США, Европы, РФ и Латинской Америки? Тогда в @Hiddengurus ты найдешь подходящую именно для тебя вакансию на удалёнке:)

🔝 Топовый Вечный! По смехотворной цене! 🔝

8 ГБ RAM / 4x4.5 ГГц CPU / 80 ГБ NVMe / 500 Мбит/сек / anti-DDoS

Размещение в лучшем московском дата-центре Datapro, подключение к каналу 500 Мбит/сек, выделенный IPv4 адрес, защита от DDoS.

🔥Спешите узнать подробней и заказать
https://proglib.io/w/4d8c197b

​Правильный ответ: 2 1
Когда будет закончено чтение файла и цикл событий вызовет его коллбэк, он перейдет в фазу проверки, где обнаружит коллбэк метода setImmediate. Лишь после его выполнения цикл перейдет в новую итерацию и выполнит коллбэк, зарегистрированный методом setTimeout.

Подробнее о цикле событий в Node.js: https://proglib.io/p/cikl-sobytiy-kak-vypolnyaetsya-asinhronnyy-javascript-kod-v-node-js-2020-02-26

#node #eventloop #advanced

📈 Растёт число безработных, экономисты пророчат масштабный финансовый кризис. Но кое-кто становится даже сильнее. 💪 Так, Netflix отчитались об увеличении аудитории на 15,8 млн человек. Секрет успеха не только в стриминге – компания превосходно управляет своими данными.

📢 О тонкостях работы с крупными инфраструктурами, облачными решениями и свежими технологиями увлекательно повествует канал @SelectelNews, структурируя опыт в виде общедоступной базы знаний📕. Ещё там регулярно проводятся конкурсы, публикуются вакансии и прочие бонусы. Одним словом – рекомендуем: t.me/SelectelNews

​Реализация быстрой сортировки на JavaScript

Пишем классический алгоритм эффективной сортировки на JavaScript.

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

Подробнее: https://jem-space.ru/riealizatsiia-bystroi-sortirovki-v-javascript/

#javascript #algorithms

Как отлаживать чужой JavaScript код

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

Читать: https://itnext.io/how-i-debug-javascript-code-i-didnt-write-6c405a6a9103

#javascript #debugging

​Руководство по setTimeout: sleep, wait, delay и pause в JavaScript

В JavaScript нет нативного способа поставить выполнение кода на паузу, поэтому давайте реализуем его самостоятельно с помощью старого-доброго setTimeout и свеженького модного async/await.

Читать: https://www.freecodecamp.org/news/javascript-sleep-wait-delay/

#javascript

​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