isqualog
777 members
12 photos
5 videos
48 links
Немного о фронтенде, дизайне, работе и жизни.

Пишу, когда есть чем поделиться.

https://isqua.ru/
Download Telegram
to view and join the conversation
Оптимизация загрузки сайтов — Лекция Виталия Фридмана

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

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

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

https://goo.gl/JMgNjp
На хабре вышел перевод статьи про «синдром ученика». Среди комментариев к оригиналу и к переводу есть несколько интересных.

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

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

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

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

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

https://goo.gl/jMsn9T
Если вы соскучились по кодварзу, то вот вам две задачи на кодирование и декодирование данных.

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

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

Перед решением перечитайте какую-нибудь википедию про эти кодировки ;)
Вчера в твитере SilentImp поделился классным расширением для браузера (скриншот на картинке выше). Превращает подключение зависимостей в исходниках на гитхабе в ссылки на подключенные модули. Работает для npm-модулей и для локальных модулей, которые импортируются по относительному пути. Если у вас какие-то там настройки вебпак-резолвера, расширение их конечно не поймёт :)

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

https://twitter.com/SilentImp/status/940711754425880576
Тихо и незаметно открылась регистрация в Школу разработки интерфейсов. Это крутые и бесплатные курсы по фронтенду в Москве, которые проводит Яндекс. Длятся они три месяца. В этом году они начинаются в марте. Иногородним студентам оплачивают проезд и проживание в хостеле. Нужно только поступить.

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

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

https://goo.gl/cpE1nB
Саша Беспоясов вместе с Вадимом Юмадиловым и Андреем Романовым сделали крутой лонгрид «Фронтенд — это не больно!»

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

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

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

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

https://goo.gl/yn31Pj
Сегодня расскажу про два инструмента, которые улучшат вашу работу с API.
JSONView

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

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

https://goo.gl/Y9U6CG
HTTPie

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

https://goo.gl/nZXUhr
Автофокус

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

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

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

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

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

document.querySelector('.popup input').focus()
Зацените, как ↑ сделана работа с фокусом в инструменте «Файлы Sitemap» Яндекс.Вебмастере. В форму нужно ввести адрес сайтмапа, который нужно скормить роботу. После отправки формы фокус встаёт обратно в поле, при этом текст не удаляется, а только выделяется.

Если вы хотите ввести новый адрес сайтмапа, вы просто начинаете его печатать — введённый до этого текст пропадёт. А если вы хотите чуть-чуть старый адрес поменять, например когда вам несколько однотипных урлов надо отправить, вы клавиатурными стрелками добираетесь до того места, которое хотели отредактировать, и не нужно заново весь урл вводить.
Forwarded from Беспоясов++
​​Новый проект! 🎉

В канале последнее время было тихо не просто так — мы с Артёмом Самофаловым кое-что готовили. Сейчас расскажу.

У нас зудит, когда мы ищем материалы по какой-то теме и не можем найти достаточно годноты. Нам не хочется искать кучу разрозненных статей по разным углам интернета, а хочется, чтобы всё было в одном месте и написано понятным языком. В последний раз такое случилось с ООП.

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

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

Мы перелопатили кучу источников: книг, статей, научных работ, примеров. Для каждого принципа подобрали случаи из реальных проектов, с которыми мы работали. Нашли подходящие примеры из «идеального мира». Подобрали шаблоны проектирования и приёмы рефакторинга, которые помогают эти принципы соблюдать. Отобрали антипаттерны, которых советуют избегать.

А ещё для каждого принципа мы приготовили вопросы и тесты для самопроверки! (Вы знаете, что делать.)

Если книга вам зашла, пошарьте её в соцсетях и блогах или полайкайте на гитхабе. Мы будем благодарны!
А если эта книга или другие статьи-проекты-что-то-ещё вам очень-очень зашли, то вы можете поддержать нас на Патреоне.