Back to blog

Oauth авторизация добралась и до Telegram

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

Раньше для этого требовались хитрые манипуляции с апи и ботами через deep linking и "общение" с ботом.

https://core.telegram.org/widgets/login - вот здесь собираем виджет и вставляем на сайт. Там же инструкции для серверной стороны.

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

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

© 2019 shogenov.com


Тэг label

Я, действительно, был уверен, что все это знают, но многие удивляются тому факту, что тэг label можно связать с input и нажатие на label будет ставить фокус или активировать/деактивировать input

Эту особенность очень удобно использовать для стилизации чекбоксов и радиокнопок, а также для создания интересных эффектов при фокусировании на input.


Атрибут contentEditable

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

Тэг optgroup для select

Меня удивляет, что многие вообще не в курсе про optgrup. Этот тэг позволяет группировать options внутри

Апельсиновый
Лимонный
Персиковый
Светлый
Нормальный
Темный


Тэг base

Тэг base определяется внутри head и говорит о базовом пути.

Если мы на странице site.com/articles поставим ссылку

контакты

, то эта ссылка будет вести на site.com/articles/contacts

А если же мы в head добавим

, то та же самая ссылка будет вести уже на site.com/contacts

У этого элемента есть атрибут target. И если установить его в target=\"_blank\", то все ссылки будут открываться в новой вкладке.


Событие Onerror для тэга img

Onerror срабатывает перед тем как браузер покажет ваше изображение как битое. Можно на это событие повесить \"самоуничножение\" картинки из DOM. Для замены битой картинки на какую-то стандартную(noimage) или сообщение о \"битости\" всё же изящнее использовать :before и :after, но про это события я должен был упомянуть.


Тэг kbd

Этот тэг используется, в основном, для выделения названия компьютерных клавиш в тексте. Текст внутри такого тэга выделяется моноширным шрифтом.


Выделение удалённых частей текста

Для выделения части текста, которая со временем была удалена, используются тэги и . У них есть атрибуты cite и datetime. В первом указывается ссылка на причину удаления, а во втором дата удаления.

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


Гиперссылка для отправки e-mail

Я уверен, что все знают про

Написать мне

Если кто не знает, то эта ссылка открывает почтовый клиент по умолчанию, в котором открыто окно отправки нового письма и в поле \"кому\" уже вбит адрес, который указан после \"mailto:\" .

Но далеко не все знают, что можно пойти дальше:

href=\"malito:mail{at}yandex.ru?subject=Feedback&body=Тело20письма&cc=copy{at}yandex.ru&bcc=hiddencopy{at}yandex.ru\" title=\"Ссылка на какой-то сайт\">Сайт

Параметр subject - это тема письма,

body - текст письма,

cc - адрес, на который пойдёт копия

bc - адрес, на который пойдёт скрытая копия.

Зачем? Таким образом можно сформировать шаблон письма для обращения пользователей с сайта по email.


\">

В html5 появилось много разных типов для input, однако мало кто использует тип search. Как можно догадаться, он используется для создания поля поиска. Правда единственное его отличие от обычного input type='text' лишь в том, что при наличии текста внутри в правой части появляется крестик для очистки содержимого поля.


_

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


Если есть дополнения, возражения или комментарии, то можно обсудить в клубе программистов.

Если не подписан на \"Я - программист!\", то подписывайся, а если подписан, то расскажи другу!

","alias":"interesnye-osobennosti-html-kotorye-ty-vozmozhno-i-ne-znal","created":"2018-02-09 10:46:31","tags":null,"active":1,"excludeFromBlog":0},{"id":10,"title":"Вариативные шрифты","description":"Дизайн сайта, как правило, включает в себя несколько начертаний одного шрифта, а зачастую и несколько разных шрифтов. И на каждый шрифт и на каждое начертание шрифта приходится грузить свой шрифтовой...","header":"Вариативные шрифты","content":"

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

Вариативный шрифт - это куча начертаний в одном файле. Сколько конкретно? Бесконечно много!!!

Файл один, вариаций масса: насыщенность, пропорции, контраст, изменение размера строчных/выносных, анимация и т.п.

В спецификации OpenType Font Variations самые популярные вариации заложены в тэги из четырёх букв: насыщенность — wght, пропорция — wdth, курсив — ital, наклон — slnt и оптические размеры — opsz. Они включаются с помощью font-weight-, font-stretch- и font-style-свойств. CSS4 также обновился в соответствии с новыми значениями для поддержки OpenType Font Variations:

— font-weight — это любое целое число в диапазоне от 1 до 999 (вместо 100 в стандарте CSS3).

— font-stretch использует процент, где 100% — это нормальная пропорция, 50% — узкие начертания, а 200% — сверхширокие.

— font-style использует угол наклона между oblique –90deg и oblique 90deg.

— font-optical-sizing — новая опция, с синтаксисом либо auto, либо none,включающая ось оптических компенсаций, если она заложена в шрифте.

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

h1 { font-variation-settings: “wdth” 600, “wght” 200, “opsz” 48; }

