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

Не так давно мы рассказывали про эффект «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 #конкурс

​Повышаем производительность: обработка данных в Web Workers

Web Worker — инструмент, предоставляемый браузерами, который позволяет разработчикам запускать дополнительный скрипт в фоновом режиме.

Подробнее о работе с Web Workers читайте в полном тексте статьи: https://habr.com/ru/articles/767494/

#статья #javascript

​Всё больше и больше талантливых разработчиков участвуют в нашем конкурсе пет-проектов!

Читайте кейсы ещё одной тройки игроков:

— PHP-фреймворк для веб-приложений: многогранная работа — полноценный костяк для вашего следующего сайта. Фреймворк содержит базовые компоненты вроде авторизации, Captcha, логирования и позволяет дружить с REST API;
— Локальный деплой проектов в пару кликов: на этот момент — лидер конкурса, терминальный аналог Docker. Определяет CMS (Laravel, WordPress, Bitrix) и при запуске отдаёт локальную ссылку вида site.com.localhost;
— Три React-библиотеки для фронтенда: создание стилизованных компонентов и последующий их импорт из .css, управление состоянием апплета с хуками и заменятор JSX на лямбды. Пожалуй, самая объёмная работа из всех.

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

#diy #конкурс

​Перезапросы в микросервисах: не делайте так, как Вася

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

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

Читать: https://habr.com/ru/companies/yandex/articles/762678/

#статья #микросервисы