Кто есть кто: Обратные вызовы, промисы и асинхронные функции

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

Что это вообще такое? В каких случаях используются? Как работают? Каков их внутренний механизм? В этой статье вы раз и навсегда разберёте суть этих процессов.

#javascript

SOLID... На котиках

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

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

#solid

Основы программирования на JS для новичков

Небольшой, но полезный курс для тех, кто только начинает вкатываться во фронтенд и JavaScript.

Чтобы вам было проще ориентироваться, мы добавили тайм-коды:

00:00 - зачем и кому нужно это видео?
00:57 - что общего у программистов и поваров?
02:26 - понятие "Алгоритм"
03:46 - понятие "Блок-схема"
05:43 - понятие "Программа"
09:33 - ПРАКТИКА, задание на подумать
12:07 - разбор Мышления Программиста
16:35 - основные элементы мышления программиста
21:57 - Как развить мышление программиста?
26:41 - Создадим блок-схему калькулятора
37:00 - ПРАКТИКА с кодом!
49:10 - пишем калькулятор
1:00:42 - что такое и как работают ФУНКЦИИ?
1:09:00 - Домашнее задание!
1:09:45 - моя реализация домашки
1:15:25 - АНОНС следующего курса по JS!

Нужны ли вам вообще тайм-коды к таким постам? Поставьте ❤, если оставляем формат и 😐, если только мешает.

#курс #javascript

Пишем одностраничное приложение с помощью htmx

JS-библиотеку htmx многие воспринимают как средство, которое спасает интернет от одностраничных приложений. Но автор этой статьи написал с помощью htmx простой список ToDo. После загрузки его страницы взаимодействие с сервером прекращается — всё остальное происходит локально на клиенте.

Как он это сделал? Выполнял серверный код в сервис-воркере. Сможете ли вы также? Конечно, мы вам даже инструкцию принесли:

https://habr.com/ru/companies/ruvds/articles/849854/

#htmx #javascript #html

24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое

Большое видео от freeCodeCamp, где вы узнаете, как сделать 24 различных проекта на CSS.

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

0:00:00 Добро пожаловать в CSS Challenges!
0:03:40 Задача: Цветная кнопка
0:05:45 Решение: Цветная кнопка
0:12:03 Задача: Расширяемая строка поиска
0:14:27 Решение: Расширяемая строка поиска
0:18:22 Задача: Плитка CodePen
0:19:57 Решение: Плитка CodePen
0:25:54 Задача: Анимация загрузки 1
0:27:12 Решение: Анимация загрузки 1
0:30:10 Задание: Анимация загрузки 2
0:31:30 Решение: Анимация загрузки 2
0:34:13 Задание: Мишень для стрельбы из лука
0:35:31 Решение: Мишень для стрельбы из лука
0:38:15 Задание: Карусель слов
0:39:26 Решение: Карусель слов
0:43:18 Задание: Флаг Франции
0:45:47 Решение: Флаг Франции
0:49:34 Задание: Флаг Германии
0:50:39 Решение: Флаг Германии
0:52:42 Задание: Флаг Мадагаскара
0:53:48 Решение: Флаг Мадагаскара
0:58:34 Задание: Флаг Швейцарии
1:00:25 Решение: Флаг Швейцарии
1:04:43 Задание: Флаг Японии
1:05:51 Решение: Флаг Японии
1:08:25 Задание: Флаг Швеции
1:10:31 Решение: Флаг Швеции
1:16:25 Задание: Флаг Нигера
1:18:04 Решение: Флаг Нигера
1:22:12 Задача: Верстка профиля на Github
1:24:51 Решение: Верстка профиля на Github
1:30:17 Задача: Тумблер
1:33:03 Решение: Тумблер
1:39:12 Задача: Туз пик
1:40:08 Решение: Туз пик
1:43:30 Задача: 4 Червы
1:44:29 Решение: 4 червы
1:49:21 Задание: Настраиваемый индикатор прогресса
1:51:34 Решение: Настраиваемый индикатор прогресса
1:54:55 Задание: Переворачивая карточка
1:57:42 Решение: Переворачивая карточка
2:03:02 Задание: Анимация загрузки 3
2:05:03 Решение: Анимация загрузки 3
2:08:14 Задание: Меню Instagram Stories
2:11:22 Решение: Меню Instagram Stories
2:20:26 Задание - Анимированный индикатор прогресса
2:22:43 Решение - анимированный индикатор прогресса
2:26:42 Задача - График коммитов Github
2:29:18 Решение - График коммитов Github
2:33:02 Поздравляю, вы выполнили задания по CSS!

#видео #css

Работаю один: 10 тысяч строк кода без единого ворнинга

Подошёл тимлид:

Watching-you: анимация, которая следит за вами

