📈Опубликованы результаты Octoverse 2023
📌Тезисно о тенденциях ежегодного опроса от GitHub, которые касаются фронтенд-разработчика:
🔝JavaScript снова занял первое место среди самых популярных языков
☝️Популярность TypeScript растёт. В этом году язык впервые обогнал Java как третий по популярности язык среди проектов OSS на GitHub с ростом пользовательской базы на 37%
📌Другие тенденции:
◆ Разработчики все больше экспериментируют с базовыми ИИ-моделями
◆ Использование облачных приложений и технологий с каждым годом растет
◆ В 2023 году зарегистрировано наибольшее количество разработчиков, впервые внёсших вклад в открытый исходный код
◆ И многое другое
👉 Читать отчет
📌Тезисно о тенденциях ежегодного опроса от GitHub, которые касаются фронтенд-разработчика:
🔝JavaScript снова занял первое место среди самых популярных языков
☝️Популярность TypeScript растёт. В этом году язык впервые обогнал Java как третий по популярности язык среди проектов OSS на GitHub с ростом пользовательской базы на 37%
📌Другие тенденции:
◆ Разработчики все больше экспериментируют с базовыми ИИ-моделями
◆ Использование облачных приложений и технологий с каждым годом растет
◆ В 2023 году зарегистрировано наибольшее количество разработчиков, впервые внёсших вклад в открытый исходный код
◆ И многое другое
👉 Читать отчет
🧑💻 Статьи для IT: как объяснять и распространять значимые идеи
Напоминаем, что у нас есть бесплатный курс для всех, кто хочет научиться интересно писать — о программировании и в целом.
Что: семь модулей, посвященных написанию, редактированию, иллюстрированию и распространению публикаций.
Для кого: для авторов, копирайтеров и просто программистов, которые хотят научиться интересно рассказывать о своих проектах.
👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.
Напоминаем, что у нас есть бесплатный курс для всех, кто хочет научиться интересно писать — о программировании и в целом.
Что: семь модулей, посвященных написанию, редактированию, иллюстрированию и распространению публикаций.
Для кого: для авторов, копирайтеров и просто программистов, которые хотят научиться интересно рассказывать о своих проектах.
👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.
👀 6 способов привлечь внимание работодателя
Как рассказать, что вы умеете программировать и хотите получать за это деньги, не говоря об этом напрямую:
1️⃣ Оформить профиль на Линкедин, Гитхаб и Стековерфлоу
2️⃣ Участвовать в хакатонах
3️⃣ Начать вести свой блог об IT
4️⃣ Стать участником конференций от IT-гигантов
5️⃣ Создать канал на YouTube и рассказывайте об IT
6️⃣ Написать в личку
👉 Подробнее о каждом пункте читайте в статье
Как рассказать, что вы умеете программировать и хотите получать за это деньги, не говоря об этом напрямую:
1️⃣ Оформить профиль на Линкедин, Гитхаб и Стековерфлоу
2️⃣ Участвовать в хакатонах
3️⃣ Начать вести свой блог об IT
4️⃣ Стать участником конференций от IT-гигантов
5️⃣ Создать канал на YouTube и рассказывайте об IT
6️⃣ Написать в личку
👉 Подробнее о каждом пункте читайте в статье
💬 Какие книги, учебные ресурсы и материалы вам больше всего помогли на старте карьеры во фронтенд-разработке?
🤩 Потом из ваших советов сделаем отдельный пост или статью, которые помогут новичкам в этом нелёгком ремесле под названием «современная фронтенд-разработка»👇
#войтивайти
🤩 Потом из ваших советов сделаем отдельный пост или статью, которые помогут новичкам в этом нелёгком ремесле под названием «современная фронтенд-разработка»👇
#войтивайти
🧰 Внутреннее представление и оптимизации строк в JavaScript-движке V8
С самого рождения JavaScript, в каком-то смысле, был, во многом, языком для манипулирования текстом — от веб-страничек в самом начале, до полноценных компиляторов сейчас. Неудивительно, что в современных JS-движках достаточно много сил уделено оптимизации внутреннего представления строк и операций над ними.
В статье автор рассматривает представление строк в движке V8, демонстрирует их эффект, обогнав C++ в очень честном бенчмарке, а также показывает, в каких случаях они могут, наоборот, привести к проблемам с производительностью, и что в таких случаях можно сделать.
👉 Читать
С самого рождения JavaScript, в каком-то смысле, был, во многом, языком для манипулирования текстом — от веб-страничек в самом начале, до полноценных компиляторов сейчас. Неудивительно, что в современных JS-движках достаточно много сил уделено оптимизации внутреннего представления строк и операций над ними.
В статье автор рассматривает представление строк в движке V8, демонстрирует их эффект, обогнав C++ в очень честном бенчмарке, а также показывает, в каких случаях они могут, наоборот, привести к проблемам с производительностью, и что в таких случаях можно сделать.
👉 Читать
This media is not supported in your browser
VIEW IN TELEGRAM
Вы можете использовать состояние элемента формы и многослойные фоны для создания индикаторов состояния ввода 😎
🤏 Хитрость в том, чтобы накладывать фоны с помощью background-clip, оставляя место для границы. Применение прозрачной границы создает пространство для перехода многослойного фона.
☑️Затем мы можем использовать кастомные свойства, чтобы указать background-position каждого слоя.
☑️По умолчанию слои для валидного и невалидного состояний расположены за пределами ограничивающей рамки. Но когда одно из этих состояний активно, слой фона переходит в позицию
➡️ Поиграть можно здесь
#css #tip by Jhey
input:valid { --valid: 1; }
input {
background: var(--bg) padding-box, ...,
var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 /
100% 100% border-box;
}
🤏 Хитрость в том, чтобы накладывать фоны с помощью background-clip, оставляя место для границы. Применение прозрачной границы создает пространство для перехода многослойного фона.
☑️Затем мы можем использовать кастомные свойства, чтобы указать background-position каждого слоя.
☑️По умолчанию слои для валидного и невалидного состояний расположены за пределами ограничивающей рамки. Но когда одно из этих состояний активно, слой фона переходит в позицию
0 0.@media (prefers-reduced-motion: no-preference) {
input { transition: background-position: 0.5s; }
}
➡️ Поиграть можно здесь
#css #tip by Jhey
Программирование — это не просто работа, это образ жизни и страсть для многих людей. Кто-то находит в кодинге творчество, кто-то — интересные задачи и возможности для саморазвития.
Расскажите, что именно вдохновляет вас писать код и создавать новые программы.
👉Опрос тут👈
Расскажите, что именно вдохновляет вас писать код и создавать новые программы.
👉Опрос тут👈
Судя по всему, для успешных технологических компаний важно иметь собственный шрифт. Vercel последовала этому сценарию и выпустила Geist.
Вскоре после этого появилась команда GitHub Next с целым семейством шрифтов Monaspace. Это новая система типов, которая совершенствует современное состояние отображения кода на экране.
💬 Как вам?
🔥 — огонь
🤔 — да как-то пофиг на шрифт
Вскоре после этого появилась команда GitHub Next с целым семейством шрифтов Monaspace. Это новая система типов, которая совершенствует современное состояние отображения кода на экране.
💬 Как вам?
🔥 — огонь
🤔 — да как-то пофиг на шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
🤔 Нужно ли во фронтенде знать алгоритмы как в бэкенд-разработке?
Юра Михин из Злых марсиан рассказывает, как они (алгоритмы) помогли в разработке плагина Figma Polychrom, чтобы интерфейс работал гладко, не зависая при работе с большими древовидными структурами данных.
Одним словом, ответ на вопрос зависит от многих «если», но их знание и понимание точно не будет лишним для любого фронтендера.
Юра Михин из Злых марсиан рассказывает, как они (алгоритмы) помогли в разработке плагина Figma Polychrom, чтобы интерфейс работал гладко, не зависая при работе с большими древовидными структурами данных.
Одним словом, ответ на вопрос зависит от многих «если», но их знание и понимание точно не будет лишним для любого фронтендера.
🔥 Представлен выпуск TypeScript 5.3
📌 Что нового в релизе:
• Import Attributes
• Stable Support resolution-mode in Import Types
• resolution-mode Supported in All Module Modes
• switch (true) Narrowing
• Narrowing On Comparisons to Booleans
• instanceof Narrowing Through Symbol.hasInstance
• Checks for super Property Accesses on Instance Fields
• Interactive Inlay Hints for Types
• Settings to Prefer type Auto-Imports
• Optimizations by Skipping JSDoc Parsing
• Optimizations by Comparing Non-Normalized Intersections
• Consolidation Between tsserverlibrary.js and typescript.js
• Breaking Changes and Correctness Improvements
#новости #чтопроисходит
📌 Что нового в релизе:
• Import Attributes
• Stable Support resolution-mode in Import Types
• resolution-mode Supported in All Module Modes
• switch (true) Narrowing
• Narrowing On Comparisons to Booleans
• instanceof Narrowing Through Symbol.hasInstance
• Checks for super Property Accesses on Instance Fields
• Interactive Inlay Hints for Types
• Settings to Prefer type Auto-Imports
• Optimizations by Skipping JSDoc Parsing
• Optimizations by Comparing Non-Normalized Intersections
• Consolidation Between tsserverlibrary.js and typescript.js
• Breaking Changes and Correctness Improvements
#новости #чтопроисходит
👨🏫 Promises Training — проект, призванный помочь фронтенд-разработчику углубить свои знания о промисах в Javascript.
Практикуйтесь в работе с промисами с помощью тщательно подобранной коллекции интерактивных задач, каждая из которых сопровождается набором тестов.
Практикуйтесь в работе с промисами с помощью тщательно подобранной коллекции интерактивных задач, каждая из которых сопровождается набором тестов.
npm create promises-training@latest
🤔 Webpack vs esbuild: уже можно использовать в проде?
Фронтенд-архитектор Дмитрий Казаков делится опытом использования
📌 В статье подробно описаны различные аспекты работы с
☑️ Базовые возможности esbuild без плагинов
☑️ Интеграция с Browserslist
☑️ Обработка содержимого файлов и
☑️ CSS Modules и Sass
☑️ Вставка ссылок на ресурсы в HTML-файлы
☑️ Сжатие файлов в gzip/brotli
☑️ Автоматический полифиллинг
☑️ Анализ размера бандлов
☑️ Разбиение кода на чанки
Фронтенд-архитектор Дмитрий Казаков делится опытом использования
esbuild вместо Webpack для коммерческих проектов. 📌 В статье подробно описаны различные аспекты работы с
esbuild, включая:☑️ Базовые возможности esbuild без плагинов
☑️ Интеграция с Browserslist
☑️ Обработка содержимого файлов и
__dirname☑️ CSS Modules и Sass
☑️ Вставка ссылок на ресурсы в HTML-файлы
☑️ Сжатие файлов в gzip/brotli
☑️ Автоматический полифиллинг
☑️ Анализ размера бандлов
☑️ Разбиение кода на чанки
Хабр
Webpack vs esbuild — уже можно использовать в production?
Периодически я пробую разные инструменты, и если они стабильно покрывают все необходимые сценарии - включаю в свою экосистему для коммерческих проектов. С третьего подхода за последние 3 года esbuild,...
15 Killer Websites for Web Developers.pdf
2.5 MB
🤩 15 полезных сайтов, которые упростят вашу работу и не только: подборка для фронтенд-разработчика
✹ Визуализация регулярных выражений JavaScript
✹ Документация для разработчиков: онлайн + офлайн
✹ cdnjs: поиск библиотек с открытым исходным кодом
✹ Фотосток с огромной коллекцией изображений
✹ Интеллектуальное сжатие WebP, PNG и JPEG
✹ Удаление фона изображения
✹ Создание красивых изображений с исходным кодом
✹ Подбор палитры цветов для разработки дизайна
✹ Тестирование и демонстрация сниппетов на основе HTML, CSS и JavaScript
✹ Иконки с открытым исходным кодом
✹ Проверка совместимости CSS и JavaScript в различных популярных браузерах
✹ Создание файла README
✹ Проверка производительности сайта
✹ Редактирование фотографий
✹ Подборка иллюстраций без лицензии
👉 Читайте подробнее на Medium или в PDF
✹ Визуализация регулярных выражений JavaScript
✹ Документация для разработчиков: онлайн + офлайн
✹ cdnjs: поиск библиотек с открытым исходным кодом
✹ Фотосток с огромной коллекцией изображений
✹ Интеллектуальное сжатие WebP, PNG и JPEG
✹ Удаление фона изображения
✹ Создание красивых изображений с исходным кодом
✹ Подбор палитры цветов для разработки дизайна
✹ Тестирование и демонстрация сниппетов на основе HTML, CSS и JavaScript
✹ Иконки с открытым исходным кодом
✹ Проверка совместимости CSS и JavaScript в различных популярных браузерах
✹ Создание файла README
✹ Проверка производительности сайта
✹ Редактирование фотографий
✹ Подборка иллюстраций без лицензии
👉 Читайте подробнее на Medium или в PDF
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Несмотря на некоторые ограничения в отдельных браузерах, мы можем очень просто изменить размер любого элемента блока, а не только текстовой области.
➡️ Поиграть можно здесь
#css #tip by Shripal Soni
➡️ Поиграть можно здесь
#css #tip by Shripal Soni
🔥 Несколько уроков в курсе «CSS для JavaScript-разработчиков» от Josh W. Comeau можно изучить бесплатно
🤫 Воспринимайте это как возможность изучить какую-то концепцию в сжатые сроки:
👨💻 CSS Variables
👨💻 Variable Fragments
👨💻 Магия Calc
🤫 Воспринимайте это как возможность изучить какую-то концепцию в сжатые сроки:
👨💻 CSS Variables
👨💻 Variable Fragments
👨💻 Магия Calc
Joshwcomeau
CSS Variables • CSS for JavaScript Developers
Modern web applications respond dynamically, contorting themselves to display well across an incredibly wide range of devices. In this module, we'll learn how to write CSS that responds and adapts to different situations.