Следующий этап — переписка в 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-свойствами.

Осторожно, затягивает: http://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

​Прокачиваем навыки владения JavaScript всего за 30 дней

Если вы хотите быстро освоиться с JavaScript, но вам не хватает мотивации или вдохновения для выдумывания себе задач, то обратите внимание на челлендж javascript30. Здесь вы бесплатно сможете поучаствовать в 30-дневном испытании, которое ежедневно будет предоставлять вам новое задание.

Если хотите проверить свои силы в короткий срок, то вам сюда:

https://javascript30.com/

#javascript

​Использование PostCSS с медиазапросами

Медиа-запросы предоставляют разработчикам мощный способ обеспечить оптимальное взаимодействие с веб-сайтом для посетителей независимо от типа или размера устройства пользователя. Используя PostCSS, можно реализовать медиазапросы ещё более эффективно. PostCSS может выполнять множество задач, таких как анализ CSS, преобразование будущего синтаксиса CSS, отображение встроенных изображений и поддержка миксинов и переменных.

Подробнее:

https://blog.logrocket.com/using-postcss-media-queries-level4/

#фронтенд #css #postcss

​​Как выглядит any в TypeScript:

​Как попасть в IT, не становясь программистом

В новом выпуске подкаста Frontend Weekend Андрей Смирнов встретился с Артёмом Малышевым, автором другого популярного подкаста «Мы обречены». Артём невероятно креативен и талантлив – вместе с Филом Ранжиным они придумали множество шоу, в которых Артём как продюсер грамотно реализовал потенциал людей вокруг себя.

Смотрим и слушаем тут:

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

#подкаст

​Создание, тестирование и деплой одностраничного приложения с помощью Vue 3 + Vite и Pinia

В этом руководстве подробно описаны шаги по созданию функционального примера одностраничного приложения книжного магазина с использованием Vue 3 и запуска его с помощью Vite. Оно также включает подробности о том, как добавить управление состоянием с помощью Pinia (альтернатива Vuex) и маршрутизацию с помощью Vue Router .

https://dev.to/andreirusu_/create-test-and-deploy-a-single-page-app-with-vue-3-vite-and-pinia-5097

#vue #spa #pinia #vite

​11 исходных программ JavaScript, предоставляющих шаблоны проектирования

Шаблоны, или паттерны проектирования, позволяют нам быстро приступить к решению какой-то сложной задачи. Разработанные ранее, они предлагают готовый вариант организации кода без необходимости разработки с нуля.

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

https://nuancesprog.ru/p/15565/

#javascript

​Вот чего вы не знали о :where()

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

https://www.matuzo.at/blog/2022/heres-what-i-didnt-know-about-where/

#фронтенд #css