​🔍 CSS, который скрывает Figma

#фронтенд #css #дизайн

Интересная статья от Ахмада Шадида, в которой он разбирает как устроен CSS в Figma. Подобные исследования (если это можно так назвать) — меня всегда увлекают, потому что это именно та повседневность, о которой ты в какой-то момент попросту перестаёшь задумываться.

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

Да и в целом, в самом CSS-коде есть изобретения, о которых я раньше не задумывался, потому что у меня просто не бывало задач по выстраиванию подобного UI в проектах. Поэтому отчаянно рекомендую всем, кому интересно как строится UI в таких решениях.

Что могу добавить от себя: я явно делал бы это иначе (скорее всего, через bootstrap), но не потому, что это единственный верный путь, а потому, что для меня такой путь более удобен и понятен в текущий момент моего профессионального развития.

Интересны ли вам подобные исследования? Делитесь в комментариях, постараюсь поискать ещё или даже сам что-нибудь поисследовать (ранее я уже делал нечто подобное, но только с точки зрения рассмотрения типичных ошибок в интерфейсах больших проектов, которыми пользуется много людей на ежедневной основе).

https://ishadeed.com/article/figma-css/

***

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

​🪤 Ты побеждаешь, Tailwind?

#фронтенд #bootstrap #tailwind

Сидел читал статейки на хабре и наткнулся на статью-сравнение Tailwind и Bootstrap за авторством Томаса Димнета. В которой говорилось о том, что Bootstrap морально устарел (а Bootstrap 5 и вовсе не получился, отказ от jQuery был ошибкой и всё такое), внутри самого фреймворка есть путаница между компонентами и утилитами, а документация и вовсе сложная и непонятная. Tailwind же — напротив весь такой модный, прогрессивный и с хорошим DX.

Сразу расставлю точки над И и признаюсь, что с Tailwind я знаком поскольку постольку и в проектах его не использую, из чего моё мнение может быть совсем не объективным, но те минусы Bootstrap5, которые приводит автор оригинала статьи кажутся мне абсурдными:

- путаница между компонентами и утилитами (разбирается на примере компонент для заголовков h1-h6 и утилитах для установки размера текста);
- сложность настройки через SASS (в документации мало объяснений о том, как правильно кастомизировать Bootstrap);
- все сайты на Bootstrap выглядят одинаково и теряют свою идентичность (аргумент в том, что бутстраповские компоненты плохо кастомизируются, но я, как человек написавший штук 50 сайтов на bootstrap могу с уверенностью заявить, что это не так. Разумеется, вам потребуется время, чтобы прописать кастомные стили, но что в этом плохого? Нет ни одного UI фреймворка, который не нужно было бы подгонять под UI вашего дизайнера, если вы не ограничиваете его набором компонентов заранее);
- кастомизировать шрифты в Bootstrap — это сложно (и это тоже не является правдой, поскольку замена шрифтов — это подключение одного CSS-файлика, причём довольно небольшого).

Есть и ответ от Джейсона Найта на статью Димнета, в котором он разбирает почему и bootcrap и failwind (именно так он их называет в своей статье) одинаково плохи, а примеры на vanilla, приведённые Димнетом — безграмотны. Крайне рекомендую прочитать.


Как вам эта дискуссия? Кто для вас прав? И что вам нравится больше — bootcrap или failwind? Пишите в комментарии 👇

***

Ссылки:

Взлет и падение Bootsrap (перевод на хабре): https://habr.com/ru/company/ispmanager/blog/686080/
Взлет и падение Bootstrap (оригинал): https://betterprogramming.pub/the-rise-and-fall-of-bootstrap-68d4cd703666
Failwind: путь для невежственных: https://medium.com/codex/the-fail-of-tailwind-the-go-to-for-the-ignorant-7b0aaea405bb

​Как работают селекторы в CSS? Разбираемся на примерах

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

Полезные ссылки:

Ссылка на презентацию: https://docs.google.com/presentation/d/12XGe0u1SJu7PkGuYCl_V_sIpYhhs3iZ2OYAdd07Or3o/edit?usp=sharing
Раздел по CSS в доке: https://doka.guide/css/
Комбинированные селекторы в доке: https://doka.guide/css/combined-selectors/
Раздел по CSS на MDN: https://developer.mozilla.org/ru/docs/Web/CSS/Reference
Раздел по селекторам на MDN: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Selectors
Лекция в текстовом формате: https://blog.kantegory.me/frontend-css-basics

Друзья, видео теперь будут дублироваться на дзен. Это видео уже доступно там: https://dzen.ru/video/watch/6339c9261f4fed281d923ef8

И теперь меня можно поддержать на boosty. Гору уникального контента пока обещать не буду, но что-то грандиозное уже готовится :)

​📹 Настраиваем JSON-сервер с авторизацией на примере приложения для заметок

Привет! Это запись моего вебинара, в рамках курса по фронтенд-разработке в ИТМО, по настройке JSON-сервера с авторизацией на примере приложения для заметок.

Смотреть: https://youtu.be/_yvw_tAUGZw
Прошлый урок: https://youtu.be/onoRgoj0Xus
Плейлист «Фронтенд-разработка 2022»: https://www.youtube.com/playlist?list=PLAhg4XYCffEmD3I5HD3YuvBPhG2KR4OBj

🔗 Полезные ссылки:

