Переключатель светлого и тёмного режима

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

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

Полный код проекта по ссылке:

https://codepen.io/demilad/pen/bZRjpb

#codepen

​Функция обратного вызова

callback — это функция, которая должна быть выполнена после того, как другая функция завершила выполнение.

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

Один из способов, благодаря которым мы можем избежать подобного сценария это использование callback функции.

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

#основы

Раскрывающиеся рамки элемента при наведении

Не так давно мы рассказывали про эффект «boop» — анимация при наведении. Самое интересное в этом эффекте то, что он может помочь сделать ваш проект более динамичным и отзывчивым.

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

Полный код по ссылке:

https://codepen.io/zastrow/pen/LYdNPOE

#codepen

Аббревиатур дня — CSS

Как транскрибаторы помогают айтишникам

Существует множество сервисов, которые помогают получить расшифровку аудио или видео. Встроенные решения есть у Chat GPT, в VK, Telegram, и других мессенджерах.

Чем же транскрибация может помочь разработчикам?

1. Понять, что хочет клиент, который почему-то решил озвучить правки в голосовом сообщении;
2. Разобрать, что же говорит тот индус из видео;
3. Получить читаемый пост-митинг после очередного созвона.

А в каких случаях вы используете сервисы для расшифровки в текст? Поделитесь своими кейсами в комментариях к опросу ниже.

​Конкурс на лучший пет-проект от редакции Tproger

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

Для лучших мы подготовили подарки — мерч от Tproger.

Подробные условия проведения конкурса ждут вас по ссылке:

https://tproger.ru/articles/luchwij-pet-proekt-2023-zapuskaem-konkurs/

По тегу #лучший_пет_проект_2023 следите за обновлениями в ленте, чтобы не пропустить новости конкурса.

Желаем удачи!

​4 причины, по которым Symfony лучше Laravel

У каждого из этих двух фреймворков есть свои достоинства и недостатки. Но автор статьи выступает за то, что именно Symfony больше подходит для больших проектов и приводит 4 аргумента в пользу своей теории.

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

https://tprg.ru/wtHx

#symfony #laravel

​Задачи по JavaScript

Ваша задача — разрезать плитку шоколада заданного размера n x m на квадратики. Каждый квадрат имеет размер 1х1. Реализуйте функцию, которая будет возвращать минимальное необходимое количество разрезов.

Например, если вам дали плитку шоколада размером 2 x 1, вы можете разделить ее на отдельные квадраты всего за один раз, но для размера 3 x 1 вам нужно сделать два разреза.

Поделитесь своими результатами в комментариях👇

#задачи

​Задачи по JavaScript

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

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

#задачи

​Для чего используется метод scrollIntoView

Если говорить научным языком, то метод Element.scrollIntoView() интерфейса Element прокручивает контейнер родителя так, чтобы элемент, на котором был вызван scrollIntoView(), стал виден пользователю.

Проще говоря, метод scrollIntoView() прокручивает указанный элемент в видимую область окна браузера.

Допустим, у вас есть элемент с id «el». Тогда код будет выглядеть так, как показано на картинке ниже.

Этот метод может быть полезен, к примеру, для продаж на вашем сайте. Допустим, есть некое описание товара, а внизу кнопка «получить скидку». Когда пользователь нажмёт на неё, данный метод поможет вам перенести внимание пользователя на раздел «скидки».

#основы

​Стек вызовов JavaScript: объяснение с помощью иллюстраций

Стек представляет собой структуру данных, организованных по принципу LIFO, т.е. в порядке обратной очередности (last-in — first-out, последним вошел — первым вышел).

Автор статьи объясняет, как это работает в JavaScript:

https://nuancesprog.ru/p/17792/

#javascript

Птица, которую суждено приручить только фулстеку

Анимация прогресса загрузки

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

Проект реализован с помощью CSS и JavaScript.

Полный код по ссылке:

https://codepen.io/codercatdev/pen/VwQgLBy

#codepen

​Обработка событий CSS-переходов в JavaScript

В этой статье автор рассказал, какие события возникают в DOM при CSS-переходах и как их можно использовать в JavaScript. А также, рассмотрел несколько примеров на эту тему:

https://itchief.ru/javascript/transition-events

#css

​Как заниматься разработкой бесплатно и без смс

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

https://tproger.ru/articles/top-besplatnogo-programmnogo-obespecheniya-dlya-veb-programmista

#подборка

​Разница между let и var в JavaSript

В мире JS использование var стало менее популярным и не рекомендуется в новом коде. Однако эта статья поможет вам понять различия между var и let, а также предложит лучшие практики использования этих ключевых слов.

Эффективное объявление переменных и управление областями видимости — важные аспекты разработки на JavaScript.

https://www.geeksveda.com/javascript-let-vs-var/

#javascript

​Tproger расширяет команду разработки и ищет Vue.js разработчика

Мы предлагаем удаленную работу с гибким графиком, конкурентную заработную плату и компенсацию профильных курсов.

Мы работаем на стеке Nuxt 3, Node.js, Laravel, WordPress. Поэтому от вас ожидаем:

— опыт коммерческой разработки;
— уверенное знание JavaScript, TypeScript и Vue.js;
— понимание адаптивной вёрстки;
— опыт работы с Git, Jira.

Если хотите стать частью команды, то вам сюда:

https://tproger.ru/jobs/vue-js-developer

#вакансии

​Что предпочтительней монолит или микросервисы?

Микросервисы vs монолит — вечная дилемма разработчиков.
В этом видео разбираются достоинства и недостатки обеих архитектур, а также даются рекомендации, когда стоит выбирать микросервисы, а когда — монолит.

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

​У нас в самом разгаре конкурс пет-проектов. Выбирайте понравившиеся работы и продвигайте их к победе своими лайками и просмотрами

Консольная змейка: автор создал консольную версию знаменитой игры без графических библиотек.

Агрегатор фестивального кино: код решает проблему отложенной публикации фестивального кино.
Удивительный пример того, как интерес к теме помогает разработчику годами развивать систему.

Аналог BGInfo для корректного отображения обоев на нескольких экранах: Дмитрий Беликов «лечит» программу BgInfo, исправляет режим заполнения обоев для нескольких экранов.

#diy #конкурс