Articles / Bookmarks / Profile of armak / Habr

@armak^{read⁠-⁠only}

Frontend разработчик

ProfileBookmarks163

nikolayshabalin Jun 23 2021 at 05:38

Что можно положить в тег <head>

14 min

35K

HTML Academy corporate blogWebsite development*Semantics*HTML*

Tutorial

Translation

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

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

+35

Xneg Sep 21 2021 at 07:18

Типичные ошибки архитектора, или Как перестать бояться и полюбить RFC

8 min

34K

Dodo Engineering corporate blogSystem Analysis and Design*Development Management*Project management*Reading room

Всем привет! С вами Женя, разработчик Dodo Engineering и один из ведущих подкаста «Читаем вместе». Он посвящен IT-книгам. В каждом сезоне мы планируем читать и разбирать одну книгу. Уже подходит к концу первый сезон, который мы посвятили книге Fundamentals of Software Architecture. Она написана архитекторами для архитекторов, но разработчикам, особенно тем, которые интересуются, как создавать работающие системы, тоже может быть очень интересна и полезна.

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

Не можете найти концов, почему было принято то или иное решение? Рассказываете коллегам по сто раз одно и то же? Обсуждения в мессенджерах превращаются в срачи на десятки сообщений?

Знакомо? Нам тоже. Но мы смогли победить эти проблемы.

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

+36

alexbraun Sep 17 2021 at 10:43

Построение библиотек компонентов и их организация. Или как извлечь максимальную пользу для бизнеса c React и Angular

3 min

4.7K

Европлан corporate blogReactJS*Angular*C#*Website development*

Наша компания разрабатывает десятки продуктов. Ряд продуктов работает на Angular, ряд на React. Пользователи систем в зависимости от этапа бизнес-процесса и роли взаимодействует с определенным продуктом. Часто, в рамках бизнеса мы должны показывать одни и те же данные в разных продуктах. Эти данные отображаются в виде UI компонентов.

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

Timeweb_Cloud Feb 18 2021 at 10:28

Nuxt.js app от UI-кита до деплоя

17 min

36K

Timeweb Cloud corporate blogJavaScript*VueJS*

Привет, Хабр!

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

В этой статье обсудим базу, основы создания приложения на Nuxt.js:

создание и конфигурация проекта,
assets и static: стили, шрифты, изображения, посты,
создание компонентов,
создание страниц и layouts,
развертывание приложения (деплой).

Смотрите, что получилось!

Читать дальше →

vdsina_r Aug 13 2020 at 07:09

Новое CSS-свойство content-visibility ускоряет отрисовку страницы в несколько раз

5 min

41K

VDSina.ru corporate blogCSS*Web design*Interfaces*Website development*

Recovery Mode

5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. content-visibility заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.

В этой демке content-visibility: auto, применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз

+31

Kozack Jan 7 2020 at 09:33

9 советов по повышению производительности Vue

8 min

36K

VueJS*

Tutorial

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

Читать дальше →

+26

Kasheftin Feb 19 2021 at 12:32

Улучшение производительности vue приложения

8 min

19K

Website development*JavaScript*Programming*VueJS*

Tutorial

У нас в TeamHood есть wiki. Там собралась коллекция рекомендаций, в том числе, по улучшению производительности тяжелого фронтенда на vue.js. Улучшать производительность понадобилось, потому что в силу специфики наши основные экраны не имеют пагинации. Есть клиенты, у которых на одной kanban/gantt доске больше тысячи вот таких вот карточек, все это должно работать без лагов.

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

+17

SkillFactory Oct 2 2020 at 13:00

Прогулка по граблям: 10 критических ошибок разработки теста для проверки знаний

8 min

2.9K

Skillfactory corporate blogStudying in ITMachine learning*IT careerData Engineering*

Перед записью на новый курс Machine Learning Advanced мы тестируем будущих студентов, чтобы определить уровень их готовности и понять, что именно им необходимо предложить для подготовки к курсу. Но возникает дилемма: с одной стороны, мы должны проверить знания по Data Science, с другой — мы не можем устроить полноценный 4-х часовой экзамен.

Для решения такой задачи мы развернули штаб по TestDev прямо в команде разработки курсов по Data Science (и, похоже, это только начало). Представляем вам список 10 «граблей», на которые наступают при разработке тестов для оценки знаний. Надеемся, что мир онлайн-обучения станет после этого чуть лучше.

От винта!

MagisterLudi Jan 15 2020 at 17:34

Подборка 143 переводов эссе Пола Грэма (из 184)

8 min

64K

Studying in ITStart-up developmentProgramming*Venture investment

