Практическое руководство по TypeScript

Создайте собственный покедекс на HTML, CSS и TypeScript!

Подробнее: https://www.freecodecamp.org/news/a-practical-guide-to-typescript-how-to-build-a-pokedex-app-using-html-css-and-typescript/

#typescript #beginners

​Лучшие практики управления кэшем

Кэширование данных на сайте позволяет уменьшить время его загрузки и снизить количество запросов к серверу. Но его еще нужно правильно настроить.

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

Etag (Entity tag)

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

Last Modified

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

Cache-Control max-age

Указывает браузеру, как долго нужно хранить файл в кеше после загрузки. При этом совсем нет запросов к серверу, но есть риск использования устаревшей версии файла. Чтобы решить эту проблему используются хеши в именах файлах.

Cache-Control no-cache

Если использовать директиву max-age к HTML-файлам, браузер просто не получит ссылки на обновленные скрипты и файлы стилей. Поэтому для них следует использовать политику no-cache, которая отлично сочетается с Etag.

Подробнее: https://medium.com/pixelpoint/best-practices-for-cache-control-settings-for-your-website-ff262b38c5a2

#cache #browser #performance

Чейнинг стилей а-ля jQuery с помощью Proxy

Библиотека jQuery предоставляет очень удобную возможность чейнинга методов для одного элемента:

$(selector)
    .css('color', '#fff')
    .data('mode', 'light')
    .fadeIn()

Ванильный DOM API по сравнению с этим выглядит очень громоздко, но мы можем прокачать его с помощью JavaScript Proxy.

Статья рассказывает, как работает Proxy - перехватывает обращения к методам и свойствам объекта - и как, используя эту функциональность, оптимизировать работу со стилями элемента.

style(selector)
    .color('#fff')
    .backgroundColor('#000')
    .opacity(1)

Вкратце

Проксируем доступ к объекту element.style, перехватываем все обращения к css-свойствам, делаем нужные операции со стилями и возвращаем новый Proxy.

Подробнее: https://tobiasahlin.com/blog/chaining-styles-with-proxy/

#javascript #proxy #advanced

‼️ Уточнение к условию задачи:
Блоки вложены друг в друга. Red2 вложен в Red1, Blue3 в Blue2, Blue2 в Blue1, Green2 - в Green1.

Ближе всего к пользователю окажется блок 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