Необычные часы с «кодовым» циферблатом, реализованные с помощью CSS и JavaScript

Посмотреть код проекта можно здесь: https://codepen.io/MarkBoots/pen/zYbjaoR

#codepen

Вместо тысячи слов

Изучаем SQL в формате игры: SQL Murder Mystery

Детективная игра на знание SQL, с которой можно освежить в памяти основы SQL и интересно провести досуг. Примерьте на себя роль детектива, выясняя обстоятельства с помощью SQL-запросов:

https://mystery.knightlab.com/

#sql

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

Lynx от ByteDance уже сейчас используется в приложениях TikTok, а теперь его можно использовать и в своих проектах. При этом он поддерживает интеграцию с React, что делает разработку ещё удобнее.

Подробнее о возможностях можно почитать на сайте платформы: https://lynxjs.org

#инструменты

Разворачиваем микрофронты на Next.js

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

Посмотреть полезно всем — кто хочет понять, что за микрофронты такие, и кто хочет научиться работать с ними более эффективно. Материал по ссылке: https://habr.com/ru/articles/889202/

#nextjs #микрофронтенд

Разница между SPA и PWA

Мы часто сталкиваемся с терминами SPA (Single Page Application) и PWA (Progressive Web App). Давайте разберемся, что они означают и в чем их основные отличия.

SPA — это веб-приложение, которое загрузится однажды и будет динамически обновлять контент на странице без необходимости перезагрузки. Это значит, что после начальной загрузки сайта пользователю не нужно ожидать, пока загрузится новая страница. Все взаимодействия происходят на одном HTML-документе, что делает работу с приложением более плавной и быстрой. Примеры SPA: Gmail, Google Maps.

Для создания простого SPA можно использовать библиотеки или фреймворки, такие как React или Vue.js. Вот небольшая структура на React:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    return (
        <div>
            <h1>Привет, мир!</h1>
            <p>Это простое SPA приложение.</p>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

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

Для создания простого PWA вам нужно добавить файл манифеста и service worker. Пример манифеста:

{
    "name": "Мое PWA приложение",
    "short_name": "PWA",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Основные отличия:

1. SPA нацелено на улучшение пользовательского опыта за счет динамической загрузки данных, в то время как PWA — на создание полноценного приложения, доступного на разных устройствах и с функциональностью, как у нативных приложений.

2. SPA может быть частью PWA. PWA включает все возможности SPA и добавляет дополнительные функции, такие как работа в офлайн-режиме, установка на устройство и поддержка push-уведомлений.

3. SPA чаще всего использует JavaScript-библиотеки и фреймворки (React, Angular, Vue), тогда как PWA требует дополнительных технологий, таких как сервисные работники и манифесты.

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

ReactJS на изи: что реально нужно знать фронтенд-разработчику в 2025 году

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

#react

Создаём полноценное приложение для книжного магазина с React, Node и MongoDB

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

Видео на английском, но в браузере можно посмотреть с субтитрами или нейропереводом, для этого ловите ссылку: https://youtu.be/pgw2KPfgK1E

#видео #курс #фуллстэк #react #nodejs

Как провести скриншотное тестирование с помощью Testplane 

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

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

О том, как работает скриншотное тестирование и как его настроить, читайте в статье.

25 готовых программ на JavaScript для Middle-разработчиков

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

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

#javascript

Работаем с текстовыми файлами, как с БД

TextQL позволяет нам выполнять SQL-запросы над структурированным текстом, например, CSV или TSV. Такой инструмент поможет вам удобнее работать с текстовыми файлами, выбирая из них только то, что нужно.

#инструменты

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

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

В этом руководстве мы с вами создадим лоадер на чистом 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