Кто дзен познал, ставит лайк

Создаем стильный заполняющийся индикатор загрузки

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

https://www.freecodecamp.org/news/filling-css-loaders/

#туториал #css

Как HTML и CSS влияют на доступность

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

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

#html #css #accessibility

Путь веб-разработчика с полного нуля

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

#видео #roadmap

Какой фреймворк выбрать новичку для бэкенда на JavaScript

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

Node.js — база для фреймворков

Прежде всего, стоит упомянуть, что бэкенд на JavaScript чаще всего строится на базе Node.js. Это среда выполнения, которая позволяет запускать JavaScript на сервере. Она быстро обрабатывает запросы и легко масштабируется, что делает её идеальным выбором для новичков.

Express.js — проще некуда

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

Вот пример простого сервера на Express.js:

const express = require('express');
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
    res.send('Hello, World!');
});
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

С помощью этого кода вы создадите простой сервер, который отвечает на запросы по адресу "/".

Koa.js — больше гибкости

Если вы хотите большей гибкости и современного подхода, посмотрите на Koa.js. Этот фреймворк был создан создателями Express и предлагает более чистый и современный подход к написанию middleware. Если вас интересует асинхронное программирование с использованием async/await, Koa очень подойдет.

Пример применения Koa:

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
    ctx.body = 'Hello, Koa!';
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
    console.log('Koa server running on http://localhost:3000');
});

NestJS — для тех, кто хочет быть на острие технологий

Если вы хотите изучать что-то более продвинутое и готовы погрузиться в сложные концепции, обратите внимание на NestJS. Этот фреймворк основан на TypeScript и предлагает архитектурный подход, который подходит для больших приложений. Он внедряет концепции модульности и инверсию управления, что может сильно упростить разработку сложных проектов.

Выбор фреймворка зависит от ваших целей и уровня подготовки. Если вы только начинаете, рекомендуем начать с Express.js — он прост в освоении и отлично подходит для небольших проектов. Если уже есть опыт или вы хотите изучить что-то новое, Koa.js или NestJS могут стать отличным выбором. Удачи в изучении бэкенда на JavaScript!

Есть что-то ещё, что мы упустили? Поделитесь своим вариантов в комментариях.

#простымисловами #бэкенд

Бэкендер пытается центрировать <div>

Event loop для чайников: простыми словами о сложном механизме браузера

Event Loop — механизм, который управляет асинхронными операциями в JavaScript. Он позволяет обрабатывать задачи, не блокируя основной поток выполнения программы.

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

Верстка адаптивного сайта с HTML, CSS и JS

Отличное видео для тех, кто учится верстать. В этом видеоукроке вы узнаете, как верстать различные элементы сайта, создавать анимации и добиться адаптива.

Можно смотреть прямо тут, либо перейти на страницу автора.

#урок #фронтенд

Анимация глича для текста при наведении cоздана на чистом CSS. Посмотреть код и попробовать проект можно по ссылке:

https://codepen.io/oscar-jite/pen/yLwoeLE

#codepen

Современный Drag and Drop в React с помощью dndkit: создаем перетаскиваемое меню

DnD Kit — это удобная библиотека для создания функциональности drag-n-drop в React-приложениях. У нас на сайте появилась статья, в которой на понятных примерах показаны ключевые возможности библиотеки.

#react #dragndrop

Поэтому мы собрали их для вас! Разумеется, с ответами и пояснениями

Проверьте готовы ли вы к позиции мидла вместе с TeamLead Frontend Developer: https://tprg.ru/4tpo

#собеседвоание #js #json #css

Интерактивный гайд по CRDT

Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.

В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.

https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

#typescript #crdt

Чистая архитектура фронтенд приложений

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

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

https://habr.com/ru/articles/868058/

#фронтенд

Бедолага фронтендер(

@ithumor

Что такое AJAX и как он работает?

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

Здесь вы сможете узнать, как работают её основные компоненты, и какие преимущества она предоставляет разработчикам и пользователям.

#ajax

Сохраняем шпаргалку по HTTP-ответам

Как правильно изучать бэкенд-разработку

В этом видео вы разберетесь во всем, что касается Backend-разработки:

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

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

Как упростить работу с React при помощи useLoaderData

Традиционный подход с использованием useState и useEffect для получения данных в React часто приводит к проблемам. Загвоздка заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению.

Вместо этого можно использовать хук useLoaderData из React Router. Он позволяет вынести логику загрузки данных в отдельную функцию-загрузчик. Это упрощает код, позволяет отделить логику загрузки от отображения и избавляет от необходимости отслеживать состояние загрузки.

Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/

#react

Знакомство с Koa

Koa.js — это современный и мощный фреймворк для создания веб-приложений на базе Node.js. Он поддерживается и развивается большим сообществом разработчиков и предлагает удобный и элегантный способ написания серверного кода, используя возможности новейших версий JavaScript и концепцию асинхронности.

В этой статье вы сможете ближе познакомиться с ним и посмотреть ключевые особенности.

#koajs #бэкенд

Что такое прототипные методы в JavaScript

Давайте сегодня разберем одну из ключевых концепций в JavaScript — прототипные методы. Что это такое и какую роль они играют в нашем коде?

В JavaScript каждое значение имеет прототип — объект, от которого оно «унаследует» свойства и методы. Это позволяет создавать структуры, которые могут делиться функциональностью. Прототипы помогают избежать дублирования кода и облегчить его поддержку.

Как работают прототипные методы?

Когда мы создаем объект, он может использовать методы, определенные в его прототипе. Например, у всех объектов, созданных на основе Array, есть общие методы, такие как .push() и .pop(). Эти методы определены в Array.prototype. Если вы не знаете, что такое prototype, подумайте о нем как о шаблоне для создания объектов.

Давайте рассмотрим простой пример. Мы создадим конструктор для объекта Person и добавим метод greet в его прототип:

function Person(name) {
    this.name = name;
}
// Добавляем метод greet в прототип Person
Person.prototype.greet = function() {
    console.log(`Привет, меня зовут ${this.name}!`);
};
// Создаем нового человека
const alice = new Person('Алиса');
const bob = new Person('Боб');
// Вызываем метод greet
alice.greet(); // Привет, меня зовут Алиса!
bob.greet();   // Привет, меня зовут Боб!

В этом примере метод greet не дублируется для каждого отдельного объекта, а хранится в прототипе. Это экономит память и делает код более организованным.

Использование прототипов полезно по нескольким причинам:

1. Экономия памяти. Методы хранятся в одном месте, а не копируются в каждый объект.
2. Упрощение кода. Легче добавлять, изменять и удалять методы.
3. Наследование. Можно создавать иерархии объектов, где один объект наследует свойства и методы другого.

Если у вас есть вопросы или хотите обсудить тему подробнее, пишите в комментариях!

#простымисловами