На днях вышел релиз мажорной версии открытого проекта для работы с электронной почтой React Email 2.0
Это коллекция компонентов для создания электронных писем с использованием React и TypeScript. Исходный код проекта доступен на GitHub под лицензией MIT License.
Основные изменения:
— обновлены компоненты и основные блоки;
— улучшен пользовательский интерфейс и обновлены иконки;
— добавлена возможность предпросмотра на мобильных устройствах;
— появилась поддержка подпапок;
— время запуска локального сервера React Email 2.0 при новой установке составляет около 7 секунд (для React Email 1.10.1 было 40 секунд);
— после завершения первоначальной настройки время загрузки составляет около 1 секунды.
Подробнее: https://react.email/docs/changelog#jan-19-2024
#react #typescript
Это коллекция компонентов для создания электронных писем с использованием React и TypeScript. Исходный код проекта доступен на GitHub под лицензией MIT License.
Основные изменения:
— обновлены компоненты и основные блоки;
— улучшен пользовательский интерфейс и обновлены иконки;
— добавлена возможность предпросмотра на мобильных устройствах;
— появилась поддержка подпапок;
— время запуска локального сервера React Email 2.0 при новой установке составляет около 7 секунд (для React Email 1.10.1 было 40 секунд);
— после завершения первоначальной настройки время загрузки составляет около 1 секунды.
Подробнее: https://react.email/docs/changelog#jan-19-2024
#react #typescript
Топ-12 ресурсов для бесплатного изучения веб-разработки и программирования
Это одни из самых популярных образовательных IT-ресурсов. Конечно, всю информацию из них нужно структурировать, какие-то из них полностью на английском. Но факт в том, что для своей ниши они проработаны очень даже неплохо.
Сохраните, чтобы изучать то, что нужно вам:
— W3School: https://www.w3schools.com
— Современный учебник JavaScript: https://learn.javascript.ru
— Codewars: https://www.codewars.com
— Refactoring Guru: https://refactoring.guru
— Web.dev: https://web.dev
— Harvard CS50 (2023): https://www.youtube.com/watch?v=LfaMVlDaQ24
— Geeks for geeks: https://www.geeksforgeeks.org
— Дока: https://doka.guide
— Egghead: https://egghead.io
— Freecodecamp: https://www.youtube.com/@freecodecamp
— LeetCode: https://leetcode.com/explore
— Developer Roadmaps: https://roadmap.sh
#инструменты #курс
Это одни из самых популярных образовательных IT-ресурсов. Конечно, всю информацию из них нужно структурировать, какие-то из них полностью на английском. Но факт в том, что для своей ниши они проработаны очень даже неплохо.
Сохраните, чтобы изучать то, что нужно вам:
— W3School: https://www.w3schools.com
— Современный учебник JavaScript: https://learn.javascript.ru
— Codewars: https://www.codewars.com
— Refactoring Guru: https://refactoring.guru
— Web.dev: https://web.dev
— Harvard CS50 (2023): https://www.youtube.com/watch?v=LfaMVlDaQ24
— Geeks for geeks: https://www.geeksforgeeks.org
— Дока: https://doka.guide
— Egghead: https://egghead.io
— Freecodecamp: https://www.youtube.com/@freecodecamp
— LeetCode: https://leetcode.com/explore
— Developer Roadmaps: https://roadmap.sh
#инструменты #курс
Что должен знать уважаемый фронтендер в 2024 году?
Обычно когда задаешься таким вопросом, хочется узнать у реально работающих разрабов. Желательно у мидла или сеньора.
Это как раз такая статья. В ней узнали у мидл- и сеньор-фронтендеров, что нужно изучать в 2024 году новичкам и опытным специалистам, чтобы быть востребованными: https://tproger.ru/articles/frontend-2024
#советы #фронтенд
Обычно когда задаешься таким вопросом, хочется узнать у реально работающих разрабов. Желательно у мидла или сеньора.
Это как раз такая статья. В ней узнали у мидл- и сеньор-фронтендеров, что нужно изучать в 2024 году новичкам и опытным специалистам, чтобы быть востребованными: https://tproger.ru/articles/frontend-2024
#советы #фронтенд
Верстальщик и JavaScript
Раньше верстальщик переводил картинки от дизайнера в пригодный для браузера вид: HTML + CSS. Но сейчас есть сборщики проектов, бандлы, требования к анимации, интерактиву и даже целому пласту бизнес-логики, который ожидается «из коробки».
Какой объем JavaScript/TypeScript-кода сейчас должен отдавать верстальщик? Простительно получить от верстальщика сырой HTML или нужно отдавать почти готовые Vue/React-компоненты, к которым фронтендеры прикрутят бизнес-логику?
#обсуждение
Раньше верстальщик переводил картинки от дизайнера в пригодный для браузера вид: HTML + CSS. Но сейчас есть сборщики проектов, бандлы, требования к анимации, интерактиву и даже целому пласту бизнес-логики, который ожидается «из коробки».
Какой объем JavaScript/TypeScript-кода сейчас должен отдавать верстальщик? Простительно получить от верстальщика сырой HTML или нужно отдавать почти готовые Vue/React-компоненты, к которым фронтендеры прикрутят бизнес-логику?
#обсуждение
Дорожная карта SQL: от новичка до мидла в 2024 году
Какой бы язык вы и осваивали, попутно рано или поздно предстоит выучить и SQL для обращения с базами данных.
Но вместо того, чтобы делать это хаотично и набивать непредсказуемые шишки, лучше делать это с умом. Специально для этого сделали дорожную карту по изучению SQL.
Там есть основные темы, краткая информация для каждого раздела и полезные ссылки для изучения: https://tproger.ru/articles/dorozhnaya-karta-obucheniya-sql-dlya-dostizheniya-urovnya-middle-
#sql #шпаргалки
Какой бы язык вы и осваивали, попутно рано или поздно предстоит выучить и 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 #инструменты
В ней определена работа с узлами на панели редактора: перетаскивание, удаление, добавление связей между ними. Узлы также поддерживают множественные входы и выходы. Есть экспорт/импорт данных редактора и поддержка компонентов Vue и Nuxt.
Гитхаб проекта с подробными инструкциями и примерами: https://github.com/jerosoler/Drawflow
#javascript #инструменты
Вопросы с собеседований: объясните, как this работает в JavaScript
Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана, если это не стрелочная функция. У стрелочных функций контекст this определяется в момент создания функции.
Значение this называется контекстом вызова и будет определено в момент вызова функции. Значением this является объект перед точкой, в контексте которого вызван метод.
#основы #собеседование #javascript
Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана, если это не стрелочная функция. У стрелочных функций контекст this определяется в момент создания функции.
Значение this называется контекстом вызова и будет определено в момент вызова функции. Значением this является объект перед точкой, в контексте которого вызван метод.
#основы #собеседование #javascript
Реализуем генератор паролей на сайте
Чтобы точно быть уверенным в том, что пользователь не будет устанавливать простой для перебора пароль и ставить свой аккаунт под угрозу взлома, нужно упростить создание такого пароля.И вот один из неплохих проектов.
Random Password Generator — вкладка генератора паролей, созданная с помощью CSS и JavaScript. Исходники: https://codepen.io/dev_loop/pen/vYYxvbz
#codepen
Чтобы точно быть уверенным в том, что пользователь не будет устанавливать простой для перебора пароль и ставить свой аккаунт под угрозу взлома, нужно упростить создание такого пароля.И вот один из неплохих проектов.
Random Password Generator — вкладка генератора паролей, созданная с помощью CSS и JavaScript. Исходники: https://codepen.io/dev_loop/pen/vYYxvbz
#codepen
Forwarded from Представляешь,
разработчик выпустил утилиту, которая уродует код
Она называется Shittier — в противовес утилите Prettier.
Shittier форматирует код так, что он становится почти нечитаемым, но при этом остаётся рабочим. Утилита добавляет пробелы, табы и разрывы строк в структуру кода JS, меняет регистр букв.
Разработчик, конечно, добавил дисклеймер, что утилита сделана веселья ради и забавы для, лучше не использовать её на продакшн-коде.
Но вообще, так и любой джун может...
Она называется 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 #тренды
Рассказали о 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
CSS Flexbox — это инструмент для создания гибких и адаптивных макетов в веб-разработке. Он позволяет расположить элементы в контейнере так, чтобы они могли гибко реагировать на размер экрана или окна браузера.
Сделали тест, в котором можете проверить, насколько хорошо вы понимаете концепции и свойства Flexbox, которые делают его таким мощным инструментом: https://tproger.ru/articles/css-flexbox-test
#css
Если бы создатели онлайн-калькуляторов для сайтов делали реальные приложения
Angular 17: что нового?
Разбор обновлений Angular 17, в котором рассказали о новых фичах фреймворка и изменениях в синтаксисе и рендеринге: https://tproger.ru/articles/angular-17--chto-novogo
#angular
Разбор обновлений 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
#дизайн #тренды
Нейросети, no-code, потребность в «пересборке» взаимодействия веб-дизайнеров с заказчиками и другие технологические и организационные факторы обозначили себя в 2023 и продолжат оказывать влияние на отрасль в наступившем году.
Чтобы быть в тренде, сохраняйте себе статью, в которой рассказали о трендах в CSS и веб-дизайне в 2024 году. Статья поможет разобраться в том, что нужно знать, какие скиллы имеет смысл качать и какие инструменты использовать: https://tproger.ru/articles/trendy-i-novinki-v-mire-css-i-veb-dizajna
#дизайн #тренды
