Как повысить вашу продуктивность с помощью кроссбраузерных функций DevTools

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

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

#советы

10 инструментов для CSS: анимация, сетки и дизайн

Сегодня существует множество стилей в веб-дизайне, которые сменяют друг друга чуть ли не каждый день. Уследить за каждым сложно, также как и уметь реализовывать их с помощью CSS. 

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

https://tproger.ru/articles/10-instrumentov-dlya-css-animaciya-setki-i-dizajn

#css

Вся команда на дейлике: делится сделанными задачами

Сеньор с зарплатой 5к долларов:

Доступная жилплощадь карьера по клику

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

Тук-тук, можно?

Реклама

Как в Notion развивают код с помощью пользовательских правил ESLint

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

О том, как это работает и как вам попробовать эту систему, рассказали в блоге.

#eslint

Разбираемся в разнице между Media Queries и Container Queries в CSS

Когда речь заходит о CSS, многие из нас знакомы с Media Queries. Это инструмент, который помогает адаптировать стиль вашего сайта в зависимости от размеров экрана. Но также есть и другой игрок — Container Queries. Давайте разберемся, в чем между ними разница и как использовать каждый из них.

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

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

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

С другой стороны, Container Queries ориентированы не на размеры экрана, а на размеры контейнера, в котором находится элемент. Это может быть особенно полезным, когда вы проектируете компоненты, которые могут использоваться в разных местах и на разных экранах.

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

.container {
  container-type: inline-size;
}
@container (max-width: 400px) {
  .my-element {
    color: red;
  }
}

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

Простыми словами, Media Queries реагируют на ширину экрана, а Container Queries — на ширину родительского контейнера. Это делает Container Queries более гибкими для разработки компонентов, которые могут изменяться в зависимости от контекста, в котором они используются.

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

Как создать мини-приложение в Telegram

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

Вы сможете создать простой кликер с таблицей лидеров. В основе будет React и Nest.js. Подробности по ссылке.

#telegram #бэкенд #фронтенд #react #nestjs

Microsoft ускорила TypeScript в 10 раз

В TypeScript радикальные изменения — Microsoft решила сменить язык компилятора, перейдя на Go. Ещё не все работы закончены, но уже сейчас время компиляции сократилось в среднем в 10 раз!

Пока что TS будет работать на JavaScript. Полный переход состоится на версии 7.0, когда будут решены все вопросы с совместимостью версий. Но первую нативную версию обещают уже в середине 2025 года.

Что думаете? Стоит оно того?

#новости #typescript

Пишем простое расширение для браузера

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

#туториал

Необычные часы с «кодовым» циферблатом, реализованные с помощью 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. Такой инструмент поможет вам удобнее работать с текстовыми файлами, выбирая из них только то, что нужно.

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