Pull to refresh
0
0
Игорь Григорьев @IronLimon

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

Send message

CSS-классы вредны

Level of difficultyMedium
Reading time13 min
Views22K

Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда? Сейчас я расскажу о том, почему настало время отказаться от него. Имена классов — это архаичная система, используемая как неудачный посредник для примитивов UI; ещё хуже то, что они создают ужасные сочетания, приводящие к комбинаторному взрыву странных пограничных случаев. Давайте изучим этот вопрос, начав со скучного урока истории, который вы уже слышали миллион раз.
Читать дальше →
Total votes 75: ↑66 and ↓9+79
Comments113

i18n. Локализация в Angular

Level of difficultyEasy
Reading time8 min
Views4.4K

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

Уточню, что данная статья описывает процессы для Angular v.9 и выше. Надеюсь информация будет вам полезна.

Читать далее
Total votes 5: ↑5 and ↓0+5
Comments5

Забудьте про div, семантика спасёт интернет

Reading time6 min
Views118K

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.

Читать далее
Total votes 47: ↑41 and ↓6+44
Comments55

Почему Trunk Based Development – лучшая модель ветвления. Андрей Александров

Reading time10 min
Views100K


В State Of DevOps 2018 от DORA мы видим, что Нigh Performing компании используют Trunk Based Development. Разберемся, почему именно ее, какие ее преимущества и недостатки имеет эта модель.

Читать дальше →
Total votes 24: ↑15 and ↓9+9
Comments8

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Как скрыть элемент доступно?»

Level of difficultyMedium
Reading time6 min
Views8.4K


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


Сегодня я отвечу на следующий вопрос: «Как скрыть элемент с помощью CSS доступно?»

Читать дальше →
Total votes 24: ↑24 and ↓0+33
Comments10

Что нужно знать о современном CSS (весна 2024 года)

Level of difficultyMedium
Reading time15 min
Views28K

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

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

Читать далее
Total votes 36: ↑35 and ↓1+45
Comments11

Почему вы себя обесцениваете: какую выгоду это дает и что делать с ощущением своей несостоятельности?

Level of difficultyEasy
Reading time6 min
Views8.8K

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

Читать далее
Total votes 25: ↑18 and ↓7+13
Comments18

FrontEnd разработка в Docker

Reading time5 min
Views29K

Когда приходит новый разработчик, то перед ним встает задача запустить окружение для разработки. И до недавнего времени - это часто становилось похожим на танцы с бубном. Поставь 10 разных пакетов определенных версий, а еще окажется что твой собственный pet-проект требует другие версии или это даже может быть другой проект в рамках той же работы. Каждый раз из этой ситуации специалист выходил по своему, но основной проблемой помимо временных затрат на эту конфигурацию - оставалось, то что работоспособность от разработчика к разработчику или runner не гарантировалась.

К счастью - эта проблема решена в современном мире разработки, если не полностью, то в большей мере. Нам на выручку пришел Docker.

Read more
Total votes 9: ↑9 and ↓0+9
Comments6

Как информативно оформить профиль на GitHub?

Level of difficultyEasy
Reading time6 min
Views16K

Тетрадь, дневник — ваше лицо. А круто оформленный профиль на гитхабе — статус вашей занятости. Чем больше участий в проектах, тем безработнее... Пока молодые специалисты оформляют свои страницы с "Lib-Meta-Neo ML-Scientist 10 years of expirience" на LinkedIN настоящий амбассадор HR и трудового найма бегут на GitHub. Именно там выискиваются самые закостенелые гики программирования, вносящие тридцать пять тысяч коммитов в безбюджетные опенсорс проекты; именно там рождаются гении, разрабатывающие AAA-проекты геймдева на ассемблере. 

Все это шутки. 

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

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

Читать далее
Total votes 26: ↑24 and ↓2+26
Comments5

Веб установщик на чистом WINAPI с поддержкой Hi DPI и векторным лого