Казалось бы вот оно будущее! И не надо больше тянуть кучу файлов. Получил один файл шрифта от дизайнера и радуешься жизни.

Но как всегда встает вопрос о поддержке данной технологии браузерами.

Оптимизм внушает тот факт, что разработка ведётся в том числе компаниями Apple, Google, Microsoft, Adobe. То есть в популярные браузеры, ОС, и программы, вероятно, скоро вариативные шрифты будут внедрены.

Останется только понять, насколько это быстро начнёт применяться в разработке.

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

____________________________________

Больше полезного на канале Я - программист

Общайся в чате Клуб программистов

Шутеечки и байки Дневник программиста

","alias":"variativnye-shrifty","created":"2018-02-09 10:45:45","tags":null,"active":1,"excludeFromBlog":0},{"id":9,"title":"Популярность языков программирования на GitHub","description":"В прошлый вторник я рассматривал языки с точки зрения зарплат и количества вакансий.Сегодня же предлагаю статистическую выборку с github.Вот диаграмма с гитхаба, отражающая популярность языков программирования по количеству пушей:github pushesИ...","header":"Популярность языков программирования на GitHub","content":"

В прошлый вторник я рассматривал языки с точки зрения зарплат и количества вакансий.

Сегодня же предлагаю статистическую выборку с github.

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

github pushes

И диаграмма, показывающая количество активных репозиториев, содержащих тот или иной язык:

Количество активных репозиториев

JavaScript самый популярный?

Самым популярным языком считается Java.

JavaScript лидирует по этим двум показателям на GitHub, как я понимаю, потому что хотя бы по чуть-чуть используется много где. Хотя, безусловно, популярность NodeJS, React, Angular, Vue и ещё пары миллионов фреймоворков делают своё дело.


Подписывайся на tg://resolve?domain=it_programmist


","alias":"populyarnost-yazykov-programmirovaniya-na-github","created":"2018-02-09 10:44:57","tags":null,"active":1,"excludeFromBlog":0},{"id":8,"title":"Как запустить проект за три дня, то есть быстро?","description":"У каждого программиста практически с самого начала становления себя как разработчика в голову приходит мысль о каком-нибудь собственном проекте. И многие даже начинают этот проект, но заканчивают лишь единицы. Как запустить свою...","header":"Как запустить проект за три дня, то есть быстро?","content":"

У каждого программиста практически с самого начала становления себя как разработчика в голову приходит мысль о каком-нибудь собственном проекте. 

И многие даже начинают этот проект, но заканчивают лишь единицы. 

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

Стоит отметить, что сама идея может быть совершенно любая: хоть магазин носков, хоть блог о вейпах. Главное в неё верить. Хотя оригинальность, конечно, будет плюсом. В любом случае, данный материал не об идее, а о её скорейшей реализации. Крайне важно, чтобы выбранная идея волновала и хотелось скорее её реализовать. В противном случае, скорее всего, данная затея обречена. 

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

Итак, несколько вещей, которые помогут заметно ускорить процесс и выпустить первую версию твоего приложения как можно быстрее (можно успеть за 3 дня!). 



Начни с малого

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

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

Важно сделать первую версию, с достаточным для неё функционалом. Как говорится \"Москва не сразу строилась\". 



Для начала запиши или зарисуй

Полезно начинать не с верстки или с бэкэнда, а с листочка и ручки. Можно и в уме примерно обрисовать будущий вид проекта, но чтобы ничего не забыть следует схематично изобразить и записать основные моменты. В дальнейшем это заметно упростит жизнь. Не придется вспоминать \"А что я тут хотел сделать?...\" и т.п. 



Раздели цели на задачи

Разбивай задачи на более мелкие. Таким образом будет ощущение прогресса и приближения к цели. Хотя почему только ощущение? Так и будет на самом деле! 



Например, \"Главная страница\" - это цель. Её можно разбить на множество мелких задач: 

1.Верхнее меню 

2. Заголовок 

3. Контент 

4. Постраничный навигатор 

5 Сео-текст 

6. Футер 



Основные функции в приоритете

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



Не поддавайся моде

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

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

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

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

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



Переиспользуй всё

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

Поэтому важно при написании кода делить его на блоки для возможности переиспользования.  

В разрезе PHP и ООП такие блоки - это классы. В разрезе, например, javasсript - модули. 



Ничего другого до релиза

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

Удачи тебе в твоих проектах!



И подписывайся на \"Я - программист\", если не подписан!

","alias":"kak-zapustit-proekt-za-tri-dnya-to-est-bystro","created":"2018-02-09 10:39:26","tags":null,"active":1,"excludeFromBlog":0}],"loading":false,"error":null},"application":{"meta":{"title":"Oauth авторизация добралась и до Telegram","description":"Разработчики Телеграм заявили, что теперь авторизовать пользователя на сайте можно через наш любимый мессенджер.Раньше для этого требовались хитрые манипуляции с апи и ботами через deep linking и \"общение\" с ботом.https://core.telegram.org/widgets/login..."},"messages":[]},"user":{"loading":false,"error":null}}