В Figma появился режим для разработчиков

Теперь макеты интерфейсов будет ещё удобнее переносить в вёрстку. Команда Figma анонсировала Dev Mode в Figma для получения кода CSS, Swift UI и Compose из макетов. Он пригодится как веб-, так и мобильным разработчикам.

Подробнее о новшестве мы рассказали тут:

https://tproger.ru/articles/figma-dobavila-dev-mode-dlya-veb-razrabotchikov

#дизайн #вёрстка

​А как вы получили свою первую работу?

Вы долго готовились и ходили по собеседованиям или сразу согласились на первое же предложение? Это было сложно или проще простого?

Поделитесь опытом, а мы опубликуем вашу историю на сайте и её увидят читатели Типичного программиста: https://tproger.ru/articles/kak-vy-poluchili-svoyu-pervuyu-rabotu-rasskazhite-nam-o-svoyom-opyte/

​Как работает Next Image в Next.js

Если вы работали с Next.js, скорее всего, вы сталкивались с компонентом Next Image. Он позволяет оптимизировать изображения, при этом поддерживает современные форматы, такие как webp и avif, а также генерирует несколько версий, адаптированных под различные размеры экранов.

При этом «из коробки» всё работает максимально просто при минимуме кода. Такая простота достигается благодаря внутренней сложности компонента: он состоит из трёх других компонентов React Next Image, API изображений и оптимизатора изображений. Но обо всём по порядку:

https://tproger.ru/articles/veshhi-o-kotoryh-vy-mogli-ne-znat-o-next-image

#nextjs #бэкенд

​Самый безопасный способ скрыть ключи API при использовании React

Хотите убедиться, что ваши ключи API в целости и сохранности при работе с React? В этой статье вы увидите лучшие способы скрыть ключи API, от использования переменных среды до создания собственного внутреннего прокси-сервера.

Подробнее:

https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/

#фронтенд #react

Вредный медведь на GSAP

Классный codepen-проект, который демонстрирует возможности современной вёрстки. Этот медведь будет мешать вам включить лампочку в комнате. Проект примечателен использованием библиотеки GSAP и наличием звуков при совершении действий.

Попытаться включить лампочку или посмотреть код можно здесь:

https://codepen.io/jh3y/pen/dyXBKog

#codepen

​Как студент стал фронтенд-разработчиком

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

Пользователь нашего сайта рассказал, как он начал свой карьерный путь в IT, с какими сложностями столкнулся и и что было дальше:

https://tproger.ru/articles/nachalo-moej-karery-retrospektiva/

#историяуспеха

​​Реально ли сделать движок для игры от первого лица за 265 строк Javascript?

В этой статье автор рассказал, как с нуля, быстро и без особо сложной математики написать движок для игры от первого лица с помощью приёма raycasting. Возможно, вы видели примеры такой техники в играх Daggerfall и Duke Nukem 3D.

Вот демка

Вот статья

#gamedev #история #javascript #веб

​Топ реальных историй про первую работу: как начиналась карьера в IT у наших читателей

Недавно мы просили читателей Типичного рассказать о том, как они получали первую работу и какие советы дали бы начинающим специалистам, которые сейчас тоже ищут первую работу.

Делимся лучшими реальными историями про первую работу:
— Как таксист в тяжёлой депрессии стал Python-разработчиком

— С завода на завод. Как слесарь стал программистом всего за 8 месяцев

— Как пройти путь от галеры в Новосибирске до релокейта на Филиппины

— Как стать Golang-разработчиком и получить оффер на 100 000 рублей в 20 лет

— Как студент из Красноярска стал фронтенд-разработчиком

#карьера #работа

​7 библиотек для анимаций на React

Сегодня интерфейсы становятся всё сложнее. Из-за этого разработчики вынуждены искать всё более удобные инструменты для реализации таких интерфейсов и, в частности, анимаций.

В этой статье вы увидите 7 библиотек для анимаций на React, которые пригодятся вам в следующем вашем проекте:

https://tproger.ru/articles/luchwie-biblioteki-dlya-animacij-na-react/

#фронтенд #react

​Оптимизация Ruby-приложений: советы и примеры кода

Хотя Ruby является популярным языком программирования для разработки веб-приложений, его производительность может стать проблемой при работе с большими объёмами данных или высокой нагрузке.

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

https://tproger.ru/articles/optimizaciya-proizvoditelnosti-ruby-prilozhenij-sovety-i-primery-koda/

#ruby

Подборка актуальных вакансий

— Web-аналитик в Открытие
Где: Москва, можно удалённо
Опыт: от 2 лет

— PHP-разработчик в Гринатом
Где: удалённо
Опыт: от 2 лет

