Search
Write a publication
Pull to refresh
0
0
Send message

Может перестанем называть доступностью UX и юзабилити?

Reading time3 min
Views2.6K

Осторожно! Слово «доступность» встречается в этой статье 15 раз.


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

Читать дальше →

Используем console.log() в Chrome на полную

Reading time3 min
Views43K


Сложно представить себе разработку на JS без вывода информации в консоль. Говоря метафорически, console.log() — лекарство от большинства болезней кода.


Отладка — почти как расследование преступления, где главный преступник тоже вы — Филипе Фортес


Но помимо повсеместно используемой функции console.log(), есть ещё много инструментов, позволяющий сильно упростить процесс. Давайте разберём некоторые из них на простых примерах.

Читать дальше →

Никто (почти) не знает, что такое авторизация

Reading time5 min
Views98K

За время работы архитектором в проектах внедрения IdM я проанализировал десятки реализаций механизмов авторизации как во внутренних решениях компаний, так и в коммерческих продуктах, и могу утверждать, что практически везде при наличии относительно сложных требований они сделаны не правильно или, как минимум, не оптимально. Причиной, на мой взгляд, является низкое внимание и заказчика и разработчиков к данному аспекту на начальных этапах и недостаточная оценка влияния требований. Это косвенно подтверждает повсеместное неправильное использование термина: когда я вижу словосочетание «двухфакторная авторизация», у меня начинаются боли чуть ниже спины. Ради интереса мы проанализировали первые 100 статей на Хабре в выдаче по запросу «авторизация», результат получился неутешительный, боли было много:
Читать дальше →

Топ 5 причин, почему мне нравятся пользовательские свойства CSS

Reading time3 min
Views7.9K
Привет, Хабр! Представляю вашему вниманию перевод статьи «My top 5 reasons why I like CSS custom properties», автора Stas Melnikov

Спецификация пользовательских свойств CSS навсегда изменила мой взгляд на веб-разработку. Именно поэтому я хочу написать, почему мне нравятся пользовательские свойства CSS.
Читать дальше →

SQL запросы быстро. Часть 1

Reading time5 min
Views1.7M
Подписаться в telegram: t.me/korocheproduct

Введение


Язык SQL очень прочно влился в жизнь бизнес-аналитиков и требования к кандидатам благодаря простоте, удобству и распространенности. Из собственного опыта могу сказать, что наиболее часто SQL используется для формирования выгрузок, витрин (с последующим построением отчетов на основе этих витрин) и администрирования баз данных. И поскольку повседневная работа аналитика неизбежно связана с выгрузками данных и витринами, навык написания SQL запросов может стать фактором, из-за которого кандидат или получит преимущество, или будет отсеян. Печальная новость в том, что не каждый может рассчитывать получить его на студенческой скамье. Хорошая новость в том, что в изучении SQL нет ничего сложного, это быстро, а синтаксис запросов прост и понятен. Особенно это касается тех, кому уже доводилось сталкиваться с более сложными языками.

Обучение SQL запросам я разделил на три части. Эта часть посвящена базовому синтаксису, который используется в 80-90% случаев. Следующие две части будут посвящены подзапросам, Join'ам и специальным операторам. Цель гайдов: быстро и на практике отработать синтаксис SQL, чтобы добавить его к арсеналу навыков.

Практика


Введение в синтаксис будет рассмотрено на примере открытой базы данных, предназначенной специально для практики SQL. Чтобы твое обучение прошло максимально эффективно, открой ссылку ниже в новой вкладке и сразу запускай приведенные примеры, это позволит тебе лучше закрепить материал и самостоятельно поработать с синтаксисом.
Читать дальше →

Golden canon grid: страшилка для фронтендеров

Reading time12 min
Views27K


Большая часть людей, так или иначе причастных к верстке сайтов, проходят через… Назовем это “путь бутстрапа”. Это такая философская позиция, когда у тебя есть 12 колонок и ничего больше. Ты берешь элементы, кладешь их в определенные колонки и все у тебя хорошо. Можно выключить мозг, погрузиться в нирвану и руки будут сами расставлять элементы. Красота… Но тут появляется современный дизайнер, который рисует что-то, что ну совсем не сходится с этой замечательной концепцией. Колонок явно больше, они все разной ширины, да еще и по высоте что-то нужно выравнивать. Жуть. А встречается такое все чаще, особенно если сделать шаг в сторону от магазинов или админок. Сегодня мы поговорим о том, что же это за чудо такое там используется и как его можно готовить в современном CSS. Кода будет совсем немного, в основном – размышления и картинки.

Читать дальше →

Унификация визуальных компонентов. Часть 1. Стили

Reading time6 min
Views3.2K


