Pull to refresh
18
0

Пользователь

Send message

Создание favicon для сайта 2020

Reading time10 min
Views138K

Что такое favicon и для чего он нужен?


Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

image

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

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

Какой формат использовать для favicon?


Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?


  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows

Читать дальше →
Total votes 50: ↑48 and ↓2+46
Comments30

Лучшие методики тестирования в JavaScript и Node.js

Reading time49 min
Views60K

Это исчерпывающее руководство по обеспечению надёжности в JavaScript и Node.js. Здесь собраны десятки лучших постов, книг и инструментов.

Сначала разберитесь с общепринятыми методиками тестирования, которые лежат в основе любого приложения. А затем можно углубиться в интересующую вас сферу: фронтенд и интерфейсы, бэкенд, CI или всё перечисленное.
Total votes 47: ↑46 and ↓1+45
Comments3

HBO, cпасибо что напомнил… «Чернобыльская аптечка» беларуского фармацевта

Reading time20 min
Views123K
Что бы ни сказали — не станем спорить
Что бы ни дарили — не станем верить

Егор Летов «Как листовка»

Думаю не стоит лишний раз говорить о нашумевшем сериале Чернобыль и эффективности такого «сериального» воздействия на массы. Особенно на массы, проживающие на территориях, показанных в фильме. Выход каждой новой серии сопровождается всплеском публикаций в FB. В каждой из которых горечь, страх, боль. Что в такой ситуации я могу сделать ("кто виноват и что делать?")? Могу только описать свой взгляд на терапию лучевых поражений. Спасибо родненькой кафедре химии высоких энергий и проф. Шадыро О.И., которые пестовали в своих лабораториях нас, непутевых фармацевтов-радиохимиков. Надеюсь своей статьей честь этой, легендарной некогда, кафедры я не опорочу.

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

В общем, спасибо, сценаристы HBO, за то, что всколыхнули Память. Мой посильный вклад — под катом. Рейтинг доступных (и не очень) антидотов, способных сработать при радиационном выбросе. В закладки — класть строго ВСЕМ! И прочитал сам — перекинь другу.

Читать дальше →
Total votes 227: ↑210 and ↓17+193
Comments272

Another event for CSS position: sticky

Reading time1 min
Views3.8K

Have you ever wondered how to track when elements with positions: sticky become fixed? Eric Bidelman has an amazing post on this topic, go and read it now.


I've found some difficulties while using it in my project. Here they are:


  1. It breaks encapsulation. sticky-change event relates to header element, but you have to insert sentinels to header's parent (and make it position: relative).
  2. It involves lots of factors that should be consistent and their connection is not always obvious. For example you can't set --default-padding greater than 40px, which is top-sentinel's height.
  3. You can't track block in the middle of an article.

Let's try to improve it!

Читать дальше →
Total votes 14: ↑13 and ↓1+12
Comments0

19 идей для Node.js-разработчиков, которые стремятся вырасти над собой в 2019 году

Reading time16 min
Views38K
Автор материала, перевод которого мы публикуем, собрал 19 идей, которые могут оказаться полезными для тех Node.js-разработчиков, которые хотят повысить свой профессиональный уровень в 2019 году. Мир JavaScript огромен, поэтому освоить всё то, о чём пойдёт здесь речь, попросту нереально. Вряд ли найдётся кто-то, кто владеет всем этим в совершенстве. Однако кое-что в этом обзоре вполне может пригодиться именно вам.


Читать дальше →
Total votes 29: ↑25 and ↓4+21
Comments11

Как генерировать осмысленные коммиты. Применяем стандарт Conventional Commits

Reading time8 min
Views116K


Привычный хаос в названиях коммитов. Знакомая картина?

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

Меня зовут Ержан Ташбенбетов, я работаю в одной из команд Яндекс.Маркета. И сегодня я расскажу читателям Хабра, какие инструменты для создания осмысленных коммитов мы используем в команде. Приглашаю присоединиться к обсуждению этой темы.

Читать дальше →
Total votes 72: ↑71 and ↓1+70
Comments84

Создание адаптивных изображений

Reading time53 min
Views13K
В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных размеров экрана. Когда я впервые увидел это, я подумал, что это не более, чем просто ловкий трюк. В конце концов, это просто div для спрайта большого изображения в качестве фона. Так было до того момента, пока я не услышал доклад на Smashing Conference от MikeRiethmuller под названием «За пределами медиазапросов». Кроме того, я настоятельно рекомендую прочитать его же статью «Большой потенциал SVG».



