Как стать автором
Обновить
-1
Карма
0
Рейтинг
Зирка Андрей @BlackStar1991

Увлеченный сайтодел

Дизайнерский Multiselect на протеинах

Разработка веб-сайтов *CSS *HTML *
Туториал

Те из верстальщиков кто часто клепает формы регистрации или обратной связи обязательно столкнутся с задачей по выводу множественного выбора результатов - multiselect. К сожалению, не все элементы тега <select> все ещё можно из коробки стилизовать по желанию дизайнера. В этом маленьком уроке я хотел бы поделиться своим опытом решения данной проблемы на базе знания CSS и немного ванильного JS.

Про дизайнерский select
Всего голосов 11: ↑9 и ↓2 +7
Просмотры 14K
Комментарии 6

Три способа создания клякс с помощью CSS и SVG

Разработка веб-сайтов *CSS *HTML *Графический дизайн *
Туториал
Перевод

Кляксы (Blob) - это гладкие, аморфные, желеобразные формы, обычно  причудливые и забавные. Их можно использовать в качестве элементов иллюстраций и фоновых эффектов в сети.

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

У нас есть несколько способов сделать кляксы. Давай проверим их.

Читать далее
Всего голосов 10: ↑9 и ↓1 +8
Просмотры 11K
Комментарии 4

Обходим проверку сертификата SSL

Разработка веб-сайтов *Google Chrome Браузеры Тестирование веб-сервисов *

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

Читать дальше →
Всего голосов 29: ↑20 и ↓9 +11
Просмотры 97K
Комментарии 23

41 термин в дизайне, полезный для UX-исследователя

Веб-дизайн *Разработка веб-сайтов *Графический дизайн *Дизайн
Recovery mode
Перевод


Работа с UX-дизайнерами и знакомство с их словарным запасом — это почти изучение нового языка. Давайте посмотрим на 41 часто используемый дизайнерский термин. Для лучшего взаимопонимания в команде.


Всего голосов 9: ↑8 и ↓1 +7
Просмотры 24K
Комментарии 3

Пришло время ленивой загрузки закадровых <iframe>

Разработка веб-сайтов *Google Chrome HTML *
Recovery mode
Перевод


Нативная отложенная загрузка для изображений была добавлена в Chrome 76 через атрибут loading, а затем пришла и в Firefox. Мы рады сообщить, что встроенная отложенная загрузка для iframe теперь стандартизирована и также поддерживается в браузерах на основе Chrome и Chromium.


<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Встроенная lazy-loading загрузка iframe откладывает загрузку закадровых элементов iframe до тех пор, пока пользователь не прокрутит их рядом. Это сохраняет данные, ускоряет загрузку других частей страницы и уменьшает использование памяти.

Всего голосов 12: ↑7 и ↓5 +2
Просмотры 16K
Комментарии 6

Почему не надо удалять все элементы массива, переназначая его на [ ]?

Высокая производительность *Разработка веб-сайтов *JavaScript *Программирование *
Туториал
Перевод

Очень часто бывают моменты, когда мы хотим удалить все элементы массива, как вариант, у нас есть список задач, и мы хотим удалить все задачи одновременно.


Рассмотрим такой список элементов:


let items = ["tea", "coffee", "milk"];

Чтобы удалить все элементы из массива, мы устанавливаем его значение в пустой массив


items = [];

Это работает отлично, и вы обнаружите, что данный пример используют постоянно. Но с этим есть проблема ...


Читать дальше →
Всего голосов 56: ↑6 и ↓50 -44
Просмотры 8.1K
Комментарии 51

10 лучших расширений Chrome для дизайнеров

Веб-дизайн *Разработка веб-сайтов *Google Chrome Google API *Расширения для браузеров
Перевод

Как дизайнеры, мы почти всегда ищем новые советы, хитрости и инструменты, которые помогут ускорить и улучшить наш рабочий процесс. После нескольких месяцев тестирования расширений Chrome я составил список из 10 лучших расширений и плагинов для дизайнеров.

Всего голосов 12: ↑6 и ↓6 0
Просмотры 23K
Комментарии 8

Якорная ссылка на протеине с анимацией

Разработка веб-сайтов *CSS *HTML *Графический дизайн *
Туториал
Big image in HTML

В статье речь пойдет о том, как подключать в web страницу объемные элементы анимации, и не поломать все и сразу.