Пример из видео: https://github.com/kantegory/mentoring/tree/master/18_bootstrap_api_example
Документация JSON-server: https://github.com/typicode/json-server
Документация JSON-server-auth: https://www.npmjs.com/package/json-server-auth
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2022
Блог: https://blog.kantegory.me
Дзен: https://dzen.ru/dobryakov
Бусти: https://boosty.to/dobryakov

​📝 Настраиваем автокомплит правильно

#frontend #браузеры #автозаполнение

Интересная статья от яндекса про правильную настройку автокомплита на фронтенде. Довольно глубоко рассматривается внутренне устройство автокомплита и какие действия предпринимает браузер, чтобы сопоставить поля (по атрибуту id, name, placeholder и label) и сохранённые значения пользователя.

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

Читать статью: https://habr.com/ru/company/yandex/blog/686668/

​⌨️ Учимся правильно отображать клавиатуру

#frontend #браузеры #mobile

Ни для кого не секрет, что подход mobile-first или даже mobile-only сегодня важен, как никогда. Но к сожалению, довольно большое количество разработчиков забывает про удобство пользователя при вводе каких-либо данных с мобильного устройства.

Как улучшить пользовательский опыт? Продолжаем небольшой цикл статей про браузеры и удобства (вчерашний пост был про автокомплит).

Сегодня рекомендую вам ознакомиться со статьёй на medium, в которой рассказывается про влияние атрибута type у элемента input на то, какая клавиатура будет показываться пользователю с мобильного устройства.

К примеру, если вы назначите атрибуту type значение tel, то у пользователя появится клавиатура с цифрами, что позволит комфортно заполнить номер телефона.

Используйте атрибут type правильно, чтобы сделать чью-то жизнь немного удобнее и будет вам счастье!

Читать статью: https://medium.com/front-end-chummies/control-types-including-virtual-keyboards-associated-with-14-html-input-types-4a0b216d68c6

​🖱 Атрибут cursor

#браузеры #frontend #css

Продолжаю небольшой цикл про повышения удобства пользовательского опыта. Сегодня поговорим про CSS-свойство cursor.

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

Предлагаю вспомнить про важные виды курсоров, на мой взгляд это:

- wait/progress (контент загружается);
- not allowed (действие совершить нельзя);
- help (выводит знак вопроса);
- grab и grabbing (в основном, нужны чтобы показать draggable элементы);
- zoom in / zoom out (приближение / отдаление, соответственно).

Про остальные типы вы можете почитать в доке: https://doka.guide/css/cursor/

​📱 Кроссплатформенная разработка. Всё плохо?

#vue #nativescript #mobile

Последние несколько месяцев мне довелось довольно тесно познакомиться с NativeScript (писал я, конечно, на Vue).

Впечатления остались смешанными. Честно признаюсь, что кроме NativeScript удалось раньше попробовать только React Native и не сказать, что мне было приятно. Слышал и интересовался Flutter, но руки так до него и не дошли. Если вдруг у вас есть опыт разработки на Flutter / React Native / NativeScript / etc. — поделитесь в комментариях, будет интересно почитать.

Сразу скажу, что моё мнение довольно субъективно, поскольку я вообще не мобильный разработчик и мои знания не уходят дальше приложения для просмотра погоды на Kotlin с корутинами и кешированием. На swift я немножко писал, но поскольку макбука у меня раньше не было — полноценным этот опыт тоже назвать нельзя.

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

Но я как фанат Vue решил, что хочу попробовать NativeScript и каково было моё разочарование, когда я начал в это погружаться, увидев насколько из рук вон плохо там работает CSS, а невозможность использования ряда привычных JS-библиотек меня вконец добила. С другой стороны — это интересный челлендж, который заставляет мозги, привыкшие к ламповому JS-зоопарку, шевелиться и пытаться найти решения в условиях жёстких ограничений. Как никогда ранее, я ощутил насколько творческим может быть программирование, если тебя оторвали от того, что есть в современных браузерах.

Да, это нелегко. И да, это заставляет думать и гуглить. А отсутствие большого количества информации по не самому популярному решению и вовсе приводит к тому, что приходится залезать во внутренности инструмента и изучать их вдоль и поперёк, чтобы найти ответы на интересующие вопросы.

Я бы точно не советовал новичкам NativeScript, да и кросстплатформу, в целом. Это очень нелегко, а когда у вас нет достаточного опыта, но есть желание «войти в IT» — это может напрочь погасить всю вашу мотивацию. Когда хотя бы годика два побарахтаетесь в JS-зоопарке и будете готовы читать исходники инструментов, потому что документация не очень подробная — тогда и можете лезть в NativeScript.

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

​🔍 Как работает язык программирования?

#база #разработка #новичкам

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

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

Если говорить кратко, то весь пайплайн исполнения программы делится на следующие шаги:

1) считывание исходного кода компилятором;
2) лексический анализ (выделение токенов: операторов, переменных итд);
3) синтаксический анализ (он же парсинг; на этом этапе считывается массив токенов, по которому строится абстрактное синтаксическое дерево)
4) интерпретация (если язык является интерпретируемым)
5) компиляция в машинный код;
6) исполнение программы.

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

📖 Источники:

1) Как работает язык программирования? — https://youtube.com/watch?v=1kMqMfsWvkk
2) Создаем свой ЯЗЫК ПРОГРАММИРОВАНИЯ. Лексер, Парсер, Абстрактное синтаксическое дерево (AST) — https://youtube.com/watch?v=Ezt3vBok5_s