​​Полное руководство: Хуки жизненного цикла Angular

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

В Angular возможно взаимодействовать с компонентами в определённый этап их жизненного цикла, для этого существуют хуки. Как они работают и как ими пользоваться рассказывают здесь:

https://indepth.dev/posts/1494/complete-guide-angular-lifecycle-hooks

#angular

Bulma против Tailwind CSS: какая альтернатива Bootstrap лучше?

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

Какой из них справляется с этим лучше, узнаете в этой статье:

https://blog.logrocket.com/bulma-vs-tailwind-css-better-bootstrap-alternative/

#css #tailwind

Полезный совет по условным выражениям JSX

Условные выражения могут быть полезны при работе с JSX, но не всегда ведут себя так, как вы рассчитывали или привыкли при работе с обычным JS. О некоторых нюансах и полезных советах, которые стоит помнить, рассказал Владимир Клепов в своей статье:

https://thoughtspile.github.io/2022/01/17/jsx-conditionals/

#react #jsx

​​Актуальность TypeScript в 2022 году

Если верить статистике, то TypeScript пережил бурный рост популярности и сейчас находится на плато стабильности. Будет ли его популярность расти неизвестно, ведь даже Microsoft уже высказывается за добавление аннотации типов в ванильном JS. А как мы знаем именно за это TypeScript и ценится. Но если возможность указания типов появится в JS, то нужен ли будет TS?

Автор этой статьи решил порассуждать на эту тему. С его выводами можно ознакомиться здесь:

https://css-tricks.com/the-relevance-of-typescript-in-2022/

#typescript

​Как не надо импортировать SVG в React и Vue

SVG позволяет нам по-разному подойти к импорту в проект, и этот тред в Twitter как раз рассказывает об этом. Здесь вы увидите, как точно не стоит делать и каких правил, наоборот, стоит придерживаться:

https://twitter.com/MarkSShenouda/status/1491510779685789697

#фронтенд #react #vue

Как использовать ::before и ::after в CSS для создания собственных анимаций и переходов

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

https://blog.logrocket.com/how-to-use-css-before-after-create-custom-animations-transitions/

#css

Никогда такого не было и вот опять

Создание и деплой полнофункционального приложения для обмена сообщениями в чате в реальном времени с аутентификацией и SMS-уведомлениями

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

Все подробности в видео:

https://www.youtube.com/watch?v=MJzbJQLGehs

#фронтенд #бэкенд #видео

​Как эффективно использовать React Context

В этой статье рассматриваются методы эффективного использования потребителей контекста (Context Consumer), которые помогут вам избежать ошибок и упростят разработку приложений и/или библиотек:

https://habr.com/ru/post/522896/

#react #хуки

​17 полезных веб-приложений для ускорения работы над проектом

В этой подборке вы не найдёте каких-то сложных и требовательных инструментов, способных писать код за вас. Нет. Но здесь есть инструменты, которые помогают облегчить и свести к паре кликов различные рутинные задачи, возникающие перед каждым веб-разработчиком. Подробнее:

https://proglib.io/p/17-nezamenimyh-veb-prilozheniy-dlya-uskoreniya-raboty-nad-proektom-2022-02-18

React World

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

Здесь ссылка на GitHub репозиторий проекта: https://github.com/sfatihk/react-world

А тут можно проверить проект в действии: https://sfatihk.github.io/react-world/#

#react #github

Но я всё равно им горжусь

​Каскад CSS, или как браузеры разбираются с конкурирующими стилями

Каскад CSS — это то, как наши браузеры обрабатывают конфликтующие стили CSS. Да, можно помочь браузеру, расставив везде !important, но лучше так не делать, если вы не хотите сойти потом с ума при отладке.

Гораздо лучше, если вы прочитаете эту статью, которая подробно и с примерами объясняет тонкости каскадов:

https://wattenberger.com/blog/css-cascade

#css

​Легковесные альтернативы Redux

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

В этой статье вы узнаете, какие у вас есть альтернативы Redux, а также их ключевые отличия:

https://blog.openreplay.com/lightweight-alternatives-to-redux

#redux

​6 креативных идей для CSS эффектов при наведении на ссылку

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

В этой статье собраны 6 креативных идей с подробной инструкцией по их реализации. Подробнее:

https://css-tricks.com/css-link-hover-effects/

#css

​Оживляем сайт на Django

Чтобы ваш сайт «ожил» необходимо развернуть его и сделать доступным всем желающим. Для этого необходимо совершить ряд действий таких, подготовка и запуск сервера, приобретение домена и многое другое.

Подробнее обо всех этапах применительно к сайту на Django рассказано здесь:

https://www.mattlayman.com/understand-django/deploy-site-live/

#бэкенд #python #django

​Написание драйвера принтера на JavaScript

Автор этой статьи поделился забавной, но вдохновляющей историей битвы за работу своего принтера. Он приобрёл принтер Zebra, но в той конфигурации оборудования в которой принтер был необходим, он не мог работать из-за программных особенностей. И ему пришлось написать собственный драйвер, чтобы это всё заработало.

Подробнее об этой истории можно прочитать в статье:

https://kubesail.com/blog/2022-02-01-printer-driver-in-javascript

#javascript

​Адаптивный радиус границы элемента с техникой Fab Four

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

Вот об этом и пойдёт речь в статье:

https://blog.logrocket.com/responsive-css-border-radius-fab-four-technique/

#css

​Как работают SSL-сертификаты

SSL-сертификат необходим для защиты данных пользователя. Если в адресной строке браузера отображается замочек рядом с адресом сайта, значит всё в порядке, и данные пользователя передаются на сервер в зашифрованном виде. Простому пользователю достаточно этих знаний, но вот веб-разработчикам требуется знать куда больше.

В этой статье разбирается принцип работы сертификата и практика его применения:

https://doka.guide/tools/ssl-certificates/

#ssl #бэкенд

Следующий этап — переписка в ICQ

Анимированный куб

Вот такой куб можно реализовать с помощью нескольких сложных CSS-анимаций. Да, в этом проекте нет JavaScript. Для уменьшения объёма кода и упрощения настройки здесь применяется препроцессор SCSS.

Подробнее можно посмотреть здесь:

https://codepen.io/davidkpiano/pen/aqNZxX

#codepen #css #scss