Я узнал две вещи, которые меня потрясли:

  1. При использовании SVG вы можете отказаться от атрибута viewBox и установить новую систему координат на вложенных элементах SVG путем применения нового viewBox. (Да, я знаю. Это звучит странно. Ниже я объясню все более подробно).
  2. Когда вы используете медиазапросы внутри SVG-файлов, а затем вставляете изображение через тег img или в качестве фонового изображения CSS, медиазапросы привязаны к ширине изображения. Практически такое же поведение, как и при использовании контейнерных запросов.
Читать дальше →
Total votes 17: ↑17 and ↓0+17
Comments3

Как стать React разработчиком в 2018 году

Reading time17 min
Views77K


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

Адам Голаб, эксперт по React и JS, составил пошаговый учебный план, который поможет вам стать разработчиком с нуля либо укажет направление для дальнейшего повышения навыков в профессии.

План Адама представляет собой список основных пунктов, которые вам нужно изучить самостоятельно. Мы добавили описание, а в некоторых сложных моментах указали ссылки на дополнительные справочные материалы, с помощью которых вы получите ответ на вопрос: «Что я должен узнать как React-разработчик?».
Читать дальше →
Total votes 67: ↑62 and ↓5+57
Comments121

Sans Forgetica: шрифт, который позволяет немного лучше запоминать прочитанное

Reading time3 min
Views62K

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

В 2011 году на экранах кинотеатров появился фильм «Области тьмы», который отчасти отображал заветную мечту многих — улучшить свою память и ускорить мыслительный процесс. На днях ученые из Королевского мельбурнского технологического института объявили о создании … нет, не таблетки, но шрифта, который позволяет улучшить «усваиваемость» прочитанного текста.
Total votes 57: ↑51 and ↓6+45
Comments72

Текстовый редактор — это вам не высшая математика, тут думать надо

Reading time17 min
Views96K
Современные текстовые редакторы умеют не только бибикать и не давать выйти из программы. Оказывается, внутри них кипит очень сложный метаболизм. Хотите узнать, какие ухищрения предпринимаются для быстрого пересчета координат, как к тексту приделываются стили, фолдинги и софтврапы и как это всё обновляется, при чем тут функциональные структуры данных и очереди с приоритетами, а также как обманывать пользователя — добро пожаловать под кат!



В основе статьи — доклад Алексея Кудрявцева с Joker 2017. Алексей уже лет 10 пишет Intellij IDEA в JetBrains. Под катом вы найдете видео и текстовую расшифровку доклада.
Читать дальше →
Total votes 208: ↑206 and ↓2+204
Comments189

16 инструментов React, которые пригодятся разработчикам интерфейсов

Reading time3 min
Views26K


Для создания пользовательских интерфейсов существует большое количество инструментов (ваш К.О., не благодарите). Один из наиболее эффективных — React. Наверное, на Хабре нет нужды рассказывать о том, что это такое и зачем.

Сегодня мы решили опубликовать подборку классных вспомогательных элементов для разработчиков, которые используют React. Вероятно, подборка не исчерпывающая, но зато позволит дополнить инструментарий. Если вы используете еще что-то, чего нет в подборке, делитесь в комментариях, а мы скажем дружно спасибо и добавим классные предложения в подборку. Предупреждение — под катом довольно много гифок, у кого платный трафик — осторожнее, ребята.
Читать дальше →
Total votes 31: ↑31 and ↓0+31
Comments10

Курс о Deep Learning на пальцах

Reading time2 min
Views173K
Я все еще не до конца понял, как так получилось, но в прошлом году я слово за слово подписался прочитать курс по Deep Learning и вот, на удивление, прочитал. Обещал — выкладываю!

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

Материалы курса были опробованы на студентах кафедры АФТИ Новосибирского Государственного Университета, поэтому есть шанс, что по ним действительно можно чему-то научиться.


Читать дальше →
Total votes 117: ↑117 and ↓0+117
Comments31

Флаппи Бёрд: — Поехали

Reading time11 min
Views24K

Это рассказ о том, как написать свою игру на Corona.
Уровень вхождения — минимальный (и ботаник с кафедры алгебры поймет).

Я напомню, что Corona — это движок для создания 2D игр на все платформы и, touch-touch, сегодня День космонавтики. Сюжет для игры выбран соответсвующий и, разумеется, мы повторяем за первым космонавтом
-Поехали!
Total votes 56: ↑53 and ↓3+50
Comments31

Возможно, вам не нужен Rust, чтобы ускорить ваш JS

Reading time32 min
Views28K

Несколько недель назад я обнаружил пост "Окисляем Source Maps с Rust и WebAssembly"
распространяющийся по Твиттеру и расказывающий о выигрыше в производительности от замены обычного JavaScript в библиотеке source-map на Rust, скомпилированный в WebAssembly.


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


Так что я скачал библиотеку с GitHub и отправился в небольшое исследование производительности, которое я документирую здесь практически дословно.

Читать дальше →
Total votes 58: ↑54 and ↓4+50
Comments43

