Внимание, найден действительно рабочий способ стать мидлом не за год и даже не за месяц.
Достаточно просто стать не джуном, а сразу мидлом. Think about it.
Достаточно просто стать не джуном, а сразу мидлом. Think about it.
Пишем змейку на JS
Почти двухчасовой гайд по созданию браузерной змейки в ретро стиле на JS + CSS: https://www.youtube.com/watch?v=uyhzCBEGaBY
#javascript #gamedev
Почти двухчасовой гайд по созданию браузерной змейки в ретро стиле на JS + CSS: https://www.youtube.com/watch?v=uyhzCBEGaBY
#javascript #gamedev
PHP — это «гадкий утёнок» индустрии. В детстве язык страдал от большого количества недостатков и от ещё большего количества неопытных программистов, которые писали на нем код низкого качества.
Не факт, что PHP сможет исправить свою репутацию. Но возможно, его ругают в основном по инерции, а сам язык здорово развивается и уже имеет мало общего с тем, что он представлял из себя 10 лет назад.
В статье наш читатель рассмотрел преимущества современного PHP: его гибкость, лёгкость интеграции, широкую поддержку сообщества и доступные инструменты для разработки. И рассказал, почему стоит выбирать PHP для веб-разработки, несмотря на неоправданный хейт и кучу мемов: https://tproger.ru/articles/ya-vybirayu-php-dlya-veb-razrabotki-i-vot-pochemu
#php #тренды
Не факт, что PHP сможет исправить свою репутацию. Но возможно, его ругают в основном по инерции, а сам язык здорово развивается и уже имеет мало общего с тем, что он представлял из себя 10 лет назад.
В статье наш читатель рассмотрел преимущества современного PHP: его гибкость, лёгкость интеграции, широкую поддержку сообщества и доступные инструменты для разработки. И рассказал, почему стоит выбирать PHP для веб-разработки, несмотря на неоправданный хейт и кучу мемов: https://tproger.ru/articles/ya-vybirayu-php-dlya-veb-razrabotki-i-vot-pochemu
#php #тренды
Скрытые возможности элемента input
Элемент input в HTML самый интересный.
Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.
Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.
В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/
#html #лучшиепрактики
Элемент input в HTML самый интересный.
Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.
Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.
В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/
#html #лучшиепрактики
Репозиторий, в котором собраны лучшие практики по тестированию JavaScript и Node.js приложений
Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.
Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices
#javascript #nodejs #тестирование #лучшиепрактики
Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.
Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices
#javascript #nodejs #тестирование #лучшиепрактики
Подборка годноты для веб-разработчиков: 7 незаменимых веб-приложений, которые ускорят работу над проектом
В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.
1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.
2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.
3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии.
4. Carbon поможет создавать красивые изображения вашего кода.
5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.
6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.
7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.
#инструменты
В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.
1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.
2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.
3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии.
4. Carbon поможет создавать красивые изображения вашего кода.
5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.
6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.
7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.
#инструменты
36th CssChallenge — адаптивные карточки с возможностью переходить по ним. Реализованы с помощью CSS и JavaScript.
Исходники: https://codepen.io/Eliiima70/pen/PoaPgZX
#codepen
Исходники: https://codepen.io/Eliiima70/pen/PoaPgZX
#codepen
На днях вышел релиз мажорной версии открытого проекта для работы с электронной почтой 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 #инструменты