Если вы очень переживаете за показатели Google Page Speed в разработке сайтов, и у вас подгорает за каждый лишний килобайт не стоит продолжать читать данную статью.


Тех же, кого не пугают большие размеры, и любит риск прошу под кат ;)

Всего голосов 13: ↑7 и ↓6 +1
Просмотры 2.5K
Комментарии 6

Исчерпывающий путеводитель по тегу iframe

Разработка веб-сайтов *HTML *
Туториал
Перевод
iframe tag

Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.


Хотя все современные браузеры поддерживают данный тег, многие разработчики пишут бесконечные статьи, не советуя им пользоваться. Я считаю, что плохая репутация, которая сформировалась, около данного тега не должна мешать вам использовать его. У данного тега есть много хороших примеров применения. Кроме того, iframe не так сложно защитить, поэтому вам не придется беспокоиться о заражении компьютера вашего пользователя.


Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.


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


Читать дальше →
Всего голосов 27: ↑27 и ↓0 +27
Просмотры 148K
Комментарии 9

Клади плитку эффективно ( Про CSS, SVG, pattern и другое)

Разработка веб-сайтов *CSS *Клиентская оптимизация *HTML *Графический дизайн *
Туториал

Статья про ремонт квартиры, про эффективное использование графических ресурсов для современных устройств. От смарт часов до телевизоров на стену.


Сказ о том, как вставлять фоновые повторяющиеся изображения страниц, что бы всем было хорошо.


Ну, что готовы поиграть ..? Тогда погнали


Всего голосов 5: ↑5 и ↓0 +5
Просмотры 11K
Комментарии 1

А есть ли случайные числа в CSS?

Разработка веб-сайтов *CSS *HTML *
Перевод


CSS позволяет создавать динамические макеты и интерфейсы в Интернете, но как язык разметки он является статическим — после установки значения его нельзя изменить. Идея случайности не обсуждается. Генерация случайных чисел во время выполнения — это территория JavaScript, а не CSS.

Или нет? Если мы учтем небольшое взаимодействие с пользователем, мы на самом деле можем генерировать некоторую степень случайности в CSS. Давайте взглянем!
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 9.5K
Комментарии 2

Figma — простое решение для дизайнера, сложное решение для верстальщика

Веб-дизайн *Разработка веб-сайтов *CSS *Интерфейсы *Графический дизайн *

Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.
Читать дальше →
Всего голосов 26: ↑19 и ↓7 +12
Просмотры 190K
Комментарии 41

Машинное обучение контент менеджера

Разработка веб-сайтов *CSS *JavaScript *Кодобред HTML *


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

Разумеется, вы можете подойти к коллеге, и сказать, что он/она по невнимательности забыл поставить картинку, но ведь это же не наш метод.
Читать дальше →
Всего голосов 33: ↑20 и ↓13 +7
Просмотры 4.2K
Комментарии 4

Камень в огород дизайнера

Веб-дизайн *Разработка веб-сайтов *CSS *Графический дизайн *
Туториал


*Статья предназначена для начинающих дизайнеров интернет-магазинов, а также frontend разработчикам способных как-то повлиять на оных. Если Вы не относитесь к этим категориям, можете не тратить свое время. Я предупредил.
“ Все ошибки которые допустил frontend разработчик ему вернутся при сборке сайта, все недоработки которые поленился прорисовать дизайнер будет додумывать верстальщик ”
Читать дальше →
Всего голосов 12: ↑8 и ↓4 +4
Просмотры 9.2K
Комментарии 20

Размещение иконок на странице сайта. Делать проще, поддерживать легче

Разработка веб-сайтов *CSS *Клиентская оптимизация *HTML *
Recovery mode
Из песочницы
Все должно быть изложено так просто, как только возможно, но не проще.
А. Эйнштейн

Добрый день уважаемые разработчики. Довольно часто просматривая копаясь в чужом коде я наталкиваюсь на такое написание кода для кнопки с иконкой.

HTML

<div class="bl_button__wrapp">
  <div class="bl_button">
      <i class="fa fa-bars" aria-hidden="true"></i>
      <span class="bl_button__text">menu</span>
    </div>
</div>
Читать дальше →
Всего голосов 21: ↑8 и ↓13 -5
Просмотры 22K
Комментарии 23

Информация

В рейтинге
Не участвует
Откуда
Киев, Киевская обл., Украина
Дата рождения
Зарегистрирован
Активность