​Легковесные альтернативы 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

​Топ-10 бэкенд-фреймворков для веб-разработки в 2022 году

Если фронтенд-разработчикам приходится довольствоваться лишь HTML, CSS и JavaScript, а также их различными компаньонами и надстройками, то у бэкенд-разработчиков куда более широкий выбор языков и фреймворков. У каждого из них свои достоинства и недостатки, поэтому лучше иметь представление о каждом из них.

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

https://nuancesprog.ru/p/15529/

#бэкенд

Эффект распада изображения с помощью CSS и библиотеки Anime.js

В этом видео автор создаёт необычный способ исчезновения изображения с эффектом «распада» при помощи библиотеки anime.js.

Пошаговое руководство можно посмотреть здесь:

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

#видео #javascript

​Полная шпаргалка по CSS Flexbox

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

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#шпаргалка #css #flexbox

​3 способа доступа к свойствам объекта в JavaScript

Вы можете получить доступ к свойствам объекта в JavaScript тремя способами:

1. через точку: object.property;
2. с помощью квадратных скобок: object['property'];
3. или с помощью деструктуризации объекта объекта: const { property } = object.

Давайте посмотрим, как работает каждый синтаксис для доступа к свойствам и разберёмся, когда разумно, в зависимости от ситуации, использовать тот или иной вариант.

https://dmitripavlutin.com/access-object-properties-javascript/

#javascript

​Dependency injection в React-приложении

Архитектурный паттерн DI не очень популярен во фронтенде и почти не встречается за пределами Angular.

Автор доклада рассказывает, что такое DI, объясняет на примерах основные концепции и делится списком готовых решений для реализации паттерна в React-приложении.

Видео: https://youtu.be/dMNGzYVfwsc
Презентация: https://tprg.ru/OL0M

#react

Учим CSS Flexbox с лягушками

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

Осторожно, затягивает: https://flexboxfroggy.com/#ru

#фронтенд #css

​Современный курс по Node.js

Предлагаем вашему вниманию подробный курс по изучению Node.js в формате видеолекций. Основной упор делается на то, как создавать надёжные высоконагруженные серверы приложений и API без привязки к конкретному фреймворку и даже протоколу. К лекциям прикреплено множество примеров кода, демонстрирующих гибкую структуру приложений и архитектурные приёмы, в том числе работу с СУБД через слой доступа к данным, создание интерактивных приложений на вебсокетах, обеспечение безопасности и многое другое.

https://www.youtube.com/playlist?list=PLHhi8ymDMrQZmXEqIIlq2S9-Ibh9b_-rQ

#курс #nodejs

Лего для взрослых

​Learn Git Branching

Если вы хотите владеть git на достаточном уровне, то графического интерфейса GitHub или альтернативного сервиса, вам точно будет недостаточно. Чтобы раскрыть потенциал git на полную, необходимо научиться работать с ним через командную строку. К счастью, уже давно существует полезный сервис, который помогает полностью освоиться с CLI git играючи и бесплатно. А находится он тут:

https://learngitbranching.js.org/?locale=ru_RU

#git

​Раздоры вокруг <div>

Тег <div> — это самый универсальный и широко используемый HTML-элемент. Сам по себе <div> не представляет ничего, но он, в то же время, позволяет разработчикам превратить его почти во всё что угодно. Правда из-за такой универсальности нередко страдает семантика сайта, а некоторые верстальщики ленятся поставить даже самый очевидный тег взамен вездесущего <div>.

Но не смотря на это <div> прошёл длинный путь. Давайте изучим его вместе и поймём всю важность этого тега:

https://habr.com/ru/company/ruvds/blog/651557/

#фронтенд #html

​Различия между псевдонимами типов и интерфейсами в TypeScript 4.6

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

https://nuancesprog.ru/p/15546/

#typescript

​Backend для начинающих на node.js express

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

Подробнее:

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

#видео #бэкенд #nodejs #restapi