Pull to refresh
2
Karma
0
Rating
Зирка Андрей @BlackStar1991

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

  • Followers 18
  • Following 4

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

Website development *CSS *HTML *
Tutorial

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

Про дизайнерский select
Total votes 11: ↑9 and ↓2 +7
Views 6.7K
Comments 6

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

Website development *CSS *HTML *Graphic design *
Translation
Tutorial

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

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

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

Читать далее
Total votes 10: ↑9 and ↓1 +8
Views 9.9K
Comments 4

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

Website development *Google Chrome Browsers Web services testing *

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

Читать дальше →
Total votes 29: ↑20 and ↓9 +11
Views 43K
Comments 23

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

Web design *Website development *Graphic design *Design
Recovery mode
Translation


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


Total votes 9: ↑8 and ↓1 +7
Views 15K
Comments 3

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

Website development *Google Chrome HTML *
Recovery mode
Translation


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


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

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

Total votes 12: ↑7 and ↓5 +2
Views 11K
Comments 6

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

High performance *Website development *JavaScript *Programming *
Translation
Tutorial

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


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


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

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


items = [];

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


Читать дальше →
Total votes 56: ↑6 and ↓50 -44
Views 7.8K
Comments 51

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

Web design *Website development *Google Chrome Google API *Browser extensions
Translation

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

Total votes 12: ↑6 and ↓6 0
Views 17K
Comments 8

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

Website development *CSS *HTML *Graphic design *
Tutorial
Big image in HTML

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


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


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

Total votes 13: ↑7 and ↓6 +1
Views 2.2K
Comments 6

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

Website development *HTML *
Translation
Tutorial
iframe tag

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


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


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


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


Читать дальше →
Total votes 27: ↑27 and ↓0 +27
Views 93K
Comments 9

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

Website development *CSS *Client optimization *HTML *Graphic design *
Tutorial

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


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


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


Total votes 5: ↑5 and ↓0 +5
Views 9.2K
Comments 1

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

Website development *CSS *HTML *
Translation


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

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

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

Web design *Website development *CSS *Interfaces *Graphic design *

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

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

Website development *CSS *JavaScript *Delirium coding HTML *


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

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

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

Web design *Website development *CSS *Graphic design *
Tutorial


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

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

Website development *CSS *Client optimization *HTML *
Recovery mode
Sandbox
Все должно быть изложено так просто, как только возможно, но не проще.
А. Эйнштейн

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

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>
Читать дальше →
Total votes 21: ↑8 and ↓13 -5
Views 19K
Comments 23

Information

Rating
3,916-th
Location
Киев, Киевская обл., Украина
Date of birth
Registered
Activity