​Погружение в псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after часто используется во фронтенд-разработке. Но не все знают сколько вариантов их применения существует.

В этой статье рассматриваются интересные способы использования этих псевдоэлементов с примерами:

https://tprg.ru/OHSq

#фронтенд #css

8 практичных хитростей веб-разработчика

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

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

https://tprg.ru/pnwH

#фронтенд

Все ведь наступали на эти грабли, правда?

Сегодня мы поделились с вами статьёй о 8 хитростях для веб-разработчика. А какие приёмы знаете вы? Может какие-то придумали вы сами и теперь они вас выручают? Давайте поделимся ими в комментариях и обсудим!

#чат

​7 советов новичку, изучающему Vue.js

Vue — отличный фреймворк для фронтенда. Он прост в изучении, удобен в использовании и обладает большой экосистемой.

Если вы начали изучать Vue, то эти советы помогут вам быстрее в нём освоиться:

https://tprg.ru/Xn4H

Кстати, тут есть опытные разработчики на Vue? Напишите, чтобы вы ещё посоветовали новичкам.

#vue #javascript

Ну что, проверим ваши познания JavaScript?!

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

На многих сайтах присутствует возможность загружать свои собственные файлы. А вы умеете работать с файлами в HTML?

Если нет, то этой статье вы узнаете несколько советов о том, как можно реализовать загрузку файлов в HTML и какие нюансы при этом существуют, а также сможете изучить готовые примеры:

https://tprg.ru/blrn

#html

TypeScript не щиплет глазки

​Дорожная карта фронтенд-разработчика в 2021 году

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

https://tprg.ru/RkeF

#видео #фронтенд

Отладка проблем с перерисовкой макета, вызванных переходом CSS

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

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

https://tprg.ru/a2wb

#css #фронтенд

Создание чата на React с использованием Socket.IO

В этой статье вы узнаете, как создать свой собственный чат, в котором можно удалять собственные сообщения, выбирать комнату для общения, хранить сообщения в локальной БД и многое другое.

В проекте используются React, библиотека SocketIO и NodeJS. Код и подробности тут:

https://tprg.ru/rsDW

#react

​История фронтенда. Браузер, который умел всё

Что такое 30 лет для истории? Просто мгновение. Но для веба 30 лет — это гигантский прогресс от зарождения этого направления в IT и простейших текстовых сайтов до современных веб-интерфейсов, PWA и прочего.

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

https://tprg.ru/p4hk

#видео

​Мобильное приложение для Android на JavaScript

Если вы любите JavaScript, а веб-разработки вам уже недостаточно, то в этой статье вам расскажут, как написать собственное приложение для Android с помощью JavaScript, Android Studio и Apache Cordova:

https://tprg.ru/bpYC

#javascript

​Разработка PWA с поддержкой распознавания лица и голоса

Благодаря технологии PWA современные сайты уже способны заменить некоторые стандартные мобильные и десктопные приложения. А с возможностью добавить поддержку распознавания лица и голоса отличий от привычных приложений становится ещё меньше.

Как добавить такую возможность — в статье:

https://tprg.ru/VRgX

#pwa

Форма ввода пароля

Посмотрите какая стильная форма для ввода пароля! Она реагирует на сложность пароля и запускает соответствующую анимацию при соответствии уровню безопасности. Изображения выполнены с помощью SVG.

Изучить код и попробовать форму можно тут:

https://tprg.ru/t27g

#фронтенд

​7 вопросов по ключевому слову this в JavaScript

Насколько хорошо вы знаете, как работает this в JavaScript? Вопросы по this можно часто услышать на собеседованиях, поэтому необходимо знать, как именно он будет работать в той или иной ситуации.

В этой статье автор разобрал семь вопросов по this с понятными пояснениями:

https://tprg.ru/kQea

#javascript

Выдвижные панели Cupertino Panes

Хотим поделиться с вами бесплатной библиотекой Cupertino Panes, которая позволяет создавать выдвижные окна на сайте, как в современных приложениях от Google или Apple.

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

Ознакомиться подробнее с документацией и самим проектом можно на странице репозитория:

http://bit.do/fPpsw

#библиотека #javascript

Подборка CodePen-проектов ко дню Марио

Каждый год десятого марта во всём мире празднуют день Марио, потому что эта дата похожа на его имя — Mar10. А ещё в этом году юбилей у знаменитой игры «Супербратья Марио», ей исполняется 35 лет!

В честь этого события мы подготовили подборку CodePen-проектов, так или иначе связанных со знаменитым водопроводчиком:

— работа медиа-запросов на примере Марио:
https://tprg.ru/rvoU

— one-div Марио на Pug и SCSS:
https://tprg.ru/V8qz

— мини-игра на React с персонажами игры:
https://tprg.ru/lxgJ

— анимированный SVG-Марио:
https://tprg.ru/1059

— переключение элементов сайта с помощью Марио:
https://tprg.ru/K1JI

— no-div Марио на SCSS:
https://tprg.ru/YcK6

— 3D-Марио:
https://tprg.ru/plyW

Вот такие айтишные мемы делают в канале IT Юмор.

Посмотрите сами и подписывайтесь, если понравится: https://t.me/joinchat/1FQd8BTdkYIwZjZi