Как работает 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

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

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

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

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

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

#html #inputmode #interface