Обновить
289.85

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

В диких условиях. Итоги проектов Школы программистов в эпоху самоизоляции

Время на прочтение6 мин
Охват и читатели2.2K
За четыре месяца занятий были прочитаны 54 лекции на двух потоках бекэнд и фронтенд, проведены несколько крутых практикумов с live-coding’ом. Проверены сотни заданий, на все вопросы получены две сотни ответов. Тут пришел 2020 год и сразу после того как мы сняли с елок гирлянды, всем нам самим пришлось нарядиться в маски и надеть перчатки. А теперь по порядку:



Десятая Школа Программистов hh.ru стала особенной. Юбилей, огромное количество планов, неиссякаемый поток учеников, неугасающая мотивация наших преподавателей и организаторов. Мы приложили максимум усилий, чтобы этот выпуск стал образцовым.
Читать дальше →

Vue.js для начинающих, урок 11: вкладки, глобальная шина событий

Время на прочтение13 мин
Охват и читатели16K
Сегодня, в 11 уроке, который завершает этот учебный курс по основам Vue, мы поговорим о том, как организовать содержимое страницы приложения с помощью вкладок. Здесь же мы обсудим глобальную шину событий — простой механизм по передаче данных внутри приложения.

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

Архитектура современных корпоративных Node.js-приложений

Время на прочтение12 мин
Охват и читатели107K
Ох, не зря в названии намёк на нетленку Фаулера. И когда фронтенд-приложения успели стать настолько сложными, что мы начали рассуждать о высоких материях? Node.js… фронтенд… погодите, но Нода же на сервере, это бэкенд, а там ребята и так всё знают!



Давайте по порядку. И сразу небольшой дисклеймер: статья написана по мотивам моего выступления на Я.Субботнике Pro для фронтенд-разработчиков. Если вы занимаетесь бэкендом, то, возможно, ничего нового для себя не откроете. Здесь я попробую обобщить свой опыт фронтендера в крупном энтерпрайзе, объяснить, почему и как мы используем Node.js.
Читать дальше →

Политика общего происхождения и CORS: визуальное руководство

Время на прочтение5 мин
Охват и читатели20K


Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «CS Visualized: CORS» автора Lydia Hallie.

Каждому разработчику приходилось сталкиваться с ошибкой Access to fetched has been blocked by CORS policy. Существует несколько способов быстрого решения данной проблемы. Однако, давайте не будем спешить и подробно рассмотрим, что из себя представляет политика CORS.

У нас часто возникает необходимость отобразить данные, находящиеся в другом месте. Прежде чем мы сможем это сделать, браузер должен отправить запрос на сервер, чтобы получить эти данные.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №427 (3 — 9 августа 2020)

Время на прочтение3 мин
Охват и читатели8.3K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Дэн Абрамов о замыканиях в JavaScript

Время на прочтение7 мин
Охват и читатели22K
Замыкания вызывают у программистов сложности из-за того, что это — «невидимая» конструкция.

Когда вы используете объект, переменную или функцию, вы делаете это намеренно. Вы думаете: «Тут мне понадобится переменная» — и добавляете её в свой код.



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

Если в двух словах, то замыкание — это когда функция обращается к переменным, объявленным за её пределами. Например, замыкание содержится в этом фрагменте кода:

let users = ['Alice', 'Dan', 'Jessica'];
let query = 'A';
let user = users.filter(user => user.startsWith(query));

Обратите внимание на то, что user => user.startsWith(query) — это функция. Она использует переменную query. А эта переменная объявлена за пределами функции. Это и есть замыкание.

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

6 мощных возможностей CSS, которые позволяют обойтись без JavaScript

Время на прочтение8 мин
Охват и читатели55K
В последнее время часто сравнивают CSS и JavaScript, споря о применении этих технологий для решения определённых задач. Споры становятся жарче по мере появления новых замечательных возможностей CSS, которые позволяют упростить решение множества задач и отказаться при этом от JS.


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