Данная статья будет, прежде всего, полезна разработчикам, которые не работают с готовыми наборами компонентов, такими как, material-ui, а реализуют свои. Например, для продукта разработан дизайн, отражающий то, как должны выглядеть кнопочки, модальные окна и т.п. Чтобы грамотно реализовать такую дизайн-систему, потребуется всем её атомам добавлять хорошую поддержку их композиции. Иными словами, нужно добиться того, чтобы любой отдельно взятый компонент мог интегрироваться и идеально вписываться в больший составной компонент. А если он не вписывается, то было бы неплохо иметь простую поддержку его кастомизации. Как бы то ни было, это отдельная большая тема, и, возможно, я вернусь к ней в другой раз.
Читать дальше →

6 самых распространённых ошибок разработчиков при написании HTML и CSS

Reading time3 min
Views20K
Привет, Хабр! Представляю вашему вниманию перевод статьи «The 6 most common mistakes developers when writing HTML and CSS» автора Stas Melnikov.

Использование атрибута placeholder вместо элемента label


Часто разработчики используют атрибут placeholder вместо элемента label. Но в этом случае пользователи скринридера (программы чтения с экрана) не могут заполнять поля, потому что скринридер не может прочитать текст из атрибута placeholder.

<input type="email" placeholder="Enter your email">

Поэтому я рекомендую использовать элемент label для поля имени и атрибут placeholder для примера данных, которые пользователь должен заполнить.

<label>
  <span>Enter your email</span>
  <input type="email" placeholder="e.g. example@gmail.com">
</label>

Использование элемента img для разметки декоративной графики


Я часто вижу, как разработчики путают декоративную графику с изображениями контента. Например, они размечают социальные иконки с помощью элемента img.

<a href="https://twitter.com" class="social">
  <img class="social__icon" src="twitter.svg" alt>
  <span class="social__name">Twitter</span>
</a>

Но иконка социальной сети — это декоративная иконка, которая помогает пользователям быстрее понять смысл элемента, не читая текст. Если мы удаляем значок, мы не теряем значение элемента, поэтому мы можем использовать для него свойство background-image.
Читать дальше →

Топ-3 HTML-элемента, которые мы забыли

Reading time2 min
Views6.4K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Top 3 HTML elements that we forgot» автора Stas Melnikov.

Недавно я прочитал спецификации и понял, что мы используем ограниченный набор HTML-элементов. Поэтому хотел бы рассказать о трёх элементах, которые мы забыли, но которые есть в каждом проекте.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №392 (2 — 8 декабря 2019)

Reading time4 min
Views13K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

React и Vue без npm и сборки

Reading time3 min
Views15K
Когда все начинают знакомство с React или Vue, как с двумя самыми популярными фреймворками для frontend, конечно-же все используем магические команды npm install, npm build. И только после этого папочку 'public' Мы деплоим «куда надо».

Но есть и другой (я бы назвал его извращенный) не стандартный способ, о котором многие начинающие фронтэнд разработчики даже не знают, так как они «выросли» на npm install/build.

А что, если не нужно проводить сборку, а просто вставить js код в html?




Подождите плевать мне в лицо и бросать камни с надписью 'I love node'… Мы конечно знаем, что без сборки Мы потеряем юнит тесты, скорость, да и как быть с импортом компонентов, и иерархией файлов, да и вообще спагетти код какой-то получится…

Так для чего Вам (и Нам) это и как это работает ?


На днях к нам прилетел заказ от «бизнеса» по добавлению функционала в их BPM/ERP систему, которая по-сути является сильно модифицированным Redmine. Всё это чудо делалось довольно давно и крутится на VPS сервере с кучей helper'ов микросервисов для считывания данных производства, станков и тп. Трогать ОС нельзя…
Читать дальше →

Тестирование android приложений с использованием selenoid. Поиск location в мобильном приложении с помощью Appium

Reading time5 min
Views14K

Я из компании Luxoft.
Предисловие из поста:


Selenoid — это программа, которая позволяет управлять браузерами и Android-эмуляторами с помощью специальных драйверов. Умеет запускать каждый из них изолированно в Docker-контейнере.


Основная идея Selenoid состоит в том, чтобы запускать новый контейнер для каждой сессии (запуска нового браузера или эмулятора) и останавливать его сразу же после закрытия сессии.


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


В этом посте будет запуск простых тестов в Android-эмуляторе.

Немного размышлений на тему модульного css и проблемы поддержки кода

Reading time5 min
Views5.1K

В чем заключается вопрос?


Всем привет, сегодня я хочу поделиться с вами личным опытом написания стилей или проще говоря выложить свое видение на проблему написания css для сайтов.

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

На эти и другие вопросы я и попытаюсь ответить, предложив свои методы и подходы к решению некоторых проблем.
Читать дальше →

