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

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​Highlight.js — библиотека для выделения синтаксиса

Highlight.js — это библиотека на JavaScript, которая позволяет легко подсвечивать синтаксис кода на веб-страницах. Она поддерживает более чем 180 языков программирования и настроена для автоматического обнаружения языка. Библиотека также имеет возможность настройки стилей подсветки кода, что позволяет адаптировать её для различных дизайнерских концепций веб-сайтов.

Подробнее:

https://highlightjs.org/

#библиотека #javascript
👍8
​Представляем Cube CSS: альтернативную методологию CSS

Cube CSS — это новый подход к CSS, который может быть полезен для веб-разработчиков, и представляет новый взгляд на организацию и поддержку кода CSS. В статье представлены конкретные примеры использования Cube CSS и сравнение с другими методологиями CSS, которые помогут вам понять преимущества и недостатки этого подхода.

https://blog.logrocket.com/cube-css-alternative-css-methodology/

#css
👍9👎1
S в HTTPS означает Shapka
😁70🤣11👍4👎2🔥2🍾1
​Десять советов по улучшению CSS-переходов и анимации

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

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций :

https://joshcollinsworth.com/blog/great-transitions

#css
👍12
​Рендеринг данных в реальном времени с помощью Vue, Node.js и socket.io

Сокеты обычно лучше всего подходят для обмена данными в реальном времени между клиентами и серверами. В этом руководстве вы узнаете, как отображать данные в реальном времени через сервер и как используются сокеты. Вы сможете создать простую блочную игру, используя Vue.Js, Node.Js, и Socket.io, чтобы увидеть все нюансы применения этих технологий вместе:

https://blog.openreplay.com/rendering-real-time-data-with-vue-node-and-socket-io

#vue #nodejs #socketio
👍7❤1
​Как создать игру Tetris с помощью Three.js

В этом руководстве вы создадите не просто Tetris, а его 3D-версию. А поможет нам библиотека Three.js, которая идеально справляется с рендерингом 3D-объектов. Подробнее:

https://habr.com/ru/company/ruvds/blog/680666/

#threejs #gamedev
👍16🤣1
​Бесконечная прокрутка на сайте

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

https://evgeniiray.medium.com/infinite-scrolling-in-web-ultimate-guide-b698124b3172

#фронтенд
👍9
​Ищем человека, который будет строить сообщество по темам Python / Data Science / AI в Tproger

Если вы довольно неплохо разбираетесь в этих темах и при этом видите в себе желание рассказывать об этом другим разработчикам и вовлекать их в горячие обсуждения — возможно, это именно ваша вакансия.

Подробности, тестовое задание и отклик здесь: https://tprg.ru/GEZL
​Как прошла ваша неделя? Поделитесь своими успехами с нами

Придумали крутую фичу? Поймали неуловимый баг или закончили пет-проект? Расскажите о своих успехах, а мы за вас порадуемся!

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

https://tproger.ru/articles/chto-vy-delali-na-etoj-nedele-post-hvastovstva-za-20-24-marta/
​Креативное оформление списков

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

https://web.dev/creative-list-styling/
❤5
​HTML-формы и валидация с помощью Pristine.js

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

Pristine.js позволяет упростить и ускорить процесс валидации HTML форм на веб-сайте. В этой статье вы узнаете, как использовать Pristine.js для проверки введённых пользователем данных в реальном времени, в том числе на пустые поля, правильный формат email и телефонных номеров, длину строки и т.д.

https://blog.openreplay.com/html-form-validation-with-pristinejs/

#html #pristinejs
👍10❤1🤣1
​Работаем на PHP в функциональном стиле с помощью IterTools PHP

Бесплатная опенсорсная библиотека IterTools PHP разработана автором другой популярной библиотеки MathPHP. IterTools вносит множество полезной функциональности в язык, реализуя удобную и гибкую работу с итерируемыми сущностями в функциональном стиле — в духе itertools из Python.

Все методы библиотеки поддерживают работу с любыми итерируемыми сущностями (array, Generator, Iterator, Traversable), что выгодно отличает её от элементов функционального программирования, идущих в комплекте с языком (они, как правило, работают только с одним типом данных).

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

Подробности, справочник на русском и инструкция тут:

https://github.com/markrogoyski/itertools-php

#php #библиотека
👍1
Как программисту сохранить зрение?

В 1999 году появилось понятие компьютерного зрительного синдрома. Основные формы: синдром сухого глаза и хронического утомления. Если вы длительно работаете за компьютером, то вы тоже можете быть в зоне риска.

Действительно, сейчас есть 4K мониторы, крутые очки, но усталость глаз рано или поздно может появиться у каждого. Собрали 7 крутых советов для программистов, которые помогут сберечь зрение:

https://tproger.ru/articles/7-prostyh-sovetov-dlja-programmista-kotorye-sberegut-ego-zrenie/

#it #здоровье
👍25❤1
​Стрессовое интервью: 8 фишек рекрутёров

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

https://tproger.ru/articles/stressovoe-sobesedovanie-8-fishek-rekrutjorov/

А как вы считаете, допустимо ли это? Поделитесь своим мнением в комментариях.
💩14❤3👍2👎2
​Энтузиаст соединил ChatGPT-4 с мозгом с помощью JavaScript

В качестве прослойки между мозгом и ChatGPT использовался нейроконнектор Crown, который преобразует мозговые волны в код, который затем можно использовать как угодно. Сперва разработчик научил систему распознавать, когда он представляет, как откусывает лимон. А затем пошёл дальше и с помощью SDK на JS настроил систему на общение с ChatGPT.

Подробнее об этом он рассказывает в своём видео:

https://youtu.be/-HYbFm67Gs8

#javascript #chatgpt #видео
😱20👍7🤯7❤2
​Превращаем старый телефон на Android в веб-сервер

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

В этой статье вы узнаете, как запустить на Android-смартфоне веб-сервер, который по характеристикам сможет составить конкуренцию некоторым базовым облачным решениям:

https://habr.com/ru/company/sportmaster_lab/blog/683242/

#бэкенд #интересное
👍13😐7❤1
​Почему стоит использовать Babel в разработке. Инструкция по написанию Babel плагина

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

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

https://tproger.ru/articles/pochemu-stoit-ispolzovat-babel-v-razrabotke-instrukciya-po-napisaniyu-babel-plagina/

#babel #javascript
👍9❤3
​Изучаем CSS Flex и Grid в фэнтезийном путешествии

Если хотите отточить свои навыки в позиционировании объектов с помощью флексов и гридов, при этом с интересным сеттингом, то вы по адресу. На сайте codingfantasy.com вы можете отправить в путешествие и помочь королю Артуру бороться со злом, используя Flex Box или спасти эльфа из лап демонов с помощью CSS Grid.

Уровней достаточно, чтобы стать настоящим CSS-гуру, проверьте сами:

https://codingfantasy.com/games

#css #игры
👍16❤6🤣2
​Юлия Миоцен: Топ-10 CSS-свойств аниматора

Юлия уже много лет занимается CSS рисунками и анимациями. Её демки неоднократно попадали в топ codepen и, возможно, вы их даже видели. За время работы у Юли образовался топ самых любимых, интересных и полезных CSS-свойств, без которых не обходится ни одна демка.

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

https://youtu.be/fFRADs5R9ME

#видео #css
❤15👍4😐1
​9 способов разрядить атмосферу перед созвоном

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

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

https://tproger.ru/articles/top-9-veshhej-pered-mitom/
😁4❤1👎1