Pull to refresh
1
0
Send message

Библиотека Frontend-разработчика, часть 2: Интернет-ресурсы

Reading time4 min
Views10K

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

Ну, удиви
Total votes 7: ↑7 and ↓0+7
Comments3

Главные причины медленной работы Angular-приложений

Reading time9 min
Views18K
Angular — это быстрый фреймворк. Он даёт разработчикам обширные возможности по улучшению производительности за счёт тонких настроек. Правда, программистам практически никогда не требуется делать что-то особенное для того, чтобы создавать чрезвычайно производительный код, работая над обычными приложениями.

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



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

Этот материал посвящён разбору основных причин того, что Angular-приложения становятся медленными по мере роста их масштабов. При этом приведённые здесь советы можно будет применить при разработке крупных проектов на любом фреймворке, а не только на Angular.
Читать дальше →
Total votes 22: ↑21 and ↓1+34
Comments39

Как стать тимлидом фронтендеров и как жить после этого — расшифровка эфира

Reading time15 min
Views12K
15 июня в нашем инстаграм-аккаунте прошел прямой эфир с Ильей, руководителем фронтенд-разработки в Яндекс.Деньги. Выкладываем запись эфира и расшифровку.



Меня зовут Илья, я работаю в компании Яндекс.Деньги и руковожу фронтендом. До этого был бэкенд-разработчиком, писал на C#, около 5 лет назад перешел во фронтенд. Чуть больше года руковожу. Вот такой путь развития. Еще активно участвую в Burning Lead – это сообщество для ведущих разработчиков, тимлидов, людей, которые так или иначе пересекаются с задачами управления; надеюсь, ребята из сообщества слушают стрим.
Total votes 22: ↑20 and ↓2+37
Comments4

Клиентский мониторинг производительности

Reading time18 min
Views22K

Клиентский мониторинг производительности


Привет, Хабр! Меня зовут Влад, я лид направления Web Performance в Тинькофф.


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


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


Ведущие игроки IT-индустрии продолжают обращать внимание на важность производительности, проводят масштабные исследования и эксперименты, разрабатывают новые концепции, инструменты и API. А в ближайшем будущем Google и вовсе будет учитывать основные показатели производительности в поисковой выдаче.


Пользователям нравятся отзывчивые интерфейсы, а бизнесу — прибыльные проекты. И если производительность играет в этом не последнюю роль, то почему бы не заняться ее оптимизацией?

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

Как перестать бояться и создать свой Angular CLI Builder

Reading time6 min
Views5.3K


Всем привет! Меня зовут Игорь, я — фронтэндер в Tinkoff.ru. И, как ни странно, я давно и безнадежно прикипел к Angular и ко всему, что с ним связано.


Очень хорошо помню свои первые проблемы со сборкой приложения на Angular: как передать в приложение переменные окружения или изменить алгоритмы сборки стилей? Я так к этому привык при работе с React. И сначала это решали с помощью ng eject: конфигурация webpack просто извлекалась из недр Angular CLI и изменялась как душе разработчика угодно. Выглядело это как костыль — webpack.config.js был раздутым и сложным. Но, когда Angular CLI v8.0.0 принес нам стабильный CLI Builders API, который позволяет кастомизировать, заменять или даже создавать новые CLI команды, все стало проще.


Сейчас самый популярный билдер для кастомизации конфигурации webpack — @angular-builders/custom-webpack. Если заглянуть в исходники всех билдеров, поставляемых пакетом, можно увидеть очень компактные решения, не превышающие и 30 строк кода.


Го тогда запилим свой? Challenge Accepted!

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

Реактивное приложение без Redux/NgRx

Reading time11 min
Views6.7K


Сегодня мы детально разберем реактивное angular-приложение (репозиторий на github), написанное целиком по стратегии OnPush. Еще приложение использует reactive forms, что вполне типично для enterprise-приложения.

Мы не будем использовать Flux, Redux, NgRx и вместо этого воспользуемся возможностями уже имеющимися в Typescript, Angular и RxJS. Дело в том, что данные инструменты не являются серебряной пулей и могут внести излишнюю сложность даже в простые приложения. Нас об этом честно предупреждают и один из авторов Flux, и автор Redux и автор NgRx.

Но эти инструменты дают нашим приложениям очень приятные характеристики:

  • Predictable data flow;
  • Поддержка OnPush by design;
  • Неизменяемость данных, отсутствие накопленных side effect-ов и прочие приятные мелочи.

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

Как вы сами убедитесь к концу статьи, это довольно простая задача — если убрать из статьи детали работы Angular и OnPush, то остается лишь несколько простых идей.
Читать дальше →
Total votes 11: ↑11 and ↓0+11
Comments0

Мой любимый файл в кодовой базе Chromium

