Веб-страница
24.1K subscribers
1.74K photos
530 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
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
Как войти в GameDev JS-разработчику

Многие считают, что идеальным языком программирования для геймдева являются С++ или С#. Но на самом деле даже для JavaScript-разработчиков есть немало вакансий в этой сфере.

Если вам надоело создавать веб-интерфейсы и тянет к играм, то в этом видео автор рассказал, как он перешёл в геймдев, оставаясь верным JavaScript:

https://youtu.be/EoEdWH7hAwU

#gamedev #javascript
🔥9👍5👎3
Что нас ожидает в мире веб-разработки в 2023 году

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

Поэтому тут мы предлагаем вам посмотреть на основные тенденции в веб-разработке, которые будут актуальны в следующем году и помогут вам создать наиболее актуальный сайт:

https://yellow.systems/blog/web-development-future-trends
👍10👎3
Семантические теги: зачем нужны и где их применять

Современная вёрстка не ограничивается одними лишь div’ами, несмотря на то, что и с ними она будет выглядеть одинаково для пользователя. Сегодня применяется множество различных семантических тегов, которые улучшают чтение HTML-кода не только разработчиками, но и программами, которые ранжируют сайты в поиске, озвучивают содержимое для людей с ограничениями и так далее.

В этом видео автор подробно рассказал какие семантические теги бывают и как они работают, а также продемонстрировал примеры:

https://youtu.be/VRtiPV0M1vA

#видео #html
👍18