Reading time10 min
Views9.9K
В наше время это, наверно, одно из основных применений для приложений написанных на чистом WINAPI. Писать что-то серьёзнее нескольких простых окон на чистом WINAPI уже не так весело, а вот маленький установщик – самое то.

Так как на дворе 2018 год, писать просто приложение как-то не очень. Давайте уж соответствовать веяниям времени – установщик будет с поддержкой Hi DPI режимов. Даже в ноутбуках уже 4К экраны не редкость, чего уж говорить про десктопы. Ну и так как установщик — это то, что должно быстро загрузиться будем экономить на том, что действительно не сложно сделать и самому. Ну и попробуем схитрить чтобы использовать векторную графику без дополнительных библиотек – нам же нужен красивый логотип!


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

Профессиональная работа в VS Code: 4 совета

Reading time6 min
Views19K
VS Code — это, в наши дни, один из самых популярных редакторов кода. Продуманный подход к использованию этого редактора способен значительно повысить продуктивность программиста. В этом материале представлено несколько советов по профессиональному использованию VS Code. Хочется надеяться, что эти советы вам пригодятся.


Читать дальше →
Total votes 36: ↑24 and ↓12+25
Comments10

Взгляд со стороны EcmaScript на общую теорию ООП

Reading time7 min
Views11K
Привет, Хабр!

