Множество способов выбрать n-й символ из строки в JavaScript.
Есть что добавить?
#javascript #tip by Christian Heilmann
Есть что добавить?
#javascript #tip by Christian Heilmann
Советы по оптимизации сборки веб-приложений
Автор статьи разделяет полный цикл сборки на четыре основных составляющих, о которых и пойдет речь под катом:
1️⃣ Установка зависимостей (время исполнения команды npm ci)
2️⃣ Статический анализ кода (время линтинга JS и CSS)
3️⃣ Запуск и успешное прохождение юнит-тестов (с помощью инструмента Jest)
4️⃣ Непосредственно этап сборки (на примере webpack)
Автор статьи разделяет полный цикл сборки на четыре основных составляющих, о которых и пойдет речь под катом:
1️⃣ Установка зависимостей (время исполнения команды npm ci)
2️⃣ Статический анализ кода (время линтинга JS и CSS)
3️⃣ Запуск и успешное прохождение юнит-тестов (с помощью инструмента Jest)
4️⃣ Непосредственно этап сборки (на примере webpack)
Хабр
Оптимизация сборки веб-приложения
По мере того, как ваше приложение растёт и развивается, растут и затраты времени на его тестирование и сборку, достигая нескольких минут при пересборке в dev-режиме и, возможно, десятков минут при...
373. Chrome DevTools, Firefox 114, Apple Web Apps, Safari 17, Figma…
Веб-стандарты
🎙️Подкаст «Веб-стандарты»: Андрей Мелихов, Алексей Симоненко, Никита Дубко про Chrome DevTools, Firefox 114, Apple Web Apps, Safari 17, Figma, ESM или CJS и Sass в браузере.
00:01:46 Chrome DevTools
00:19:54 Firefox 114
00:28:27 Apple Web Apps
00:53:22 Новинки Safari 17
01:11:44 Apple в Figma
01:18:00 ESM или CJS
01:28:58 Sass в браузере
01:35:07 Ответы на вопросы
🔗 Слушайте на Ютубе
🔗 Ссылки на сайте
#podcast
00:01:46 Chrome DevTools
00:19:54 Firefox 114
00:28:27 Apple Web Apps
00:53:22 Новинки Safari 17
01:11:44 Apple в Figma
01:18:00 ESM или CJS
01:28:58 Sass в браузере
01:35:07 Ответы на вопросы
🔗 Слушайте на Ютубе
🔗 Ссылки на сайте
#podcast
Современный CSS в реальной жизни: 5 новых аспектов CSS, которые действительно важны для реальной разработки
Это — адаптированная текстовая расшифровка недавнего выступления Криса Койера на RenderATL, в которую вложено много труда. Вы должны это увидеть:
✔️ Logical Properties & Layout
✔️ Container Queries & Units
✔️ Cascade Layers
✔️ New Colors
✔️ View Transitions
Читать
Это — адаптированная текстовая расшифровка недавнего выступления Криса Койера на RenderATL, в которую вложено много труда. Вы должны это увидеть:
✔️ Logical Properties & Layout
✔️ Container Queries & Units
✔️ Cascade Layers
✔️ New Colors
✔️ View Transitions
Читать
Chris Coyier
Modern CSS in Real Life
Hey! Chris Coyier here. This is a blog-itized version of a presentation I created. It started life as a Keynote file which I presented in person at RenderATL in June of 2023. I put a lot of work in…
Фронтенд-разработчик Stefano Magni в ходе своей карьеры сталкивался с двумя очень большими кодовыми базами на основе React и TypeScript, из которых извлек много опыта. Речь идет про WorkWave RouteManager и Hasura Console.
Читайте подробнее, если хотите узнать о вещах, которые обычно не представляют больших трудностей при работе с небольшими кодовыми базами, но становятся источником больших проблем при масштабировании приложения.
Читайте подробнее, если хотите узнать о вещах, которые обычно не представляют больших трудностей при работе с небольшими кодовыми базами, но становятся источником больших проблем при масштабировании приложения.
DEV Community
Some things I learnt from working on big frontend codebases
Until now (May 2024), I had three experiences working on very big front-end (React+TypeScript)...
This media is not supported in your browser
VIEW IN TELEGRAM
Простой совет по использованию CSS для реализации более доступного выпадающего меню.
#css #tip by Shripal Soni
#css #tip by Shripal Soni
ESLint Plugin Perfectionist — плагин ESLint, который устанавливает правила форматирования вашего кода и делает его согласованным.
Он определяет правила сортировки различных данных, включая objects, imports, TypeScript types, enums, JSX props и т. д. Инструмент активно поддерживается — на прошлой неделе был выпущен стабильный релиз v1.0.0.
Он определяет правила сортировки различных данных, включая objects, imports, TypeScript types, enums, JSX props и т. д. Инструмент активно поддерживается — на прошлой неделе был выпущен стабильный релиз v1.0.0.
❌ 6 типичных ошибок, которые допускают программисты при составлении резюме
Рассказываем, что не так с резюме большинства программистов и как сделать так, чтобы работодатель обратил на вас внимание.
🔗 Основной сайт
🔗 Зеркало
Рассказываем, что не так с резюме большинства программистов и как сделать так, чтобы работодатель обратил на вас внимание.
🔗 Основной сайт
🔗 Зеркало
Надежный способ проверить, является ли значение массивом или нет: на заметку фронтендеру.
#javascript #tip by Shripal Soni
#javascript #tip by Shripal Soni
Максим Смирнов, фронтенд-архитектор в Тинькофф, делится опытом миграции одного из монолитных сервисов на Federation
В первой части Максим рассказывает о том, как пришли к распилу, во второй — что подтолкнуло к микрофронтам, в третьей — про фолбэки.
В первой части Максим рассказывает о том, как пришли к распилу, во второй — что подтолкнуло к микрофронтам, в третьей — про фолбэки.
Хабр
История о том, как мы на Module Federation съезжали. Часть 1
Всем привет! На связи Максим Смирнов, архитектор по фронтенду в Тинькофф. В серии статей будет история о том, как мы переписывали один из монолитных сервисов...
Каких материалов вам не хватает на канале? (вариантов может быть очень много, но пока ограничимся этими)
Anonymous Poll
33%
Инструменты для фронтенд-разработки
20%
HTML/CSS
38%
Советы по работе с JavaScript
13%
Angular
24%
Vue
43%
React
7%
Svelte
27%
Node.js
16%
Веб-дизайн
3%
Свой вариант (напишу в комментариях)
🔧 Chrome for Testing — новая версия Chrome, специально предназначенная для тестирования веб-приложений и автоматизации.
Узнайте, почему команда Chrome сочла это необходимым на конкретных примеры, в которых Chrome for Testing может быть полезен вам как разработчику.
Читать
Узнайте, почему команда Chrome сочла это необходимым на конкретных примеры, в которых Chrome for Testing может быть полезен вам как разработчику.
Читать
Chrome for Developers
Chrome for Testing: reliable downloads for browser automation | Blog | Chrome for Developers
Chrome for Testing is a new Chrome flavor that specifically targets web app testing and automation use cases.
💡11 заповедей Junior-разработчика
В этой статье дадим несколько дельных советов, которые помогут вам избежать распространенных ошибок на старте карьеры.
🔗 Основной сайт
🔗 Зеркало
В этой статье дадим несколько дельных советов, которые помогут вам избежать распространенных ошибок на старте карьеры.
🔗 Основной сайт
🔗 Зеркало
Million.js — ориентированная на производительность замена VDOM для React
Начавшаяся два года назад как небольшая, не зависящая от библиотек реализация виртуального DOM, Million сейчас — это библиотека, которая ускоряет работу компонентов React до 70 %.
Начавшаяся два года назад как небольшая, не зависящая от библиотек реализация виртуального DOM, Million сейчас — это библиотека, которая ускоряет работу компонентов React до 70 %.
Мини-курс по созданию 3D-анимации с помощью React: от настройки до деплоя на Netlify
Вы научитесь использовать WebGi (на базе Three.js) и GSAP для создания крутых 3D-эффектов.
Вы научитесь использовать WebGi (на базе Three.js) и GSAP для создания крутых 3D-эффектов.
Александр Бухтатый, фронтенд-разработчик в Тинькофф, делится одним из способов работы с формами в Angular-проектах, который упрощает создание новых форм и изолирует зависимость от внешней UI-библиотеки.
Читать
Читать
Хабр
Работа с формами в Angular — модуль работы с формами и обертки полей
Всем привет! Я Александр Бухтатый, frontend-разработчик в Тинькофф, специализируюсь на Angular. Наша команда работает в монорепозитории с четырьмя проектами. В каждом проекте много форм, нужно...
Проблема с отключенными кнопками и что делать вместо них
Adam Silver считает, что атрибут disabled в кнопках вредит UX. И вот почему:
➖Они не дают обратной связи
➖Из-за них интерфейс кажется сломанным
➖Их трудно увидеть
➖На них нельзя сфокусироваться
➖Они вводят в заблуждение
➖Пользователи могут не заметить, что кнопка становится активной
📌 Что делать вместо этого?
1️⃣Напишите четкую метку и текст подсказки, чтобы пользователи поняли вопрос
2️⃣Начните с одной формы ввода на странице, чтобы уменьшить когнитивную нагрузку
3️⃣Включите кнопку, чтобы пользователи всегда получали обратную связь
4️⃣Прощайте тривиальные ошибки
5️⃣Дайте четкие сообщения об ошибках, чтобы помочь пользователям решить проблему
#ux #tip
Adam Silver считает, что атрибут disabled в кнопках вредит UX. И вот почему:
➖Они не дают обратной связи
➖Из-за них интерфейс кажется сломанным
➖Их трудно увидеть
➖На них нельзя сфокусироваться
➖Они вводят в заблуждение
➖Пользователи могут не заметить, что кнопка становится активной
📌 Что делать вместо этого?
1️⃣Напишите четкую метку и текст подсказки, чтобы пользователи поняли вопрос
2️⃣Начните с одной формы ввода на странице, чтобы уменьшить когнитивную нагрузку
3️⃣Включите кнопку, чтобы пользователи всегда получали обратную связь
4️⃣Прощайте тривиальные ошибки
5️⃣Дайте четкие сообщения об ошибках, чтобы помочь пользователям решить проблему
#ux #tip
Adamsilver.io
The problem with disabled buttons and what to do instead
Adam Silver – interaction designer - London, UK
🎙️С момента анонса подкаста «Про код» от HTML Academy у ребят вышло еще два выпуска:
🔗 010. Случайности не случайны, а цвета не цвета
🔗 011. 20 лет вникуда, ужасы ch и TS 5.1
#podcast
🔗 010. Случайности не случайны, а цвета не цвета
🔗 011. 20 лет вникуда, ужасы ch и TS 5.1
#podcast
Telegram
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
🎙️У HTML Academy есть подкаст «Про код», в котором Коля Шабалин, Игорь Антонов, Лёша Симоненко и Женя Шкляр разбираются в самых интересных новостях из мира веб-разработки и объясняют их простым языком.
Слушайте, чтобы узнать, зачем и кому нужны новые фреймворки…
Слушайте, чтобы узнать, зачем и кому нужны новые фреймворки…
🧒👾Тест-игра на выживание #2: как джуну получить повышение
Прошло какое-то время, вы возмужали и теперь думаете о повышении. Но с чего начать восхождение к вершине и как продвинуться набравшемуся опыта джуну по карьерной лестнице! Знаете, что делать дальше? Проверьте свои шансы на успех и пройдите вторую часть квеста.
🔗 Пройти тест
Прошло какое-то время, вы возмужали и теперь думаете о повышении. Но с чего начать восхождение к вершине и как продвинуться набравшемуся опыта джуну по карьерной лестнице! Знаете, что делать дальше? Проверьте свои шансы на успех и пройдите вторую часть квеста.
🔗 Пройти тест
Ну что ж, друзья, команда Stack Overflow опубликовала результаты опроса разработчиков за 2023 год. Пришло время подводить итоги. Итак, самые популярные:
🔝Языки программирования, сценариев и разметки: JavaScript, HTML/CSS и SQL. Python хоть и обогнал SQL как третий наиболее часто используемый язык, но занял первое место для тех, кто не является профессиональным разработчиком или не учится программировать.
🔝Веб-фреймворки и технологии: Node.js и React.js.
🔝Базы данных: PostgreSQL и MySQL.
🔝IDE/редакторы кода: Visual Studio Code.
🔝Инструменты: Docker.
И кстати, в этот раз отличился Phoenix как самый популярный веб-фреймворк, с которым разработчики больше всего захотят работать в следующем году, в отличие от React, Node.js и Next.js.
🔝Языки программирования, сценариев и разметки: JavaScript, HTML/CSS и SQL. Python хоть и обогнал SQL как третий наиболее часто используемый язык, но занял первое место для тех, кто не является профессиональным разработчиком или не учится программировать.
🔝Веб-фреймворки и технологии: Node.js и React.js.
🔝Базы данных: PostgreSQL и MySQL.
🔝IDE/редакторы кода: Visual Studio Code.
🔝Инструменты: Docker.
И кстати, в этот раз отличился Phoenix как самый популярный веб-фреймворк, с которым разработчики больше всего захотят работать в следующем году, в отличие от React, Node.js и Next.js.