🕺 Большая шпаргалка по TypeScript — на заметку фронтенд-разработчику

➡️ @tips_frontend

JavaScript: структуры данных и алгоритмы

Серия статей, в которой Игорь Агапов из Timeweb Cloud разбирает структуры данных и алгоритмы, представленные в популярном репозитории:

Часть 1: односвязный и двусвязный список, стек и очередь
Часть 2: хэш-таблица, куча, очередь с приоритетом и префиксное дерево
Часть 3: двоичное дерево поиска, АВЛ-дерево и красно-черное дерево
Часть 4: дерево отрезков, дерево Фенвика, а также граф (направленный и ненаправленный).
Часть 5: система непересекающихся множеств, фильтр Блума и кэш актуальных данных.

➡️ @tips_frontend

Быстрый способ отладки event listeners, который может быть полезен при работе над новым проектом

➡️ @tips_frontend

⚡️ Learn TypeScript — курс от freeCodeCamp, который представляет из себя практическое введение в TypeScript. Вы узнаете, как TypeScript может облегчить вашу жизнь и сделать код менее подверженным ошибкам.

🔤 Таймкоды:

0:00:00 Introduction
0:06:39 Intro to Pizza app
0:16:49 Move code to TS
0:19:58 Defensive coding
0:24:36 Obligatory types basics lesson
0:28:29 Add type to orderId
0:29:55 Defining Custom Types
0:33:44 Adding a Pizza type
0:38:00 Nested object types
0:43:15 Optional properties
0:45:58 Adding an Order type
0:47:20 Typing arrays
0:52:00 Type orderQueue
0:56:13 Literal types
0:58:57 Unions
1:01:57 Update order status to use literal type unions
1:04:59 Add ids to pizzas
1:07:41 Type Narrowing
1:12:39 Be explicit whenever you can
1:14:54 Function return types
1:17:53 TS-specific types: any
1:20:48 Add return type to getPizzaDetail
1:24:11 Void return type
1:26:09 Add automatic ids to menu items
1:30:31 Utility Types & Partial
1:37:39 Omit Utility Type
1:44:42 Fix TS warnings with Omit
1:48:53 Generics
1:56:17 Generic functions in the pizza restaurant
1:59:43 Explicitly type generic function calls
2:04:08 Conclusion... for now

📱 Смотреть полностью

➡️ @tips_frontend

👩‍💻 Виртуальная DOM в 200 строк JavaScript-кода: на заметку фронтенд-разработчику

Разработка механизма, используемого под капотом React и других UI-библиотек.

😈 Читать гайд

➡️ @tips_frontend

👩‍💻 Руководство по анализу производительности JavaScript с использованием Chrome DevTools

Автор и его коллега исследовали производительность библиотеки fabric.js. Они смогли значительно улучшить производительность с 13 FPS до почти 50 FPS всего за два часа, используя вкладку Performance в Chrome DevTools для измерения и оптимизации времени выполнения JavaScript. Под катом — своего рода дополнение к руководству Analyze runtime performance от Google.

👉 Читать

➡️ @tips_frontend

40 незаменимых API для разработчиков

Разработчики постоянно ищут способы оптимизировать свою работу. Мы собрали 40 API, которые помогут вам сэкономить время, повысить эффективность и добавить новые функции в ваши проекты.

😈 Читать статью

➡️ @tips_frontend

👩‍💻 TypeHero — онлайн-платформа для общения, взаимодействия и развивития вместе с сообществом разработчиков TypeScript.

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

👉 Перейти к платформе

➡️ @tips_frontend

👩‍💻 Exploring JS: книги по JavaScript для разработчиков

Вы наверняка знаете Dr. Axel по его замечательным записям в блоге на протяжении многих лет, но у него также есть впечатляющая коллекция книг, которые вы можете прочитать бесплатно, включая недавно обновленные Exploring JavaScript (ES2024 Edition), Deep JavaScript и Tackling TypeScript.

➡️ @tips_frontend

Магия clip-path в CSS

clip-path часто используется для обрезки узла DOM в определенные формы, например, треугольники. Но что, если использовать его для анимации?

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

👉 Читать

➡️ @tips_frontend

Полное руководство по Web Push API

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

Под катом — пошаговое руководство по реализации push-уведомлений. Приложение из гайда разработано с использованием remix + service workers + web-push + API showNotification для регистрации service workers.

😈 Архитектура включает:

⚡️ Settings route
⚡️ Subscription route
⚡️ Push-сервер
⚡️ Service Worker
⚡️Client Utilities

🔤 Читать

➡️ @tips_frontend

Недооцененные возможности CSS grid: подробное руководство с множеством интерактивных демонстраций

Свежий взгляд на CSS grid template areas и на то, как сегодня использовать весь их потенциал.

👉 Читать

➡️ @tips_frontend

Set в JavaScript: теперь с новыми суперспособностями

Узнайте о грядущих обновлениях Set в JavaScript, включая новые методы union, intersection, difference и другие. Подробный обзор и примеры использования.

😒 Читать статью

➡️ @tips_frontend

Простой способ отслеживания текущего сфокусированного элемента на веб-странице: на заметку фронтенд-разработчику

➡️ @tips_frontend

🔫 VS Code на стероидах: 15 полезных расширений для фронтендера

Мы отобрали 15 плагинов, которые покрывают все аспекты современной веб-разработки: от работы с HTML до интеграции с Figma и Docker.

⛓ Читать статью

➡️ @tips_frontend