JS-библиотека «Watching-you» специально создана для анимаций, которые наблюдают за мышью, DOM или просто за вводимыми значениями. Если нужного элемента нет на экране, то анимация автоматически прекращает просмотр. Также библиотека поддерживает несколько фреймворков, поэтому её легко добавить в любой проект.

Почитать подробнее: https://github.com/jj811208/watching-you?ref=reactjsexample.com

Посмотреть интересные примеры: https://jj811208.github.io/watching-you/

#javascript #библиотека

Как добавить видео с прозрачным фоном на веб-сайт

Джейк Арчибальд из Shopify поделился своими наработками по этому вопросу и предложил сразу несколько способов реализации этой возможности.

Все подробности в статье: https://jakearchibald.com/2024/video-with-transparency/

#фронтенд

Стильный переключатель на чистом CSS

Этот свитч сделан с использованием чистых HTML и CSS. Никакого SVG. Посмотреть, как это работает можно на странице проекта:

https://codepen.io/josetxu/pen/NWEPmGz

#html #css #codepen

Более 5 700 бесплатных векторных иконок для ваших проектов

Неважно чем вы занимаетесь — фронтенд, веб-дизайн, мобильная разработка и т.д. — эта коллекция иконок вам точно пригодится.

Все иконки доступны в SVG-формате абсолютно бесплатно. Просто переходите по ссылке и забирайте: https://tabler.io/icons

#инструменты@tproger_web

Более 5 700 бесплатных векторных иконок для ваших проектов

Неважно чем вы занимаетесь — фронтенд, веб-дизайн, мобильная разработка и т.д. — эта коллекция иконок вам точно пригодится.

Все иконки доступны в SVG-формате абсолютно бесплатно. Просто переходите по ссылке и забирайте: https://tabler.io/icons

#инструменты

Почему page.goto() замедляет ваши тесты Playwright

Ваши тесты должны быть стабильными, потому что нет ничего хуже ненадёжного набора тестов. Кроме того, ваши тесты должны быть быстрыми, потому что никто не хочет часами ждать, пока вы получите зелёный свет, чтобы внедрить критически важное исправление. Но знаете ли вы, что выполнение тестов замедляется с помощью самого простого действия в Playwright — page.goto()?

В этой статье вы найдёте примеры и способы ускорить выполнение тестов Playwright, избежав этой проблемы:

https://www.checklyhq.com/blog/why-page-goto-is-slowing-down-your-playwright-test/

#playwright #qa

Ошибки в архитектуре, которые совершали Netflix, Slack, Trello, Airbnb и другие компании

Даже у самого многообещающего стартапа и крупной компании могут встречаться типичные ошибки в архитектуре, которые могут всё разрушить.

Давайте раз и навсегда разберемся, как лучше не делать, и как избегать факапов. В статье собрали 10 самых распространенных: с примерами и способами решения.

Мастхэв к прочтению: https://tprg.ru/0lof

Дизайнеры всё

Парень поделился плагином для Figma, который копирует дизайн любого сайта буквально в пару кликов. Просто отдаёте ему ссылку и получаете готовый дизайн, с которым можно работать как вам захочется.

#инструменты #дизайн #figma

Самые «успешные» хакеры-воровайки использовали Python

Преступная группировка Carbanak, состоящая из хакеров украинской, литовской и других национальностей использовали Cobalt Strike — фреймворк для этичного хакинга на JavaScript + Python. Подробнее о том, как они наворовали более 1 млрд. долларов, можно узнать в новом подкасте Tproger.

Слушать на Яндекс. Музыке
Смотреть на YouTube
Другие способы слушать подкаст

Не скупитесь на лайки на Яндекс. Музыке, этим вы поможете проекту.

@zen_of_python

6 проектов на React.js для начинающих

Если вы только недавно познакомились с React и хотите набить руку, то это видео вам поможет. Здесь автор рассказывает, как сделать 6 различных проектов:

00:04:09 Счётчик
00:10:13 Модальное окно
00:22:35 Quiz (опросник)
00:37:22 Список пользователей
01:07:36 Конвертер валют
01:34:18 Коллекция фотографий

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

#видео #react #начинающим

JavaScript-разработчик набирает npm install:

Типизированные CSS переменные с @property

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

В этой статье разобрались когда и почему традиционные резервные значения могут не сработать и как функции @property позволяют нам писать более безопасные и устойчивые определения пользовательских свойств CSS.

#css

10 рекомендаций по повышению производительности от экспертов JS React

Прокачайте навыки разработки на React рекомендациями по повышению производительности в JavaScript. Здесь вы узнаете, как оптимизировать код и повысить эффективность приложений React. Освоив эти приемы, вы сможете выделиться в конкурентном мире веб-разработки.

#react #советы