Веб-страница
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
​Разделяй и не страдай: что выбрать для микрофронтенда?

Последние несколько лет во фронтенд-сообществе активно обсуждается и используется термин «микрофронтенд». Разные компании делятся своими подходами к организации подобного архитектурного решения, но до сих пор мало описания проблематики, которую призваны решить микрофронтенды, критерии их применимости и ограничения в использовании.

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

https://habr.com/ru/company/simbirsoft/blog/698240/
👍3
​Click To Zoom Calendar

Этот проект представляет собой интерфейс календаря с интересной анимацией — при выборе конкретной даты, происходит зум на эту ячейку для просмотра подробностей, а повторный клик возвращает исходный вид календаря.

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

https://codepen.io/Hyperplexed/pen/qBVPaNV

#codepen
👍11👎1
​15 обязательных шпаргалок для веб-разработчиков

Здесь вы найдёте подборку шпаргалок для разработчиков, которые содержат основные синтаксические конструкции и команды для работы с различными технологиями и языками программирования. Шпаргалки по CSS Flexbox, Grid, React, Git, Node.js, Django и не только ждут вас тут:

https://dev.to/ishratumar/15-must-have-cheatsheets-for-developers-1n92

#шпаргалки
👍14❤3😱1
​Глобальные атрибуты HTML

Это атрибуты, которые могут быть использованы в любом HTML-элементе независимо от его типа. Они предоставляют общие свойства для всех элементов, такие как id, class, style, title, tabindex, data-* и другие, и позволяют разработчикам добавлять дополнительную информацию к HTML-элементам.

Подробнее о них:

https://doka.guide/html/global-attrs/

#html
👍14
​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