Reading time6 min
Views86K
Код Хромиума весьма обширен, там каждому найдётся что-то по вкусу. А я вот решил рассказать о своём любимом файле в нём (а у вас есть такой?). Этот файл отражает всё: боль, разочарование, надежду, упорство, силу воли, ответственность за чужие провалы и самопожертвование. Я иногда читаю его и плачу и проникаюсь пониманием, какая же огромная часть айсберга скрыта под водой. Это, в общем, даже не файл с кодом. Это файл с конфигом, описывающим баги видеокарт, которые Хромиуму приходится обходить для нормального отображения своих страниц на разных платформах. Вот он: https://cs.chromium.org/chromium/src/gpu/config/gpu_driver_bug_list.json

О чём вообще идёт речь? Давайте вспомним, как работает браузер: вы набираете какой-то адрес в адресной строке, браузер загружает контент и отображает его. Чуть детальнее об этом рассказывает хорошая статья «What happens when you type google.com into your browser and press enter?» (и сразу несколько её переводов на Хабре). В ней одним из последних пунктов упоминается, мол, «а теперь, когда всё готово, отрисовываем картинку на экране». Ага, вот так берём и отрисовываем, конечно.
Читать дальше →
Total votes 186: ↑185 and ↓1+184
Comments179

CSS Grid — швейцарский армейский нож для макетов сайтов и приложений

Reading time9 min
Views52K
В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.

Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:


В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный div, имеющий margin, border и padding. Для создания CSS grid контейнера добавим свойство display: grid. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header, sidebar, footer или другие аналогичные элементы макета сайта, зависящие от его дизайна.
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments21

Руководство по Node.js, часть 3: хостинг, REPL, работа с консолью, модули

Reading time14 min
Views81K
Перед вами третья часть перевода руководства по Node.js. Сегодня мы поговорим о выборе хостинга для Node.js-проектов, о том, как работать с Node.js в режиме REPL и как запускать скрипты с аргументами, о взаимодействии с консолью и о модулях.



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

Клод Шеннон: как гений решает проблемы

Reading time5 min
Views12K


Клоду Шеннону потребовалось около десяти лет, чтобы полностью сформулировать свою эпохальную теорию информации.

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

Однако только в 1948 году он опубликовал Математическую Теорию Связи.

Правда, это был не единственный его крупный вклад в науку. Еще будучи студентом MIT (Массачусетский технологический институт), в свои скромные 21, он опубликовал работу, которую многие считают, пожалуй, наиболее важной магистерской диссертацией века.

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

Мы запросто бросаемся словом «гений», но лишь немногие люди на свете по праву заслужили именоваться так, и Клод Шеннон — один из них. Он мыслил иначе, мыслил играючи.

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

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

Любая задача имеет очертания и форму. Для решения задач первым делом нужно научиться их понимать.

Переведено в Alconost
Читать дальше →
Total votes 17: ↑11 and ↓6+5
Comments6

Как Discord одновременно обслуживает 2,5 млн голосовых чатов с помощью WebRTC

Reading time8 min
Views27K


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

В статье рассматриваются различных технологии, которые использует Discord для аудио/видеочатов.

Для ясности всю группу пользователей и каналов мы будем называть «группа» (guild) — в клиенте они называются «серверами». Вместо этого здесь термин «сервер» относится к нашей серверной инфраструктуре.
Читать дальше →
Total votes 24: ↑24 and ↓0+24
Comments6

Руководство по Node.js, часть 2: JavaScript, V8, некоторые приёмы разработки

Reading time9 min
Views79K
Публикуя первую часть перевода этого руководства по Node.js, мы решили узнать мнение аудитории о том, стоит ли нам продолжать работу над проектом, и провели небольшой опрос. Как оказалось, нашу инициативу поддержали примерно 94% проголосовавших. Поэтому встречайте вторую часть руководства по Node.js.



Сегодня мы поговорим о том, какими знаниями в области JS нужно обладать для того, чтобы продуктивно разрабатывать приложения для платформы Node.js, обсудим различия браузерного и серверного JavaScript-кода, поговорим о JS-движках и о некоторых приёмах Node.js-разработки.

Читать дальше →
Total votes 42: ↑38 and ↓4+34
Comments3

Vanilla JS — очень мощный javascript-фреймворк

Reading time4 min
Views189K
Как ни странно, на Хабре упоминание этого мощнейшего фреймворка нашлось лишь в одном комментарии от апреля 2012 года.

Вступление


Для меня эта тема особенно актуальна, ведь последнее время на Хабре упоминается огромное количество js-фреймворков. Какие-то из них авторы различных проектов находят в Сети, какие-то — пишут сами, не очень понимая зачем. Кто-то просто пишет свои велосипеды.

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

Если вам на Node.js проекте надо собрать пачку js-файлов и сжать их — глупо писать или подключать тяжёлые фреймворки с кучей настроек, параметров, дополнений и методов, ведь простейший скрипт, склеивающий файлы и прогоняющий их через Кроукфордский jsmin будет намного быстрее, надёжнее и проще.

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

Vanilla JS


Итак, начнём обзор этого мощнейшего и самого популярного в мире JS-фреймворка.
Total votes 215: ↑151 and ↓64+87
Comments84

