Веб-страница
22.1K subscribers
2.18K photos
561 videos
2 files
4.46K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Управляемая игральная кость на CSS

Данная игральная кость выполнена без применения JavaScript, не смотря на то, что здесь предусмотрено управление её положением. Вся работа выполнена с помощью препроцессоров Pug и SCSS. Подробнее:

https://codepen.io/HunorMarton/pen/mdERrLy

#codepen
❤3👍1
​Использование HTTPS в вашей среде разработки

Протокол HTTPS сегодня является обязательным для любого веб-сайта или веб-приложения. Поэтому даже в процессе разработки лучше не использовать http://localhost, а перейти на современный протокол. Но современность не основная причина.

В чём важность использования HTTPS в процессе разработки и как его настроить, узнаете здесь:

https://auth0.com/blog/using-https-in-your-development-environment/

#https #безопасность
👍11👏2😍1
​Когда нашёл свои старые проекты, на которых учился кодить:
😁67🤡23👍9💩1
​Почему Vue (по умолчанию) более эффективен, чем React

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

https://medium.com/@gui.milon/why-vue-is-by-default-more-performant-than-react-34e1d9bbade6

#vue #react #фронтенд
👍22👎7👏4
​Библиотека OpenLayers

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

Подробнее:

https://openlayers.org/

#библиотека
👍12🔥3
​Собираем и деплоим в Kubernetes приложение на Node.js с помощью werf

В этой статье рассмотрели, как собрать Docker-контейнер Node.js-приложения и развернуть его в Kubernetes, используя werf. А также вы узнаете, как потом легко накатить изменения в коде и правильно организовать выдачу asset’ов:

https://tproger.ru/articles/kubernetes-node-js-werf/

#devops #kubernetes #nodejs
👍4
​Заменяем NPM на DUM

DUM заменяет привычные npm run и npx, значительно сокращая время запуска npm и установки пакетов. Написан он на Rust. Попробуйте сами и убедитесь:

https://github.com/egoist/dum

#инструмент #dum #npm
🥴27👍12🤮1
​Если хотите изучать топовый язык программирования, то Go!

В этом вам поможет новый Telegram-канал «Go in Action», где ежедневно появляются полезные материалы на русском и английском языках. Всё самое лучше по языку Go собрано здесь: @go_in_action.
🤡17👍7👎2❤1
Бэкендеры-питонисты напряглись...
🤡64👍16❤2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный рейтинг

Этот рейтинг выполнен с помощью SVG и библиотеки GSAP. С помощью него простой системе оценок добавляется некоторый эмоциональный отклик.

Посмотреть как это реализовано можно здесь:

https://codepen.io/ksenia-k/details/JjjyBoL

#codepen
🥰38👍7🔥6😁6👎1
​Введение в Deno: лучше ли он, чем Node.js?

Deno — это среда выполнения JavaScript и TypeScript, похожая на Node.js, но построенная на Rust и движке JavaScript V8. Он был создан человеком, первоначально создавшим Node.js, как работа над ошибками.

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

https://blog.appsignal.com/2022/02/09/an-introduction-to-deno-is-it-better-than-nodejs.html

#nodejs #deno
👍9
​​Карточки погоды

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

https://codepen.io/ste-vg/pen/GqaZbo

#codepen
🔥72👍24🌚7❤2😁2
​Почему бэкенд — это боль? 10 вопросов бэкенд-разработчику

Алексей — бэкенд-разработчик в IT-компании Lad. Ему задали 10 каверзных вопросов о его работе и вот, что он ответил:

https://youtu.be/EcCZ18wj6Mw

#видео #бэкенд

С чем согласны, а с чем — нет? Поделитесь в комментариях.
👍15
Без БД никак, получается
👍120😁16
​TypeScript: перебор объектов

В TypeScript редко возникает проблема получения доступа к свойству объекта путём перебора его ключей. Это шаблон, который часто встречается в JavaScript, но TypeScript. При этом, в некоторых ситуациях TypeScript может вести себя странно. Например, при написании вот такой строки: Object.keys(person).map(k => person[k]).

Существуют разные способы решения этой проблемы, но давайте обо всём по-порядку:

https://fettblog.eu/typescript-iterating-over-objects/

#typescript
🔥12👍5
​Введение в SVG-анимации для верстальщиков

Время идёт, технологии меняются, но SVG-анимации и не думают исчезать. Но не смотря на время, работа с SVG многим по-прежнему кажется сложной и запутанной.

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

https://habr.com/ru/post/667116

#svg
👍18
​Три слоя градиента для одного слайдера

Эта статья посвящена созданию Angular-компонента слайдера с минимальным использованием JavaScript. При этом здесь рассматривается и вопрос доступность, интересное решение с многослойным градиентом, CSS-хитрости и так далее.

Подробнее:

https://habr.com/ru/company/tinkoff/blog/667254/

#angular #фронтенд #css
❤10👍3
This media is not supported in your browser
VIEW IN TELEGRAM
«Научный» слайдер для сайта

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

Посмотреть код и протестировать можно здесь:

https://codepen.io/chrisgannon/pen/rvBMmM

#codepen
👍19👏4🔥1
Бэкендеры боятся трудностей
🤡85😁39🕊9👎4👍2💩1
​Go, Allure и HTTP, или Как мило тестировать HTTP-сервисы на Go

Все мы привыкли к лёгкому написанию тестов на Python и Java — это основные языки автотестировщиков с богатым инструментарием утилит и всего, что упрощает жизнь.

А что делать в случае с Go? Если писать тесты на других языках для Go, то возникают проблемы с ревью. Но решение есть — опенсорс-беблиотека CUTE в BDD-стиле, которая облегчает тяготы создания автотестов и упрощает переход на Go:

https://t.me/go_in_action/697

#go #http
👍6👎1