​​Что должен знать уважаемый фронтендер в 2024 году?

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

Это как раз такая статья. В ней узнали у мидл- и сеньор-фронтендеров, что нужно изучать в 2024 году новичкам и опытным специалистам, чтобы быть востребованными: https://tproger.ru/articles/frontend-2024

#советы #фронтенд

​Тимлид такое видит каждый день

​​Верстальщик и JavaScript

Раньше верстальщик переводил картинки от дизайнера в пригодный для браузера вид: HTML + CSS. Но сейчас есть сборщики проектов, бандлы, требования к анимации, интерактиву и даже целому пласту бизнес-логики, который ожидается «из коробки».

Какой объем JavaScript/TypeScript-кода сейчас должен отдавать верстальщик? Простительно получить от верстальщика сырой HTML или нужно отдавать почти готовые Vue/React-компоненты, к которым фронтендеры прикрутят бизнес-логику?

#обсуждение

​​​​Дорожная карта SQL: от новичка до мидла в 2024 году

Какой бы язык вы и осваивали, попутно рано или поздно предстоит выучить и SQL для обращения с базами данных.

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

Там есть основные темы, краткая информация для каждого раздела и полезные ссылки для изучения: https://tproger.ru/articles/dorozhnaya-karta-obucheniya-sql-dlya-dostizheniya-urovnya-middle-

#sql #шпаргалки

​Если вам нужна простая библиотека для визуализации потоков на JavaScript, обратите внимание на Drawflow

В ней определена работа с узлами на панели редактора: перетаскивание, удаление, добавление связей между ними. Узлы также поддерживают множественные входы и выходы. Есть экспорт/импорт данных редактора и поддержка компонентов Vue и Nuxt.

Гитхаб проекта с подробными инструкциями и примерами: https://github.com/jerosoler/Drawflow

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

​Ничего необычного, просто ​​бэкенд-разработчик пытается центрировать div:

​​Вопросы с собеседований: объясните, как this работает в JavaScript

Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана, если это не стрелочная функция. У стрелочных функций контекст this определяется в момент создания функции.

Значение this называется контекстом вызова и будет определено в момент вызова функции. Значением this является объект перед точкой, в контексте которого вызван метод.

#основы #собеседование #javascript

​​Реализуем генератор паролей на сайте

Чтобы точно быть уверенным в том, что пользователь не будет устанавливать простой для перебора пароль и ставить свой аккаунт под угрозу взлома, нужно упростить создание такого пароля.И вот один из неплохих проектов.

Random Password Generator — вкладка генератора паролей, созданная с помощью CSS и JavaScript. Исходники: https://codepen.io/dev_loop/pen/vYYxvbz

#codepen

​​разработчик выпустил утилиту, которая уродует код

Она называется Shittier — в противовес утилите Prettier.

Shittier форматирует код так, что он становится почти нечитаемым, но при этом остаётся рабочим. Утилита добавляет пробелы, табы и разрывы строк в структуру кода JS, меняет регистр букв.

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

Но вообще, так и любой джун может...

​​5 новых функций CSS, которые вы обязаны знать в 2024 году

Рассказали о 5 новых функциях в CSS: о cелекторе :has(), запросах к контейнерам, вложенности CSS, text-wrap:balance и :focus-visible: https://tproger.ru/articles/5-novyh-funkcij-css--kotorye-vy-obyazany-znat-v-2024-godu

#css #тренды

​​...после того, как узнала, что в Tinder с ней общался не настоящий парень, а СhatGPT

​​Уверены, что знаете CSS Flexbox достаточно хорошо?

CSS Flexbox — это инструмент для создания гибких и адаптивных макетов в веб-разработке. Он позволяет расположить элементы в контейнере так, чтобы они могли гибко реагировать на размер экрана или окна браузера.

Сделали тест, в котором можете проверить, насколько хорошо вы понимаете концепции и свойства Flexbox, которые делают его таким мощным инструментом: https://tproger.ru/articles/css-flexbox-test

#css

​​Angular 17: что нового?

Разбор обновлений Angular 17, в котором рассказали о новых фичах фреймворка и изменениях в синтаксисе и рендеринге: https://tproger.ru/articles/angular-17--chto-novogo

#angular

​​Тренды и новинки в мире CSS и веб-дизайна

Нейросети, no-code, потребность в «пересборке» взаимодействия веб-дизайнеров с заказчиками и другие технологические и организационные факторы обозначили себя в 2023 и продолжат оказывать влияние на отрасль в наступившем году.

Чтобы быть в тренде, сохраняйте себе статью, в которой рассказали о трендах в CSS и веб-дизайне в 2024 году. Статья поможет разобраться в том, что нужно знать, какие скиллы имеет смысл качать и какие инструменты использовать: https://tproger.ru/articles/trendy-i-novinki-v-mire-css-i-veb-dizajna

#дизайн #тренды