— PHP-разработчик в Гринатом
Где: удалённо
Опыт: от 3 лет

— Java-разработчик в Иннотех
Где: удалённо
Опыт: от 3 лет

— Java-разработчик в Открытие
Где: удалённо
Опыт: от 3 лет

— Тестировщик в Гринатом
Где: удалённо
Опыт: от 3 лет

— UX/UI-дизайнер в Гринатом
Где: удалённо
Опыт: от 3 лет

— Middle Golang-разработчик в МТС
Где: удалённо
Опыт: от 3 лет

— Senior Go-разработчик в МТС
Где: удалённо
Опыт: от 3 лет

#вакансии #работа

Сразу тяжёлая артиллерия

​Как преобразовать компоненты Figma в Next.js с помощью Tailwind CSS

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

В этой статье вы увидите простой автоматический способ преобразования конструкций Figma в Next.js-код с помощью Tailwind CSS:

https://blog.logrocket.com/convert-figma-components-next-js-tailwind-css/

#figma #css #nextjs #фронтенд

​MVP продукта: как внедрить фичу и не растерять пользователей?

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

Как выглядит процесс проработки MVP продукта в крупных компаниях, рассказывают руководитель отдела продуктовой разработки Юрий Кочарян и руководитель группы продуктов для авторов Вера Советкина из Дзена: https://tprg.ru/HhuX

#аналитика

​​Алгоритмы и структуры данных для начинающих

Уверенное применение структур данных и алгоритмов имеет важное значение при создании программ. Изучить основы поможет серия коротких видеоуроков с примерами на JavaScript. Например, что такое BinarySearchTree, LinkedList, Stack, Queue, их применение, а также другие структуры и алгоритмы:

https://youtube.com/playlist?list=PLIFGfLqvZ-yGHI2Fg0NCgi7FY0h1yh-af

#js #алгоритмы

​​Кстати, у нас на сайте вы можете подписаться только на интересные вам теги и отслеживать самые свежие новости и полезные статьи по этой теме.

Вот, например:
— Веб-разработка: https://tproger.ru/tag/web/
— Нейросети: https://tproger.ru/tag/neural-network/
— И геймдев: https://tproger.ru/tag/gamedev/

А ещё можно подписаться на годноту по конкретному языку:
— Python: https://tproger.ru/tag/python/
— JavaScript: https://tproger.ru/tag/javascript/
— C++: https://tproger.ru/tag/cpp/

Посмотрите все теги и выберите только те, которые интересны вам!

​TailwindCSS vs. UnoCSS

TailwindCSS и UnoCSS — популярные CSS-фреймворки.

У Tailwind есть имена классов практически для каждой функции CSS, о которой вы могли подумать, включая некоторые полезные, о которых вы, возможно, не знаете, например isolation. В свою очередь, UnoCSS поддерживает весь Tailwind, плюс некоторые дополнительные возможности. Казалось бы, выбор очевиден. Но как бы не так!

Оба фреймворка имеют свои плюсы и минусы. Эта статья включает в себя множество придирок, которые для кого-то будут незначительны, а для кого-то станут полезным открытием и решающим фактором при выборе инструмента для следующего проекта:

https://dev.to/mapleleaf/tailwindcss-vs-unocss-2a53

#фронтенд #css #tailwind #unocss

​История происхождения: Как небольшая команда разработчиков создала React.js на Facebook

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

Сегодня мы предлагаем вам посмотреть не очередной туториал или курс, а документальный фильм, который расскажет вам полную историю первых дней React, уделяя особое внимание группе преданных своему делу разработчиков, которые помогли вывести его на мировую арену:

https://youtu.be/8pDqJVdNa44

#видео #react

​Лучшие способы вызова API на JavaScript

При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них:

https://nuancesprog.ru/p/15597/

#api #javascript

​Что такое JSON и чем может быть полезен?

JSON или JavaScript Object Notation — текстовый формат обмена данными. И хотя JSON основан на JavaScript, он применяется и при работе с другими языками программирования. Корректные значения JSON — это:
— JSON-объект — неупорядоченное множество пар «ключ:значение», заключённое в фигурные скобки { };
— массив — упорядоченный набор значений, разделённых запятыми и находящийся внутри квадратных скобок [ ];
— число (целое или вещественное) или строка;
— литералы true, false и null.

Давайте на примерах разберёмся, чем JSON может быть полезен и как использовать его правильно: https://tproger.ru/articles/chto-takoe-json-vvedenie/

​Webpack + CSS Modules + TS = Love

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

Вот только TypeScript по умолчанию с модулями CSS работать не умеет. Зато его можно легко обучить этому. Как это сделать, рассказали тут:

https://habr.com/ru/articles/688844/

#typescript #css #webpack