Пол Грэм — один из самых уважаемых людей среди ИТишников, основателей и инвесторов. Он первоклассный программист (написал два языка программирования), хакер, создатель дерзкого акселератора Y Combinator, философ. Своими помыслами и разумом Пол Грэм врывается в широкий спектр областей: от прогнозирования развития языков программирования на сто лет вперед до человеческих качеств и способов починить/хакнуть экономику. А ещё он осознает важность того, чтобы формулировать свои мысли в текст и делиться ими с окружающими.

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

Первую подборку переводов эссе Пола Грэма меня вдохновили сделать коллеги из tceh.com (60 переводов из 176). Вторую — Edison Software (125 переводов). Третью — PhilTech-акселератор (134 перевода и еще несколько в процессе). Потом был период (2017, 2018 и 2019), когда Пол Грэм не писал эссе (а занимался с детьми), а только немного в Твиттер и дал одно видео-интервью для стартап-школы. Но в конце 2019 и начале 2020 года он вновь стал публиковать глубокие тексты об которые интересно подумать. Предлагаю вашему вниманию ссылки на новые переводы (upd с прошлой подборки) и полный список всех эссе.

Novelty and Heresy (Да здравствует ересь!)
The Lesson to Unlearn (Вредные уроки)
The Bus Ticket Theory of Genius (Теория навязчивых идей)

Five Questions about Language Design (Пять вопросов о проектировании языков программирования)
What Made Lisp Different (Что сделало Lisp особенным)
After the Ladder (На смену корпоративной лестнице)
What I’ve Learned from Hacker News (Чему я научился у Hacker News)
Snapshot: Viaweb, June 1998 (разбор полетов: Viaweb июня 1998 года)
Some Heroes (Мои кумиры)
The Equity Equation (Как делить доли в стартапе)

Бонус - видео из стартап-школы 2018 с русскими субтитрами

+27

Plarium May 29 2020 at 12:42

Мой топ бесплатных инструментов для разработчиков

4 min

31K

Plarium corporate blogProgramming*Website development*Development of mobile applications*

Translation

Это перевод статьи с ресурса dev.to. Ее автор Fayaz Ahmed делится списком своих любимых инструментов для разработчиков.

Я разрабатываю такие проекты, как Tvflix, GSON, Appy Dev, а также множество различных микропроектов, поэтому увлекаюсь поиском бесплатных инструментов для моей работы.

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

Читать дальше →

nrcpp May 28 2020 at 09:48

Часть 6. Карьера программиста. Свой стартап

10 min

11K

Biography of geeksIT careerStart-up developmentFreelanceReading room

Продолжение рассказа «Карьера программиста».

Я не притрагивался к книге “Карьера программиста” ровно год, и видимо не зря. За последние месяцы, со мной произошло много трансформаций, которые позволят дополнить эту историю материалами о том, как создать и развивать IT-компанию. Это кажется закономерным. Если вы амбициозный программист или фрилансер, то рано или поздно задаетесь вопросом: «А что дальше?». Вот, я уже старший разработчик — а что дальше? Назначили архитектором — а что дальше?..

Но давайте вернемся к тому, где остановились. Последняя часть №5. Карьеры Программиста окончилась тем, что я заканчивал карьеру разработчика-фрилансера и собираюсь вложить все свои сбережения в создание стартапа. С момента публикации последней 5-ой главы, мне пришло с десяток личных сообщений на Хабр и даже несколько в социальные сети, с вопросом о продолжении книги. Многим читателям Хабра оказалось полезным и познавательным сие чтиво. И так как каждое дело нужно доводить до конца и на это дело есть спрос — спешу продолжить делиться своим опытом.

Читать дальше →

VitaliSergey Mar 12 2020 at 10:43

10 отличных Github репозиториев, которые должен знать каждый веб-разработчик

3 min

100K

Studying in ITWebsite development*JavaScript*GitHub*

Translation

Кроме огромных репозиториев с источниками для подготовки к интервью, здесь много чего интересного

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

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

Читать дальше →

+62

ru_vds Mar 3 2020 at 09:30

HTTP-заголовок Feature-Policy и контроль поведения веб-страниц в браузерах

9 min

11K

RUVDS.com corporate blogWebsite development*Browsers

Translation

Существует одна совершенно бесподобная методика, позволяющая держать производительность веб-проекта под контролем. Она заключается во внедрении в процесс разработки механизмов, результаты работы которых хорошо заметны. Эти механизмы нацелены на то, чтобы всегда напоминать программисту о важности производительности. В этом контексте есть кое-что, что мне очень нравится. Это — HTTP-заголовок Feature-Policy.

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

