​Создание калькулятора только с чистым HTML и CSS

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

https://blog.scottlogic.com/2022/01/20/noJS-making-a-calculator-in-pure-css-html.html

#html #css

​Анализ работы Guess.js в приложении Angular

Guess.js — это библиотека, разработанная Google, которая использует данные аналитики для определения, какие ресурсы должны быть предварительно загружены, чтобы ускорить загрузку страницы. В статье рассматривается процесс интеграции Guess.js в Angular приложение, а также его настройка и использование:

https://nuancesprog.ru/p/16808/

#angular #guessjs

Давайте хвастаться своими успехами

Ну что, как прошла ваша неделя? Успели закрыть текущие таски или, может быть, сделали какую-то крутую фичу?

Переходите по ссылке и делитесь своими успехами в комментариях к статье:

https://tproger.ru/articles/chto-vy-delali-na-jetoj-nedele-post-ljogkogo-hvastovstva-za-20-24-fevralja/

​​Когда фронтенд ещё не отлажен, а запускать сайт уже надо:

​Как создать Chrome-расширение для приложения с прогнозом погоды

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

https://nuancesprog.ru/p/16733/

#chrome #бэкенд

​Зачем нужна ARIA и как она помогает сделать веб-стайт более доступным

ARIA, или Accessible Rich Internet Applications — это спецификация, которая позволяет сделать веб-контент и сайты доступными для людей с ограниченными возможностями. В этой видео вы на простых примерах разберётесь с aria-ролями и aria-атрибутами:

https://youtu.be/oS5tmH8HtFw

#видео #aria

​Как использовать React в приложениях Angular

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

О том, как это сделать:

https://nuancesprog.ru/p/16840/

#react #angular

​8 CSS-проектов, демонстрирующих мощь теневых эффектов

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

https://speckyboy.com/css-snippets-shadow-effects/

#css

​Держите свежий дайджест Python: версия 3.12 и свой GPT за 60 строк кода

Подготовили для вас лучшие материалы по питону с 14 по 28 февраля. Большие данные, нейросети, Django, Flask и многое другое ждут вас тут:

https://tproger.ru/articles/dajdzhest-python-4-versija-3-12-i-svoj-gpt-za-60-strok-koda/

#дайджест #python

​Как посчитать длину текста и не привлекать внимание санитаров

В этой статье вы узнаете, как правильно рассчитать длину текста в JavaScript даже если там присутствуют эмодзи. Она будет одинаково полезна как начинающим разработчикам, так и весьма опытным. Благодаря ей вы поймете устройство Unicode и особенности его работы в JS.

Подробнее:

https://habr.com/ru/company/avito/blog/675586/

#javascript

​21 лучшая практика при написании кода на TypeScript

За счёт своей продвинутой системы типов TS позволяет писать более надёжный, обслуживаемый и масштабируемый код. Однако, чтобы задействовать весь потенциал этого языка и создавать высококачественные проекты, важно понимать лучшие практики и следовать им.

В этой статье вы изучите 21 лучшую практику, с помощью которых вы сможете повысить свой навык работы с этим языком:

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

#фронтенд #typescript

​​Как прошла ваша неделя? Поделитесь своими успехами и похвастайтесь достижениями

Разработали крутую фичу, придумали интересную идею для пет-проекта или уже завершили работу над ним? Поделитесь своими яркими моментами в комментариях к статье:

https://tproger.ru/articles/chto-vy-delali-na-jetoj-nedele-post-hvastovstva-za-27-fevralja-3-marta/

#чат

​Как начать тестировать фронтенд: гайд для новичков

Многие фронтенд-разработчики не тестируют свой код должным образом. Это касается и начинающих разработчиков, и более подготовленных. Причём речь касается unit/интеграционных/e2e‑тестов, пирамид тестирования, красно‑зелёного рефакторинга, TDD и BDD, скриншот‑тестирования и других техник.

Этот гайд направлен на то, чтобы научить каждого фронтендера внедрять тестирование для повышения качества кода:

https://habr.com/ru/company/docdoc/blog/716526/

#фронтенд #qa

Иконки погоды в стиле глассморфизма

Эти 4 иконки погоды выполнены в стиле глассформизма. Для создания внешнего вида и анимаций использовались HTML и SCSS. Посмотреть код и забрать его в свой проект можно тут:

https://codepen.io/onediv/full/MWQKgmv

#codepen #html #scss

​Как правила линтинга влияют на архитектуру приложения

В eslint есть одно простое, но мощное правило, которое поможет вам в поддержании архитектуры приложения. import/no-restricted-paths позволяет указать зону, по которой запрещено импортировать определенные пути. Это важно, если вы хотите контролировать связи в архитектуре.

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

https://habr.com/ru/company/okko/blog/716042/

#линтинг

​Менеджмент зависимостей в JavaScript — управляем хаосом

Каждый веб-разработчик сталкивается с магией установки пакетов. Буквально по одной команде менеджер загружает все необходимые файлы и зависимости. Но чем их больше, тем «тяжелее» становится проект и его поддержка.

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

https://tprg.ru/jNfX

#javascript

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Ещё не успели попробовать Flexbox или хотите освежить в памяти все его возможности? В этой статье мы собрали для вас все свойства и продемонстрировали их работу в гифках:

https://tproger.ru/articles/how-css-flexbox-works/

#css #фронтенд

Monster Mash

Нечасто на codepen попадаются интересные проекты не только с точки зрения кода, но и самой идеи. Игра Monster Dash как раз является одним из таких проектов. Это аркада, которая предлагает несколько уровней с разными типами монстров и ваша задача отстреливать их.

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

https://codepen.io/grantjenkins/pen/xxjQmmo

#codepen #gamedev

​Что лучше: Map или Object?

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

Например, если вы собираетесь хранить пары ключ-значения, то для этого лучше использовать map и вот почему:

https://www.builder.io/blog/maps

#javascript

​Резервный маршрут в Laravel

В Laravel существует функция маршрутизации Route::fallback(). Если ни один маршрут не сработал, тогда резервная функция переопределяет дефолтную страницу 404 и вводит дополнительную логику. Как это работает и где может применяться читайте тут:

https://laravel.demiart.ru/rezervnyj-marshrut-v-laravel/

#php #laravel