Hyperapp для беженцев с React/Redux

Reading time5 min
Views18K

image


Я люблю Redux


Именно благодаря Redux для меня началось путешествие в мир удивительного функционального программирования. И это первое из функциональщины, что я попробовал в production. Прошли те времена, когда я использовал DOM для хранения состояния и неуверенно манипулировал им с помощью jQuery.


Redux — это инструмент для управления состоянием приложения (state), который позволяет полностью отделить его от представления (view). Представление (view) становится производным состояния (state), которое предоставляет пользователю интерфейс для его изменения. Действия пользователя (actions) не изменяют состояние (state) напрямую. Вместо этого они попадают в редюсер (reducer). Это такая чистая функция, которая на основе предыдущего состояния (state) и действия (action) генерирует следующее состояние (state). Такой подход к обновлению данных во многом был вдохновлен архитектурой языка программирования Elm и концепцией однонаправленного потока данных Flux. Это, возможно, самая популярная JavaScript-библиотека для иммутабельного изменения состояния из тех, что существуют сегодня. Авторы Redux сфокусировались на решении одной единственной проблемы — управление состоянием приложения (state), и сделали это хорошо. Redux получился достаточно модульным, чтобы работать с различными библиотеками для отображения представления (view).


React использует аналогичный сфокусированный подход для представления (view), имеет эффективный виртуальный DOM, который можно подключить к DOM браузера, нативным мобильным приложениям, VR и прочим платформам.


Что бы создавать надежные, функциональные и легко отлаживаемые web-приложения, можно использовать React и Redux. Правда, потребуются вспомогательные библиотеки вроде react-redux и куча boilerplate-кода. А можно попробовать Hyperapp.

Читать дальше →
Total votes 51: ↑48 and ↓3+45
Comments39

Как найти компанию спонсора визы в США. Tips and Tricks

Reading time9 min
Views88K

image


Статья для тех, кто хочет переехать работать в США. На Хабре есть несколько хороших статей про поиск работы в Америке. Тут я постараюсь добавить к ним собственный опыт и поделиться несколькими приемами, которые помогли мне получить долгожданный джоб оффер.


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

Читать дальше →
Total votes 48: ↑39 and ↓9+30
Comments73

Новогодние подарки, часть первая: Meltdown

Reading time13 min
Views104K
Да, я знаю, что это уже третий материал на GT/HH по данной проблеме.

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

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

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

К счастью, подвержены они ей в разной степени. К несчастью, самый серьёзный удар пришёлся на самые распространённые процессоры — Intel, причём затронул он абсолютно все выпускающиеся и практически все эксплуатируемые (единственным исключением являются старые Atom, выпущенные до 2013 года) процессоры этой компании.
Читать дальше →
Total votes 179: ↑177 and ↓2+175
Comments265

Новогодние подарки, часть вторая: Spectre

Reading time11 min
Views73K
Часть первая: Meltdown.

Несмотря на всю мощь уязвимости Meltdown, принесённое этим Новым годом счастье не было бы полным, если бы не вторая часть открытия, не ограничивающаяся процессорами Intel — Spectre.

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

Строго говоря, Spectre не является одной уязвимостью — уже на старте заявлены два различных механизма (CVE-2017-5753 и CVE-2017-5715), а авторы отмечают, что может быть ещё и много менее очевидных вариантов.

В основе своей Spectre похожа на Meltdown, так как также базируется на том факте, что в ходе спекулятивного выполнения кода процессор может выполнить инструкции, которые он не стал бы выполнять при условии строго последовательного (неспекулятивного) вычисления, и, хотя в дальнейшем результат их выполнения отбрасывается, его отпечаток остаётся в процессорном кэше и может быть использован.
Читать дальше →
Total votes 148: ↑147 and ↓1+146
Comments140

Легальный вывод средств с Upwork в РФ

Reading time8 min
Views66K
На Хабре уже написано достаточно много статьей по теме, в частности:


В ответ на повторяющиеся просьбы написать статью, в которой:

  • разбросанные по разным статьям крупицы будут собранны в единое целое
  • всевозможные противоречия будут устранены
  • все сведения будут иметь актуальный характер
  • будут учтены пожелания такие как «а можно с картинками? :)»

родилось следующее руководство.
Total votes 78: ↑70 and ↓8+62
Comments383

Как удалить свой IP из чёрного списка Gmail

Reading time10 min
Views57K

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

Проблемы с чёрным списком Gmail? Вы пришли по адресу.

Используя описанный ниже процесс, мы успешно разрешили почти все случаи включения в чёрный список Gmail, с которыми сталкивались.
Читать дальше →
Total votes 26: ↑25 and ↓1+24
Comments6
1
23 ...

Information

Rating
Does not participate
Location
Таиланд
Date of birth
Registered
Activity