​​​Изучаем CSS Flex и Grid в фэнтезийном путешествии

Если хотите отточить свои навыки в позиционировании объектов с помощью флексов и гридов, при этом с интересным сеттингом, то вы по адресу. На сайте codingfantasy.com вы можете отправить в путешествие и помочь королю Артуру бороться со злом, используя Flex Box или спасти эльфа из лап демонов с помощью CSS Grid.

Уровней достаточно, чтобы стать настоящим CSS-гуру, проверьте сами: https://codingfantasy.com/games

#css #игры

​​Figma объявила о выпуске бета-версии Code Connect — функции, созданной для упрощённого внедрения дизайн-систем

Code Connect — это утилита, предоставляемая через npm для проектов JavaScript и TypeScript, а также как диспетчер пакетов Swift для проектов SwiftUI.

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

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

Инструмент будет полезным при масштабировании команд, так как облегчит им синхронизацию работы и соблюдение требований дизайн-систем.

В конце января Figma закрыла Dev Mode для пользователей бесплатного тарифа. Теперь он стоит $12 в месяц. Dev Mode — это режим разработки, который позволяет быстро переводить проекты в код. Там доступен код элементов разных платформ, можно создавать плагины под различные фреймворки, представлена интеграция с VSCode, позволяющая смотреть дизайн прямо в среде разработки.

#дизайн #figma

​Я: Начинаю использовать новый фреймворк, не читая документацию.

Также я после того, как уронил прод:

​​Чек-лист для проверки доступности вашего сайта для всех пользователей

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

Несложное, но большое дело — проверить свой сайт на выполнение всех пунктов: https://sarahabd.com/blog/my-accessibility-review-checklist

#тестирование #лучшиепрактики #интерфейс

​Упрощаем отладку компонентов UI с помощью удобного расширения

Это Preview.js — удобное расширение для VSCode или JetBrains IDEs, которое позволяет видеть превью вашего кода, не переходя в браузер. Работает плагин со многими популярным фреймворками: Preact, React, Svelte, Vue и SolidJS.

Здесь вы можете посмотреть все возможности плагина и установить его: https://previewjs.com/

#инструмент #фронтенд

Лучше и мы не слышали

@ithumor

​​Представьте, что вам выпала возможность передать себе из прошлого совет

Какой бы один самый главный совет в начале карьеры смог бы изменить вашу жизнь? Что бы вы посоветовали себе сейчас, зная, как все может сложиться? Побольше читать, изучить какой-то фреймворк, не верить в скорую смерть PHP или освоить Python вместо JavaScript? А может, вообще уйти в сварщики и не тратить жизнь на это IT.

Расскажите. Вдруг, кто-то прямо сейчас сделает правильные выводы и возьмет ваш совет на заметку.

#обсуждение

​​Функциональное программирование от А до Я на примере JavaScript: монады, функторы, каррирование, композиция

Если интересовались функциональное программированием, это видео для вас. В нем разобрали декларативность, чистые функции и сайд-эффекты, иммутабельность (неизменяемость), функции первого класса, функции высшего порядка, композицию/конвейер, частичное применение и каррирование, контейнеры, функторы и другие темы.

Сохраните, чтобы не потерять: https://www.youtube.com/watch?v=ScgmlDb5ed4

#javascript #лучшиепрактики

​Ничего необычного, просто веб-разработчик пытается освоить новый фреймворк до того, как он устареет:

Как управлять большими и маленькими командами в IT и не выгореть

Руководитель проектов в банке на примере моторной лодки объясняет как выстраивать рабочие процессы и коммуникацию внутри команд. 
Ещё расскажет как и зачем выращивать молодых лидеров и поделится личным опытом и ошибками.

​​SEO для разработчиков: что нужно знать программистам в 2024 году

В статье рассмотрели технические основы SEO: что нужно знать о мета-тегах, микроразметке, UX/UI, карте сайта, коде 404, подзаголовках: https://tproger.ru/articles/seo-dlya-razrabotchikov--chto-nuzhno-znat-programmistam-v-2024-godu--osnovnye-trebovaniya-k-razrabotke-sajta