Docker для фронтендера. Часть 1. Зачем?

Reading time5 min
Views32K

Привет, Хабр!


Несколько месяцев назад я выступал на конференции FrontendConf 2019 с докладом Docker для фронтендера и хотел бы сделать небольшую расшифровку доклада для тех, кто больше любит читать, а не слушать.



Приглашаю под кат всех веб-разработчиков, особенно фронтендеров.

Познаем промисы на основе Ecmascript спецификации. Знакомство

Reading time14 min
Views8K
promise introduction

Здравствуйте. Изучая JavaScript (да и в принципе любую другую технологию), всегда возникают разнообразные вопросы, главный из которых: «А почему это работает таким образом и не иначе?» И очень важно в этот момент не просто найти ответ на вопрос, но и полученное объяснение встроить в единую систему уже полученных знаний. Иначе осиротевшую информацию придется зазубрить или забыть.


Совместное изучение чего-либо очень помогает искать ответы. Когда ученик / напарник задает вопрос про то, как понимать фразу — «… в следующий по цепочке промис „проваливается“ результат предыдущего… » — невольно задумываешься… Вот ведь какое странное дело. А ведь лучше уже не скажешь, неужели и это не понятно? Смотришь в чистые, немного наивные, глаза товарища и понимаешь — необходимо сказать как-то еще. Желательно так, чтобы даже запоминать не пришлось. Чтобы просто новая информация органично вписалась в уже существующие мысли человека.


Не буду описывать, что мы пробовали, читали, смотрели. В итоге заинтересовались спецификацией ECMAScript. Как её читать и понимать — это отдельный разговор (может даже отдельный пост). Но то, как там описаны промисы и их поведение, впервые дало нам целостностное и логически связное понимание данной темы. Чем и хочется поделиться с вами.

Читать дальше →

Именование в CSS Grid

Reading time12 min
Views20K
Когда вы впервые изучаете, как использовать Grid-разметку, можно начать с размещения элементов на сетке по номерам линий. В этом случае необходимо следить за тем, где на сетке проходят определённые линии, и помнить о том, что последовательность их номеров меняется на противоположную, если сайт отображается для языков, которые пишутся справа налево.

На основе этой системы линий работают техники, делающие возможным именование линий и даже grid-областей. Использование этих техник позволяет размещать элементы по имени, а не по номеру. В этой статье я подробно рассмотрю различные способы именования линий и областей в CSS Grid разметке, а также несколько интересных возможностей, которые они создают.
Читать дальше →

Сравнение React Native и Flutter с точки зрения их применения в реальных проектах

Reading time10 min
Views39K
Чем React Native отличается от Flutter, за исключением того, что речь идёт о разных фреймворках, в основу которых положены разные технологии? На что ориентироваться тому, кто не знаком с этими инструментами для разработки кросс-платформенных приложений, но хочет выбрать один из них для своего очередного проекта?



Автор статьи, перевод которой мы публикуем, говорит, что в последнее время ему попадалось множество сравнений React Native и Flutter. Во всех этих сравнениях речь шла о таких вещах, которые, на самом деле, особого значения не имеют. Например — о языках, используемых для разработки проектов, или об инструментах командной строки. Здесь будет сделано сравнение React Native и Flutter с точки зрения реального положения дел, с точки зрения того, что имеет значение для настоящих проектов. Это сравнение призвано снабдить всех желающих сведениями, которые помогут им выбрать именно то, что им нужно.
Читать дальше →

Автозагрузка модулей с использованием динамического импорта

Reading time4 min
Views5K

Недавно в Node.js была анонсирована поддержка ECMAScript-модулей, а в ES2020 появилась поддержка динамических импортов. В рамках данной статьи я расскажу о реализации очевидного кейса использования динамических импортов — с неизвестными заранее названиями директорий.


cover

Читать дальше →

Многопоточность на Node.js. Event Loop

Reading time8 min
Views80K

Инфа будет полезна JS-разработчикам, которые хотят глубоко понимать суть работы с Node.js и Event Loop. Вы сможете осознанно и более гибко управлять потоком выполнения программы (web-сервера).


Эту статью я составил по материалам своего недавнего доклада для коллег.
В конце статьи есть полезные материалы для самостоятельного изучения.


Как устроена Node.js. Возможности асинхрона


Давайте посмотрим на этот код: он отлично демонстрирует синхронность выполнения кода в Node.js. Делается запрос на GitHub, затем записываем данные в файл и выводим результат в консоли. Что понятно из этого синхронного кода?


image

Читать дальше →

Делаем интерактивный план местности за 15 минут

Reading time10 min
Views20K


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

Information

Rating
Does not participate
Registered
Activity