Веб-страница
24.1K subscribers
1.74K photos
533 videos
1 file
3.94K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
4 причины, по которым Symfony лучше Laravel

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

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

https://tprg.ru/wtHx

#symfony #laravel
🤣74👍2
Задачи по JavaScript

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

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

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

#задачи
🤔10🤯7🤣3
Задачи по JavaScript

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

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

#задачи
👎15👍2🔥21
Для чего используется метод scrollIntoView

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

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

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

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

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

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

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

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

#javascript
👍6
Forwarded from IT Юмор
Птица, которую суждено приручить только фулстеку
👍29😁7🤔21
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация прогресса загрузки

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

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

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

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

#codepen
👍5👎31
Обработка событий CSS-переходов в JavaScript

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

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

#css
👍7🔥1
Как заниматься разработкой бесплатно и без смс

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

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

#подборка
👍71
Разница между let и var в JavaSript

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

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

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

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

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

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

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

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

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

#вакансии
🔥7👎61
Что предпочтительней монолит или микросервисы?

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

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

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

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

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

#diy #конкурс
5👍1
Повышаем производительность: обработка данных в Web Workers

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

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

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

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

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

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

#diy #конкурс
👍72
Перезапросы в микросервисах: не делайте так, как Вася

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

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

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

#статья #микросервисы
4👍2
5 советов, которые улучшат ваш код на JavaScript

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

Вы узнаете:
— что такое флатмэп и почему он лучше, чём сочетание filter и mapl;
— как правильно выстраивать цепочки методов массивов, чтобы оптимизировать код;
— зачем нужен метод reduce и в чём его преимущества перед forEach();
— как лучше использовать генераторы;
— Нативные классы JavaScript для упрощения работы с URL и другими объектами.

#javascript
👍12
Комбинаторные селекторы в CSS

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

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

#статья #css
👍122
Крик верстальщика

В этом видео фронтенд разработчик рассказывает о своих рекомендациях по улучшению верстки.

Важно создать единую политику отступов на проекте и четкую систему z-индексов. Не забывайте о принципе DRY — никогда не повторяйся при написании кода.

#видео #html #css
👍12🤔2
Будущее CSS: новейшие возможности языка декорирования в 2023 году

В современном мире цифрового дизайна UX/UI становятся все более важными. Новые фреймворки и сложные веб-приложения требуют инновационного использования CSS для создания адаптивных дизайнов.

В этой статье вы рассмотрите последние обновления CSS в 2023 году:

https://nuancesprog.ru/p/18127/

#css #html #фронтенд
👍71
Делаем доступный интерфейс: лайфхак с атрибутом aria-label

Правильное применение aria-label значительно повышает доступность веб-приложений для людей со скринридерами, нарушениями зрения и когнитивными особенностями. Это простой, но мощный инструмент для прокачки вёрстки.

О самом атрибуте и правилах его использования: https://habr.com/ru/companies/ruvds/articles/764670/

#фронтенд #html
👍12🤩1