WebDEV
8.96K subscribers
2.21K photos
12 videos
2.72K links
Сообщество веб-разработчиков.

На канале можно найти: видео-уроки, полезные статьи, новости из мира IT и веб-разработки.

Ссылка: @Portal_v_IT

Сотрудничество: @oleginc, @tatiana_inc

Канал на бирже: telega.in/c/webb_dev

РКН: clck.ru/3L2oTf
Download Telegram
Эффект увеличения при наведении — отличный способ привлечь внимание к кликабельному изображению. При этом сама картинка может немного масштабироваться, но ее размеры не должны меняться.

Увеличение изображений при наведении

#css #tips
Такое часто случается с проектами, доставшимися «по наследству» от предыдущих разработчиков. Вам уже нужно писать новые блоки, а в старой базе over 9 000 строк кода. Как быстро освоиться и не утонуть юному падавану?

Советы для быстрого понимания чужого кода

#tips #programming
Vanilla JavaScript не типизирован по своей натуре. Можно даже назвать его «умным», поскольку он способен вычислить, что является числом, а что строкой.

Это упрощает запуск JavaScript кода в браузере или при работе Node.js. Однако он уязвим для многочисленных ошибок во время исполнения (рантайм), которые могут испортить ваш пользовательский опыт использования.

Если с вами когда-либо случалось то, что будет описано далее, то вы только выиграете, если будете применять систему типов.

Как система типов улучшает ваш код на JavaScript

#js #article
Скажем, вы хотите сделать посещенные ссылки серыми и уменьшить их размер, для того чтобы показать пользователю что эта ссылка уже была посещена. Окрашивание ссылки в серый цвет, как и предполагалось, уведомляет нас о том что она уже была посещена, но размер шрифта остался прежним!

Так происходит, потому что изменение размера шрифта может быть причиной уязвимости! Если CSS сможет изменить размер шрифта, я могу сказать посещали ли Вы pornhub.com. Но как?

Почему нельзя установить размер шрифта у посещенной ссылки

#css #security
​​Inter — шрифт, который сделал Rasmus Andersson, он не шрифтовой дизайнер, он больше про UX/UI, стоял у истоков Spotify, а сейчас в Figma. Но шрифт получился классный и хорошо проработанный. Кириллица есть! И он бесплатный!

rsms.me/inter

#font #ui #ux #design
Эффект параллакса в веб-дизайне очень популярен: он может здорово оживить страницу при прокрутке. При этом параллакс изображение CSS будет оставаться фиксированным несмотря на перемещение контента.

Как создать эффект параллакса

#css #tips #article
JavaScript, несмотря на его многочисленные недостатки, возможно, является самым лучшим языком программирования для начинающих разработчиков, и лучшим языком, с которым могут повозиться дети. Так это или нет?

JavaScript - лучший язык программирования для начинающих

#js #article
Если вы хотите быстро добавить вашему веб-сайту популярный «ночной режим», обратите внимание на CSS фильтры invert и hue-rotate. В статье рассказывается, как ими пользоваться.

Мгновенный ночной режим

#css #tips
​​Пользователи GitHub смогут финансово поощрить разработчиков — для этого компания добавит кнопку «спонсировать». В течение первого года работы сервиса разработчики смогут забирать себе всю сумму пожертвований, затем GitHub начнёт брать процент за приём платежей.

Кроме того, в первый год GitHub будет удваивать сумму каждого пожертвования. Для этого компания запустила фонд объёмом $5000 на разработчика.
​​Google обновила дизайн поискового сервиса для мобильных устройств. Теперь в карточках поисковой выдачи будут отображаться заголовки, а рядом — логотипы сайтов.

#news #design #google
Специалисты «Собаки Павловой» рассказывают, как сделали дизайн сайта «Электронного города».

Новосибирский интернет-провайдер «Электронный город» помешан на качестве клиентского обслуживания. Да, это редкость! Сайт получился такой же — не модный, не впаривающий, а отвечающий на вопросы клиентов.

Сайт амбициозного регионального провайдера

#article #promo
Лучший фреймворк 2019 года?
Anonymous Poll
18%
Angular
47%
React
36%
Vue
До CSS3 обрезать изображения было очень непросто, если помните. Но теперь у нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

Анимация кадрирования фото

#css #tips #article
Если вы работали с Photoshop, то знаете, насколько мощным инструментом могут быть режимы смешивания цветов. Оказывается, большинство из них могут быть использованы и для создания различных CSS-эффектов.

Режимы смешивания

#css #tips #article
Недавно вышла Node 12 с кодовым именем Erbium, долгосрочная поддержка которой (LTS) продлится с октября 2019 по апрель 2022.

В новой версии много вкусностей и улучшений рантайма. Помимо этого, учитывая, что под капотом V8, нода также получит все улучшения движка.

Что нового в Node 12

#js #node #backend
Вы используете Node?
Anonymous Poll
39%
Да, использую часто
27%
Редко
34%
Нет
​​Tessaract.js — это мощная JavaScript библиотека для распознавания текста на картинке. Она автоматически определяет расположение текста, распознает более 60 языков включая китайский, арабский и русский.

Демо | GitHub

#js
Здесь будут рассмотрены некоторые особенно горячие темы, поднятые на мероприятиях NgConf и Google I/O 2019. Уверен, что вам любопытно будет узнать о том, чего можно ждать от Angular 8.

Angular 8

#angular #article #news
​​OverlayScrollbars — замечательная JavaScript библиотека, которая изменяет внешний вид скроллбаров на сайте. Отлично задокументированное API с возможностью кастомизации и поддержкой всех современных браузеров.

Демо | GitHub

#js #scroll
Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. На сегодняшний день уже многие поисковые системы при ранжировании сайтов, начали учитывать скорость загрузки страницы. Поэтому чем быстрее будет грузиться Ваш сайт, тем больше посетителей Вы можете получить с поисковых систем, а, следовательно, и больше денег на этом заработать.

Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.

10 советов о том, как увеличить скорость загрузки страницы

#web #frontend #backend