Веб-страница
24.1K subscribers
1.74K photos
532 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
Работа с геоданными в Go: как обойти ограничения OpenStreetMaps

OpenStreetMap — это не совсем карта в привычном её понимании, по сути это база данных, которая содержит огромной количество информации о точках земной поверхности, добавляемых простыми пользователями. Из-за этого возникает «разношерстность», когда один и тот же параметр может быть записан в разных форматах. И это также создаёт избыточность при решении многих задач.

В этой статье автор поделился собственным опытом создания сервиса на основе OSM на Go, который по задумке должен определять местоположение транспорта и сравнивать его фактическую скорость с разрешённой в конкретной точке маршрутка, выявляя нарушения скоростного режима. Что в итоге получилось можно прочитать здесь:

https://tproger.ru/articles/rabota-s-geodannymi-v-go-kak-obojti-ogranichenija-openstreetmaps-v-kommercheskoj-razrabotke/

#go #osm
👍7
Необычный способ создавать фигуры с помощью CSS

Посмотрите на картинку выше. Как думаете, сколько градиентов необходимо, чтоб нарисовать каждую из фигур? Если вы ответили один, то вы правы.

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

https://css-live.ru/tricks/border-image-gradients-sorcery.html

#css #фронтенд
👍8🔥3🤔3
40 полезных однострочников для JavaScript на любой случай

Нам часто приходится выполнять одни и те же действия, реализовывая какой-то код. Многие из них уже настолько стандартны, что существуют наилучшие способы их создания.

В этой подборке вы найдёте более 40 полезных однострочников, решающих ваши задачи:

https://medium.com/@dreamy-player/40-killer-javascript-one-liners-fc76edaf8439

#javascript
👍31🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
3D-лев без единой строчки JavaScript

Это анимированная картинка бегущего льва, которая выполнена без использования JavaScript. Вся анимация реализована с помощью препроцессоров Pug и SCSS.

Посмотреть, код можно здесь:

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

#codepen #javascript
👍21🔥6
React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript

Некоторые, наверное, помнят, как терялись в обилии новых слов и технологий, не понимая с чего начинать своё обучение: HTML, CSS, JavaScript, React, Canvas, Vue и прочее.

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

https://habr.com/ru/company/quarkly/blog/552214/

#react
🤨14👍3
Иллюстрация для самых маленьких
👍62🤣26🔥10😁7
Как создать MVP бэкенда

История создания бэкенда на Go для системы учёта речных перевозок. Она поможет вам лучше понять, как устроен бэкенд и, возможно, подскажет какие-то интересные решения в коде.

Подробнее:

https://tproger.ru/articles/kak-sozdat-mvp-bjekenda/

#бэкенд #go
5👍4😈1
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем разработку в VS Code уютнее с помощью милых питомцев

Добавьте немного милоты в ваш редактор кода с помощью этого расширения для VS Code, которое будет бегать у вас по экрану, а если захотите, то и поиграет с вами. Это точно круче резиновой уточки на вашем столе, ведь она не принесёт вам мячик.

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

https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

#vscode
28👎9😍8👍6🐳3🔥2
Добавляем календарь на ваш сайт с помощью плагина на ванильном JavaScript

Datedropper JS позволит вам добавить современный и простой в использовании дейтпикер. Но несмотря на его простоту, он позволяет гибко настраивать внешний вид, формат, диапазоны дат и многие другие аспекты.

Варианты дизайна и оформления, а также подробная информация тут:

https://felixg.io/products/datedropper-javascript

#библиотека #javascript #html
👍14❤‍🔥1
Как магические методы в Python помогают прокачать ваш код?

Магические методы — это специальные методы, с помощью которых вы можете добавить в ваши классы «магию». Они всегда обрамлены двумя нижними подчеркиваниями (например, __init__ или __lt__).

Магические методы в языке программирования Python нужны, чтобы реализовывать свойства объектов при их взаимодействии. Вместе с Андреем Мальчуком, backend-разработчиком КРОК, раскроем их «магию» и остановимся на каждом из методов подробно:

https://tprg.ru/Tp52

#python
👍7💯1
This media is not supported in your browser
VIEW IN TELEGRAM
Красивый параллакс, работающий от скролла

В этом codepen-проекте автор реализовал анимацию смены времени суток с помощью скролла. Для создания анимации использовалась библиотека GSAP. Посмотреть, как это работает можно здесь:

https://codepen.io/isladjan/pen/abdyPBw

#codepen
🔥52👍6😍2
Можно ли создать игру в духе Legend of Zelda весом всего 13 килобайт?

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

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

https://medium.com/hypersphere-codes/how-i-created-a-gameboy-like-game-in-13kb-5905bf6166b2

#javascript #gamedev
👍17
Как повысить скорость разработки с помощью общедоступных функций JavaScript

Это практическое руководство поможет вам писать лаконичный код и повторно использовать вспомогательные функции JS в проектах. Вы сможете переносить их без копирования из проекта в проект, упрощая себе работу в будущем. При этом NPM вам не потребуется.

Подробнее:

https://habr.com/ru/company/rshb/blog/687868/

#javascript
👍16👎3
Как сделать навигацию на сайте документации

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

Подробнее:

https://tproger.ru/articles/krov-pot-i-slezy-kak-ja-peredelal-navigaciju-na-sajte-dokumentacii-i-v-chjom-profit-peredelki/

#ui
🍾3
Мини-курс по Bootstrap

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

Смотрим тут:

Часть 1 — https://youtu.be/8Ti55TgqMZU
Часть 2 — https://youtu.be/YW05WfRKUjI
Часть 3 — https://youtu.be/FONwSmS7zCs

#bootstrap #фронтенд
👍29👎7🤡3
Интервью с бэкендером: плюсы, минусы, подводные камни профессии

Евгений — backend-разработчик digital-студии INDEX. Уже несколько лет он занимается тем, о чём мечтал в детстве. В этом интервью он ответил на вопросы о том, как попал в профессию, с какими сложностями столкнулся, плюсах и минусах профессии и многом другом.

Почитать можно здесь:

https://vc.ru/dev/507107-intervyu-s-backender-om-kak-osvoitsya-chem-pridetsya-zanimatsya-plyusy-i-minusy-professii-a-takzhe-sovety-novichkam

#бэкенд #интервью
👎7👍5
Возможности и перспективы WebAssembly

WebAssembly был представлен почти 10 лет назад и является одной из важнейших разработок для веб-сферы. Он решил такую проблему, как компиляция кода в код (транспиляция). Также он предложил использовать более эффективный байт-код.

Но почему же он тогда до сих пор не убил JavaScript? В этой статье автор порассуждал на тему возможностей Wasm, его перспектив и недостатков:

https://nuancesprog.ru/p/16336/

#wasm

А что вы думаете об этой технологии?
👍5🤡3
Идеи пет-проектов для фронтенд-разработчика

Лучшим способом отточить свои навыки программирования была и остаётся практика. Но если реальных проектов у вас пока нет, а практиковаться хочется, то лучшим решением будет придумать свой собственный пет-проект.

В этой статье вы найдёте несколько идей, который можно реализовать — от просто калькулятора до аналога Spotify и не только:

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

#фронтенд
👍34❤‍🔥2🍓2
Когда перенёс кусок кода из прошлого проекта в новый:
😁64👍13🤔9
This media is not supported in your browser
VIEW IN TELEGRAM
Карточка с ховером запуска

Эту карточку вы сможете применить у себя на сайте. При наведении на неё изображении увеличивается, а также появляется кнопка пуск для запуска медиа. Реализована на HTML и CSS.

Подробности реализации здесь:

https://codepen.io/jh3y/details/NWMGxdL

#codepen
👍13👎2❤‍🔥1🌭1
Почему, мистер Андерсон, почему?
🔥45😁29👍4👎1