isqualog

isqualog Like 0
Is this your channel? Confirm ownership for additional features

Немного о фронтенде, дизайне, работе и жизни.
Пишу, когда есть чем поделиться.
https://isqua.ru/
Channel's geo & Language
Russian, Russian


Channel's geo
Russian
Channel language
Russian
Category
Technologies
Added to index
08.08.2017 23:13
Recent update
16.12.2018 12:04
795
subscribers
~0
avg post reach
~48
daily reach
N/A
posts per day
N/A
ERR %
0.02
citation index
Recent posts
Удалённые
С упоминаниями
Forwards
isqualog 22 May, 13:34
isqualog 22 May, 13:34
Зацените, как ↑ сделана работа с фокусом в инструменте «Файлы Sitemap» Яндекс.Вебмастере. В форму нужно ввести адрес сайтмапа, который нужно скормить роботу. После отправки формы фокус встаёт обратно в поле, при этом текст не удаляется, а только выделяется.

Если вы хотите ввести новый адрес сайтмапа, вы просто начинаете его печатать — введённый до этого текст пропадёт. А если вы хотите чуть-чуть старый адрес поменять, например когда вам несколько однотипных урлов надо отправить, вы клавиатурными стрелками добираетесь до того места, которое хотели отредактировать, и не нужно заново весь урл вводить.
isqualog 22 May, 13:34
isqualog 22 May, 13:34
Автофокус

На скриншоте выше — страница логина госуслуг. Если вы недавно туда заходили, он помнит ваш логин и спрашивает только пароль. Ну, вы начинаете вводить пароль и через пару символов замечаете, что ничего не происходит. Ну, что делать, кликаете в поле мышкой или добираетесь до него несколькими нажатиями Tab, и вводите наконец пароль.

Мелочь, а раздражает.
isqualog 22 May, 13:34
isqualog 22 May, 13:34
А вот ↑ как сделано, к примеру, в Тинькофф Банке. Заходишь на страницу, и фокус уже в поле стоит. Сразу можно ввести пароль, без лишних движений.

Так и должно работать. Когда основное действие, которое пользователь будет делать на странице — ввод данных, ставьте сразу фокус в поле. На странице регистрации, оплаты, подтверждения, — везде, где пользователю нужно что-то вводить.

В HTML5 для этого даже специальный атрибут есть — autofocus. Ставите его инпуту, и при открытии страницы фокус будет в этом инпуте.

Попапов это тоже касается — если вы открываете попап, в котором есть форма, ставьте фокус в первое поле. Это можно сделать на JavaScript, у полей есть метод focus, использовать можно вот так:

document.querySelector('.popup input').focus()
isqualog 13 Mar, 19:57
HTTPie

А это консольная утилита, которая позволяет делать всё то же, что и curl, только наконец-то удобно. Посылать GET, POST, PUT и пр. запросы с понятным синтаксисом, отправлять формы, отправлять JSON. Подсвечивает хедеры и результат. Короче, это curl с человеческим лицом.

https://goo.gl/nZXUhr
isqualog 13 Mar, 19:57
isqualog 13 Mar, 19:57
JSONView

Это расширение для браузера, которое любой JSON открывает в удобном виде, подсвечивает синтаксис и позволяет сворачивать и разворачивать объекты и массивы.

На сайте у них ссылка на расширение для Файрфокса, но в сторе вашего браузера скорее всего есть это расширение под ваш браузер

https://goo.gl/Y9U6CG
isqualog 13 Mar, 19:56
isqualog 13 Mar, 19:56
Сегодня расскажу про два инструмента, которые улучшат вашу работу с API.
isqualog 31 Jan, 22:13
Саша Беспоясов вместе с Вадимом Юмадиловым и Андреем Романовым сделали крутой лонгрид «Фронтенд — это не больно!»

Ребята разбирают важные вопросы, типа:

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

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

Там ещё ссылки на всякие книжки и видосы по теме есть. Держите:

https://goo.gl/yn31Pj
isqualog 10 Jan, 18:53
Через 7 минут начнётся трансляция, где руководители и преподаватели Школы разработки интерфейсов рассказывают про школу и отвечают на вопросы. Присоединяйтесь!