До сего дня я занимался лишь переводами интересных, на мой взгляд, статей англоязычных авторов. И вот настала пора самому что-то написать. Для первой статьи я выбрал тему, которая, я уверен, будет полезна junior-разработчикам, стремящимся дорасти до «мидлов», т.к. в ней будет разобрана схожесть/отличие JavaScript от классических языков программирования (С++, С#, Java) в плане ООП. Итак, начнём!

Общие положения парадигмы


Если мы посмотрим определение JavaScript по Википедии, то увидим следующее понятие:
JavaScript (/ˈdʒɑːvɑːˌskrɪpt/; аббр. JS /ˈdʒeɪ.ɛs./) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией языка ECMAScript (стандарт ECMA-262).

Как следует из этого определения, JavaScript существует не сам по себе, а является реализацией некоей спецификации EcmaScript. Помимо него, эту спецификацию реализуют и другие языки.
Читать дальше →
Total votes 21: ↑20 and ↓1+19
Comments22

Когда и зачем нужен CI/CD

Reading time6 min
Views27K

Скорость сборки продукта — важное конкурентное преимущество в разработке программного обеспечения. То, что раньше делалось месяцами, сегодня выполняется за считанные дни без потери качества. Путь к ускорению релизов лежит через автоматизацию и внедрение CI/CD.

В статье разберём, когда и зачем нужен CI/CD, но перед этим, расскажем, как устроена методология и почему эффективнее внедрить её, чем деплоить вручную.

Читать далее
Total votes 17: ↑17 and ↓0+17
Comments7

Полное практическое руководство по Docker: с нуля до кластера на AWS

Reading time39 min
Views1.7M



Содержание



Вопросы и ответы


Что такое Докер?


Определение Докера в Википедии звучит так:


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



Ого! Как много информации.

Читать дальше →
Total votes 125: ↑124 and ↓1+123
Comments44

this и ScopeChain в EcmaScript

Reading time7 min
Views11K
Привет, Хабр!

В предыдущей статье мы рассматривали общую теории ООП в применении к EcmaScript и популярное заблуждение начинающих разработчиков относительно отличия ООП в JS и классических языках.

Сегодня мы поговорим о двух других не менее важных концепциях EcmaScript, а именно связи сущности с контекстом исполнения (this и есть эта самая связь) и связи сущности с порождающим контекстом(ScopeChain).

Итак, начнём!

this


На собеседованиях в ответ на вопрос: «Расскажите подробнее про this.». Начинающие разработчики, как правило, дают очень туманные ответы: "this – это объект «перед точкой», который использовался для вызова метода", "this — контекст, в котором был вызвана функция" и т.д.…

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

Допустим, у нас есть программа на языке JavaScript, в которой есть переменные объявленные глобально; глобальные функции; локальные функции(объявленные внутри других функций), функции, возвращаемые из функций.
Читать дальше →
Total votes 12: ↑12 and ↓0+12
Comments11

Чем отличаются JavaScript и ECMAScript?

Reading time6 min
Views74K
Перевод What’s the difference between JavaScript and ECMAScript?

Как-то мы попробовали гуглить «различие между JavaScript и ECMAScript».

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

«ECMAScript — это стандарт».
«JavaScript — это стандарт».
«ECMAScript — это спецификация».
«JavaScript — это реализация стандарта ECMAScript».
«ECMAScript — стандартизованный JavaScript».
«ECMAScript — это язык».
«JavaScript — это диалект ECMAScript».
«ECMAScript — это JavaScript».


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

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

Ну что, погнали.
Читать дальше →
Total votes 47: ↑44 and ↓3+41
Comments67

Как работает JS: классы и наследование, транспиляция в Babel и TypeScript

Reading time11 min
Views45K
В наши дни использование классов являются одним из самых популярных способов структурирования программных проектов. Этот подход к программированию применяется и в JavaScript. Сегодня мы публикуем перевод 15 части серии материалов, посвящённых экосистеме JS. В этой статье речь пойдёт о различных подходах к реализации классов в JavaScript, о механизмах наследования и о транспиляции. Начнём мы с рассказа о том, как работают прототипы и с анализа различных способов имитации наследования, основанного на классах, в популярных библиотеках. Далее мы поговорим о том, как, благодаря транспиляции, можно писать JS-программы, использующие возможности, которые либо отсутствуют в языке, либо, хотя и существуют в виде новых стандартов или предложений, находящихся на разных стадиях согласования, пока не реализованы в JS-движках. В частности, речь пойдёт о Babel и TypeScript и о классах ECMAScript 2015. После этого мы разберём несколько примеров, демонстрирующих особенности внутренней реализации классов в JS-движке V8.
image
Читать дальше →
Total votes 25: ↑24 and ↓1+23
Comments17

Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация

Reading time16 min
Views48K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Все мы знаем о том, что JavaScript-код веб-проектов может разрастаться до прямо-таки огромных размеров. А чем больше размер кода — тем дольше браузер будет его загружать. Но проблема тут не только во времени передачи данных по сети. После того, как программа загрузится, её ещё надо распарсить, скомпилировать в байт-код, и, наконец, выполнить. Сегодня мы представляем вашему вниманию перевод 14 части серии материалов об экосистеме JavaScript. А именно, речь пойдёт о синтаксическом анализе JS-кода, о том, как строятся абстрактные синтаксические деревья, и о том, как программист может повлиять на эти процессы, добившись повышения скорости работы своих приложений.

image
Читать дальше →
Total votes 25: ↑24 and ↓1+23
Comments5

Манипулируй DOM правильно

Level of difficultyMedium
Reading time8 min
Views14K

Зачастую, когда я наталкиваюсь на информацию о работе с DOM в Angular, в них присутствуют упоминания об одном или нескольких из этих классов: ElementRef, TemplateRef, ViewContainerRef. Именно упоминания, ведь общее  представление достаточно сложно сложить, даже тщательно изучив документацию Angular. Поэтому я решил подробно сформулировать, как это работает и для чего нужно.

Подробнее
Total votes 2: ↑2 and ↓0+2
Comments1

Директор директив. Расширяем функционал angular-компонентов красиво. Директива-контекст

Level of difficultyMedium
Reading time8 min
Views3.7K

Игнорируете кастомные директивы в Angular? Зря-зря, многое упускаете.

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

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments3
1

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity

Specialization

Frontend Developer, Fullstack Developer
Middle
Angular
TypeScript
React
Redux
OOP
Git
.NET
SCSS
JavaScript
Web development