Например, можно сообщить браузеру о том, что он не должен позволять использовать API Geolocation, передав ему следующий заголовок:

Feature-Policy: geolocation 'none'

У использования заголовка Feature-Policy есть, с точки зрения безопасности и производительности, множество плюсов. Но мне сейчас особенно нравится то, как Feature-Policy можно использовать для того, чтобы сделать более заметными проблемы производительности сайтов, которые обычно легко проглядеть. Это можно сравнить с чем-то вроде «линтинга производительности». В частности, речь идёт о выявлении проблем с изображениями, используемыми в веб-проектах.

Читать дальше →

+33

iKBAHT Oct 6 2015 at 10:42

Как писать тестируемый код

17 min

88K

VK corporate blogProgramming*Designing and refactoring*Perfect code*IT systems testing*

Если вы программист (или чего хуже архитектор), то можете ли вы ответить на такой простой вопрос: как писать НЕ тестируемый код? Призадумались? Если с трудом можете назвать хотя бы 3 способа добиться не тестируемого кода, то статья для вас.

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

Читать дальше →

+54

kapod May 21 2019 at 14:33

10 верстальщиков на 30 команд. Вы рехнулись?

15 min

13K

Wrike corporate blogCSS*HTML*Website development*Personnel Management*

Всем привет! Меня зовут Костя, и я руковожу отделом верстки в компании Wrike.
В нашем отделе сейчас работает 10 человек, и все эти ребята пришли в компанию в разное время, у них различный опыт и задачи в отдельных командах. При этом все сотрудники — прекрасные специалисты, которые вдесятером умудряются закрывать потребности всего продукта в верстке.

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

Для тех, кому много букв, есть видео.

Читать дальше →

+13

mxmvshnvsk Oct 12 2019 at 09:37

10 советов и приемов, которые помогут вам стать лучшим разработчиком на VueJS

4 min

23K

Website development*VueJS*JavaScript*

Translation

Перед вами вольный перевод статьи "10 Tips & Tricks to make you a better VueJS Developer" с сайта Dev.to. Автор расскажет нам об интересных и полезных вариантах применения привычных нам средств VueJS.

Введение

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

Читать дальше →

+22

NiPh Oct 4 2019 at 17:22

Serverless Telegram бот в Яндекс.облаке, или 4.6 копейки за 1000 сообщений

5 min

30K

Node.JS*Cloud services*Yandex API*

Tutorial

"Whenever you receive a webhook update, you have two options"
Из Telegram Bot Api Faq

Привет, Хабр!

Долгое время концепция serverless (а если говорить точнее — её реализация в виде сервиса AWS Lambda) была для меня относительно понятной, но очень абстрактной идеей. Она часто звучала в Radio-T, обсуждениях на реддите, но никак не входила в мою жизнь. Рабочие проекты живут не в облаке, а домашние — зачем? Виртуалки дешевеют, Docker освоен, и всё отлично работает.

Но презентация Yandex Cloud Functions, и в особенности озвученные цены на этот сервис, дали новую пищу для размышлений.

TL;DR — дождливым пятничным вечером мы напишем простенького Telegram бота на javascript, который сможет отвечать на запросы простыми сообщениями. Если это ваш домашний проект — его использование почти наверняка обойдётся вам значительно дешевле самых бюджетных VPS.

Поехали.

Читать дальше →

+45

stitakov Sep 24 2019 at 13:01

Видеозвонок в браузере на PeerJS. Быстрый старт

7 min

15K

Video conferencingPHP*JavaScript*

From sandbox

Приветствую всех читателей Хабра. В этом году довелось писать модуль видеосвязи для одного учебного портала для созвона по видеосвязи прямо на сайте учителя с учеником. Раннее такую задачу решать не приходилось. После недолгих поисков обнаружил, что есть 2 пути: Flash и WebRTC. WebRTC в чистом виде оказался сложноват, и в общем-то это естественно, так как задача видеосвязи не является простой. Но потом я наткнулся на PeerJS, который является оберткой для WebRTC. В этой статье я расскажу, как быстро организовать свою браузерную звонилку.

Читать дальше →

+17

PaulMaly Jun 22 2018 at 12:50

Исчезающие фреймворки

6 min

48K

HTML*JavaScript*SvelteJS*Client optimization*Website development*

Translation

Этот пятничный пост посвящен переводу интересной статьи, вышедшей вчера на Medium. Решил осваивать для себя новый жанр переводов, поэтому прошу сильно не пинать, если где-то что-то не так. А по возможности даже уведомлять об ошибках и опечатках в личку.

Спасибо и хорошего прочтения!