https://goo.gl/FMi9UL
Академия Яндекса
Уже сегодня в 19:00 по московскому времени мы поговорим про Школу разработки интерфейсов (https://academy.yandex.ru/events/frontend/shri_msk-2018/) в онлайн-трансляции. Отвечать на ваши вопросы будут руководитель школы Сергей Бережной, преподаватели ШРИ и по совместительству разработчики интерфейсов Яндекса – Дмитрий Андриянов и Андрей Морозов. Если вы хотите узнать больше про поступление в ШРИ, тестовое задание и программу обучения (а также просто послушать про фронтенд в Яндексе) - присоединяйтесь!
isqualog 20 Dec, 14:29
Тихо и незаметно открылась регистрация в Школу разработки интерфейсов. Это крутые и бесплатные курсы по фронтенду в Москве, которые проводит Яндекс. Длятся они три месяца. В этом году они начинаются в марте. Иногородним студентам оплачивают проезд и проживание в хостеле. Нужно только поступить.

Тестовое задание непростое, но вполне решаемое. Первая задача про поиск багов в уже написанном Nodejs-приложении. Вторая — на вёрстку макетов. И третья — про написание маленького SPA. У каждой задачи есть подробное описание и критерии, по которым будут оценивать решения.

Приём работ закроется между 15 и 31 января — как только наберётся достаточное количество претендентов с хорошо выполненным заданием. Это значит, что к 15-му января нужно успеть. Начинать пора уже сейчас!

https://goo.gl/cpE1nB
isqualog 14 Dec, 11:10
Вчера в твитере SilentImp поделился классным расширением для браузера (скриншот на картинке выше). Превращает подключение зависимостей в исходниках на гитхабе в ссылки на подключенные модули. Работает для npm-модулей и для локальных модулей, которые импортируются по относительному пути. Если у вас какие-то там настройки вебпак-резолвера, расширение их конечно не поймёт :)

Кроме npm поддерживает Go, Ruby, Python и всё такое.

https://twitter.com/SilentImp/status/940711754425880576
isqualog 14 Dec, 11:10
https://octolinker.github.io
isqualog 6 Dec, 17:25
Если вы соскучились по кодварзу, то вот вам две задачи на кодирование и декодирование данных.

Кодировка Base64 → https://goo.gl/U9BjZU
Кодировка ASCII85 → https://goo.gl/2p5qb8

В решениях Base64 встречаются решения через nodejs Buffer. Но по-моему, гораздо интереснее реализовать алгоритм кодирования со всякими там битовыми сдвигами. Про ASCII85 убойная задача, подсказывать не буду :)

Перед решением перечитайте какую-нибудь википедию про эти кодировки ;)
isqualog 13 Nov, 00:41
На хабре вышел перевод статьи про «синдром ученика». Среди комментариев к оригиналу и к переводу есть несколько интересных.

Статья про то, что люди (и сам автор) стремятся учиться, но не применяют полученные знания. Например, автор сделал много туду-приложений на разных языках и фреймворках.

Я как наставник на курсах по веб-разработке отчетливо вижу эту проблему. У меня было много студентов, которые подсели на курсы. Один весной закончил Epic Skills, осенью пришел в HTML Academy. Другой проходит курс по вёрстке третий раз, чтобы сделать еще один проект под контролем наставника. Третий прочитал три умных книжки вместо того, чтобы писать код.

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

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

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

https://goo.gl/jMsn9T
isqualog 23 Oct, 20:10
Оптимизация загрузки сайтов — Лекция Виталия Фридмана

Сейчас в HTML Academy заканчивается продвинутый интенсив по вёрстке, и один из последних разделов посвящён оптимизации скорости загрузки. Я студентам рекомендую посмотреть вот это видео Виталия Фридмана, основателя и главреда Smashing Magazine.

Виталий очень подробно разбирает, какие узкие места есть и как их оптимизировать. Лекция 2014-го года, в браузерах появились какие-то новые возможности за последние три года, но лекция всё ещё актуальна. За три недели они в Smashing Magazine ускорили загрузку до 0,5с.

Ещё он рассказывает, как показать клиенту, что скорость загрузки это важно.

https://goo.gl/JMgNjp
isqualog 5 Oct, 20:14
Я эту картинку кидаю своим студентам, когда они оставляют комментарий рядом с очевидным куском кода. Комментировать надо то, что не понятно. И писать в каменте не что это, а зачем это. На вопрос «что это» код должен отвечать сам. Например, имя функции должно отвечать на вопрос, что делает эта функция, а имя переменной — что в ней лежит. Такой понятный код легче поддерживать.

Саша Беспоясов коротко пересказывает книгу «The Art of Readable Code» у себя в блоге. Книга про то, как писать понятный код. Он уложил самое важное в три поста. Ловите:

Первая часть → https://goo.gl/UrRpSv
Вторая часть → https://goo.gl/qfvzoB
Третья часть → https://goo.gl/BHpWVS