Безумный безусловный обмен

Время на прочтение4 мин
Охват и читатели4K

Безумный безусловный обмен


image


Недавно попалась мне задача иммутабельным способом поменять местами два элемента в массиве по их индексам. Задача довольно простая. Поэтому решив её разумным способом:


const swap = (arr, ind1, ind2) =>
  arr.map((e, i) => {
    if (i === ind1) return arr[ind2]
    if (i === ind2) return arr[ind1]
    return e
  })

Захотелось решить её безумным способом. Я подумал, что интересно было бы решить эту задачу:


  • Без операторов сравнения и логических операторов(&&, ||, ...)
  • Без циклов и if'ов и тернарных операторов
  • Без использования дополнительных структур данных
  • Без приведения типов
Читать дальше →

Почему Array.isArray(Array.prototype) возвращает true?

Время на прочтение7 мин
Охват и читатели8.3K

Сегодня мы с вами разберемся в следующем: что за метод такой Array.isArray(), как он устроен под капотом, что изменилось с ним после выхода ES6, почему он возвращает для Array.prototype значение true и еще много связанных с этим методом тем.

Читать далее

Меняю свой стек с понедельника

Время на прочтение5 мин
Охват и читатели19K

Приветствую, коллега!

Примерно за год до момента написания этой статьи мне начало казаться, что я начал выгорать. Работа, уже давно превратившаяся в ремесло, перестала приносить то студенческое чувство первооткрытия, знакомое каждому программисту, приносящее эйфорию. Ради этого чувства, ради новых знаний я когда-то просиживал за монитором по 18 часов в сутки. Это давно прошло… но недавно я испытал это чувство снова! Сначала оно было тихим, непривычным из-за длительного перерыва, но со временем оно разгорелось и заполыхало!

Если вы такой же, как и я, программист со стажем около от 12 лет, возрастом в районе 30 лет, задержавшийся в своем родном стойле стеке (особенно если это C# .Net MVC), то приглашаю под кат. Тем, кто моложе — думаю тоже будет полезно, чтобы заранее быть готовыми.
Ну и как это, менять стек?

Решаем практические задачи в Zabbix с помощью JavaScript

Время на прочтение8 мин
Охват и читатели21K


Тихон Усков, инженер команды интеграции Zabbix


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

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

Concurrent Mode в React: адаптируем веб-приложения под устройства и скорость интернета

Время на прочтение10 мин
Охват и читатели31K
В этой статье я расскажу о конкурентном режиме в React. Разберёмся, что это: какие есть особенности, какие новые инструменты появились и как с их помощью оптимизировать работу веб-приложений, чтобы у пользователей всё летало. Конкурентный режим — новая фишка в React. Его задача — адаптировать приложение к разным устройствам и скорости сети. Пока что Concurrent Mode — эксперимент, который может быть изменён разработчиками библиотеки, а значит, новых инструментов нет в стейбле. Я вас предупредил, а теперь — поехали.

Сейчас для отрисовки компонентов есть два ограничения: мощность процессора и скорость передачи данных по сети. Когда требуется что-то показать пользователю, текущая версия React пытается отрисовать каждый компонент от начала и до конца. Неважно, что интерфейс может зависнуть на несколько секунд. Такая же история с передачей данных. React будет ждать абсолютно все необходимые компоненту данные, вместо того чтобы рисовать его по частям.



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

Мои любимые трюки в JavaScript

Время на прочтение7 мин
Охват и читатели20K

Приветствую. Представляю вашему вниманию перевод статьи «My Favorite JavaScript Tips and Tricks», опубликованной 28 июля 2020 года автором Tapas Adhikary



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


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

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

Ближайшие события

Vue.js для начинающих, урок 10: формы

Время на прочтение10 мин
Охват и читатели34K
Сегодня, в 10 уроке курса по Vue, мы поговорим о том, как работать с формами. Формы позволяют собирать данные, вводимые пользователем. Кроме того, здесь мы обсудим валидацию форм, то есть — проверку того, что в них вводят.

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

Оптимизация производительности фронтенда. Часть 1. Critical Render Path

Время на прочтение14 мин
Охват и читатели60K

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.


Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube


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



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


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


  1. Зачем думать о производительности
  2. FMP, TTI + подробнее в докладе
  3. Critical render path, DOM, CSSOM, RenderTree
  4. Шаги по улучшению производительности первой загрузки + подробнее в докладе
Читать дальше →

Утреннее шоу с Lucas F. Costa: JS, CS и тестирование веб-приложений

Время на прочтение1 мин
Охват и читатели922


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

Мы решили поэкспериментировать с форматом наших «пижамных разговоров» и сделать живой утренний выпуск. У нас в гостях Lucas F. Costa, бразильский software engineer, живущий сейчас в Лондоне.

Разбор статьи из журнала «Код» (Яндекс Практикум)

Время на прочтение9 мин
Охват и читатели12K

Пояснительная часть


Недавно мне попалась статья в журнале "Код" под названием "Сравнение: классы против функций". Я прочитал ее и она показалось мне… странной. Журнал позиционирует себя как издание для начинающих программистов. Но даже со скидкой на уровень аудитории статья вызывает много вопросов.


Эта публикация — попытка обратиться к редакции журнала "Код". Я ни в коем случае не пишу хейтерский пост. Наоборот, ставлю цель разобрать статью и указать на недостатки. Не хочу обидеть ни автора, ни редакцию. Допускаю, что в текущей статье ничего не изменится, но может быть, редакция возьмет кое-что на заметку.


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


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


Для полноты контекста прочитайте оригинал, это не займет много времени.

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

Когда и CRA мало. Доклад Яндекса

Время на прочтение16 мин
Охват и читатели3.6K
За интерфейсами поиска Яндекса скрывается большой проект со сложной инфраструктурой. У нас десятки мегабайт кода, который должен быстро работать и быстро собираться. Когда нам понадобилось перевести проект на React и TypeScript, мы начинали с Create React App, CRA. И достаточно быстро поняли, что многое нужно дорабатывать.


В докладе на Я.Субботнике Pro я вспомнил, что и как мы доделывали в сборке и архитектуре «стандартного современного проекта» и какие результаты у нас получились.
Читать дальше →

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

Время на прочтение12 мин
Охват и читатели6.8K

Hero image


Быть новичком — значит исследовать новые горизонты программирования, шагая в неизвестность, надеясь что где-то там будет лучше.


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


Так о чём это я. Сегодня я здесь чтобы поделится с вами своим первым опытом создания системы из Hedless CMS, API и блога. В связи с отсутствием достаточного количества подобного материала, особенно русскоязычного, я надеюсь что эта статья поможет вам создать подобную систему самостоятельно, избегая ошибок, которые я совершал.


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


Исходный код проекта вместе с пошаговым руководством по пользовательскому интерфейсу и API (рекомендую не читать, пока не закончите статью):


Vidzhel/Bluro

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

Книга «Эффективный TypeScript: 62 способа улучшить код»

Время на прочтение8 мин
Охват и читатели14K
imageПривет, Хаброжители! Книга Дэна Вандеркама окажется максимально полезена тем, кто уже имеет опыт работы с JavaScript и TypeScript. Цель этой книги — не обучать читателей пользоваться инструментами, а помочь им повысить свой профессиональный уровень. Прочитав ее, вы сформируете лучшее представление о работе компонентов TypeScript, сможете избежать многих ловушек и ошибок и развить свои навыки. В то время как справочное руководство покажет пять разных путей применения языка для реализации одной задачи, «эффективная» книга объяснит, какой из этих путей лучше и почему.
Читать дальше →