Квантовый переключатель в стиле Шредингера

Reading time8 min
Views6.8K


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

Если точнее, то об исследовании, которое экспериментальным путем демонстрирует факт того, что далеко не всегда мы имеем одно единственное состояние чего-либо. Применив знания из квантовой механики, ученым удалось добиться неопределенного причинного порядка в квантовом переключателе. Что это такое и как это работает мы узнаем из их доклада. Поехали.
Читать дальше →
Total votes 17: ↑15 and ↓2+13
Comments33

Делаем web-аутентификацию через блокчейн

Reading time5 min
Views15K


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

Читать дальше →
Total votes 29: ↑24 and ↓5+19
Comments29

«Трое в лодке, нищета и собаки», или как Антиплагиат ищет парафраз

Reading time7 min
Views33K
Наступил новый учебный год. Студенты получили расписание занятий и стали задумываться о пьянках-гулянках-девушках-гитарах будущей сессии. Написание курсовых, дипломов, статей и диссертаций не за горами. А значит, грядут и анализ текстов на наличие заимствований, и отчеты о проверке, и прочая головная студенческая и администраторская боль. И у сотен тысяч людей (без шуток – мы посчитали!) уже возникает закономерный вопрос – как же обмануть «Антиплагиат». В нашем случае практически все способы обмана так или иначе связаны с искажениями текста. Мы уже научили «Антиплагиат» обнаруживать текст, «искаженный » с помощью перевода с английского на русский (мы писали об этом в первой статье нашего корпоративного блога). Сегодня речь пойдет о том, как обнаруживать самый эффективный, хотя и трудоемкий способ искажения текста – парафраз.



Читать дальше →
Total votes 49: ↑39 and ↓10+29
Comments172

Руководство по Node.js, часть 1: общие сведения и начало работы

Reading time10 min
Views331K
Мы начинаем публикацию серии материалов, которые представляют собой поэтапный перевод руководства по Node.js для начинающих. А именно, в данном случае «начинающий» — это тот, кто обладает некоторыми познаниями в области браузерного JavaScript. Он слышал о том, что существует серверная платформа, программы для которой тоже пишут на JS, и хотел бы эту платформу освоить. Возможно, вы найдёте здесь что-то полезное для себя и в том случае, если уже знакомы с Node.js.

Кстати, в прошлом году у нас был похожий по масштабам проект, посвящённый bash-скриптам. Тогда мы, после публикации всех запланированных материалов, собрали их в виде PDF-файла. Так же планируется поступить и в этот раз.



Сегодня мы обсудим особенности Node.js, начнём знакомство с экосистемой этой платформы и напишем серверный «Hello World».

Читать дальше →
Total votes 47: ↑39 and ↓8+31
Comments25

Способы синхронизации вкладок браузера

Reading time5 min
Views34K


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

Ниже опишу различные способы решения подобных задач.
Читать дальше →
Total votes 25: ↑25 and ↓0+25
Comments16

Колмогоровская сложность и наши поиски смысла

Reading time7 min
Views16K

Что математика может рассказать нам о поиске порядка в хаосе жизни




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

В нашей жизни мы часто задумываемся над закономерностями происходящих вокруг нас событий. Мы задаёмся вопросом, случайны ли наши жизни, или у них есть какой-то смысл, уникально истинный и глубокий. Я, как математик, часто обращаюсь к числам и теоремам за идеями по поводу подобных вопросов. И так получилось, что я кое-что узнал о поиске смысла в закономерностях жизни благодаря одной из самых глубоких теорем математической логики. Эта теорема, проще говоря, демонстрирует, что в принципе невозможно узнать, является ли объяснение закономерности наиболее глубоким или интересным из всех объяснений. Точно так же, как в жизни, поиск смысла в математике ничем не ограничен.
Читать дальше →
Total votes 23: ↑22 and ↓1+21
Comments25

Ваш стиль чтения книг много говорит о вашем интеллекте — и вот почему

Reading time11 min
Views221K


Расскажем, почему у умнейших людей в мире — горы книг, которых они не читают


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

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

Естественно, вы вытаскиваете кредитку или нажимаете кнопочку «Купить».

И книги накапливаются. У вас на полках. В спальне. В машине. Может быть, даже в ванной.

Наиболее самозабвенные библиофилы изыскивают место там, где ранее никто книг поставить не догадывался:


Источник: http://bit.ly/2JRrqbk

И по мере того, как накапливаются книги, растет и ваша алчность. Нет, не стремление прочесть все книги, которые вы покупаете. Жажда не дочитывать тех книг, к которым вы приступили.

Если следующая сентенция — про вас, то мне предстоит вас обрадовать.

«Даже если у вас нет времени прочитать их все, переполнение книжных полок или ридера идет вам на пользу».
— Джессика Стиллмен

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

Переведено в Alconost
Читать дальше →
Total votes 43: ↑36 and ↓7+29
Comments210
1

Information

Rating
Does not participate
Registered
Activity