#seo #советы

​​​Милая и наглядная шпаргалка по CSS Flexbox

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

Мы подготовили для вас шпаргалку на русском языке с милыми иллюстрациями, а также оставили её видеоверсию: https://tproger.ru/articles/css-flexbox-tutorial-with-flexbox-properties-cheat-sheet/

#фронтенд #шпаргалка #css

​​Вышла Node.js 22: что нового?

На днях состоялся релиз JavaScript-платформы Node.js 22. Она может быть использована как для серверного сопровождения работы веб-приложений, так и для создания обычных клиентских и серверных сетевых программ.

Основные изменения и дополнения в Node.js 22:
— Движок V8 обновлён до версии 12.4, применяемой в Chromium 124.
— Включён по умолчанию оптимизирующий JIT-компилятор Maglev, нацеленный на быструю генерацию высокопроизводительного машинного кода для активно используемого кода на JavaScript.
— Ускорена работа с потоками за счёт увеличения значения опции highWaterMark с 16 KB до 65 KB (определяет лимит, до которого выполняется буферизация записи).
— Повышена производительность API fetch() и test runner за счёт повышения эффективности создания экземпляров AbortSignal.
— Добавлена экспериментальная возможность запуска скриптов, определённых в файле package.json, используя команду --run.
— Стабилизирована встроенная реализация API WebSocket, позволяющего использовать WebSocket в режиме клиента без установки дополнительных зависимостей.
— Добавлена частичная поддержка API Navigator.
— Объявлен устаревшим API util.

Версия проекта Node.js 22 отнесена к веткам с длительным сроком поддержки (LTS), но этот статус будет присвоен только в октябре, после проведения стабилизации. Поддержка Node.js 22.x будет осуществляться до 30 апреля 2027 года. Сопровождение прошлой LTS-ветки Node.js 20.x продлится до апреля 2026 года, а позапрошлой LTS-ветки 18.x — до апреля 2025 года. Сопровождение промежуточной ветки Node.js 21.x будет прекращено 1 июня 2024 года.

Подробнее: https://nodejs.org/en/blog/announcements/v22-release-announce

#javascript #nodejs

​​Интерактивный гайд по CSS Container Queries

Отличная возможность для того, чтобы попробовать относительно новую фичу без необходимости создавать свою песочницу: https://ishadeed.com/article/css-container-query-guide

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

​​Как только не издевались над названиями специальностей IT-шников.

Что дальше, мужчинокотенок?

20 игр, которые научат программированию

Подходов к обучению много, но через игры учиться не так скучно. Ловите целую подборку таких игр. Вот лишь некоторые из них:

— CodeCombat — RPG, где нужно использовать различные ЯП, чтобы проходить уровни, головоломки и сражаться с врагами.

— Ruby Warrior — игрок управляет воином, который проходит различные уровни. Управлять персонажем можно только на Ruby.

— Untrusted — управляете персонажем и решаете головоломки через Java.

— Check IO — здесь предлагается решать различные задачки с помощью Python или TypeScript. Тут также есть возможность соревноваться с другими игроками.

— Dungeons & Developers — здесь нужно путешествовать по пещерам и выполнять задания, связанные с HTML, CSS и JavaScript.

Ещё больше игр в подборке.

@prog_point

​​Как побороть прокрастинацию?​

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

Как вам удаётся побороть прокрастинацию? Благовония, лоуфай, наушники с шумоподавлением, пробежка с утра или послеобеденный сон? Что вам помогает снова вернуться в «поток»? А может, вы за то, чтобы не сопротивляться психике — и если не работается, просто не работаете?

Расскажите, как это происходит у вас.

#обсуждение

Гайд: создаём полноценную браузерную игру на TypeScript

Делимся 2-часовым гайдом по созданию 2D-платформера на TypeScript: https://www.youtube.com/watch?v=R6WvJOiX99s

#typescript #gamedev

​Интуитивно понятный интерфейс, предусматривающий все незапланированные ситуации использования, и пользователь: