Обновить
512K+

JavaScript *

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

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

Вам посылка, или Как мы доставляем сообщения с сервера на клиент в реальном времени

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

Меня зовут Алексей Комаров, я — старший frontend-разработчик в SuperJob. Хочу поделиться опытом реализации механизма обновления данных в реальном времени у нас на сайте. Под катом — подробности о выборе подхода, о проблемах, с которыми мы столкнулись при разработке, о наших кейсах оптимизации 
клиентской стороны и, конечно, немного кода и наглядных схем.

Читать далее

Прошлое и будущее frontend, или Как сбежать от jQuery

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

Мы в *instinctools организовали и провели серию онлайн-дискуссий с разработчиками и экспертами в области IT. Проект «Техпора» – это возможность обсудить темы, которые затрагивают основные точки роста в IT. Мы не накладывали на беседу приглашенных гостей ограничения, а специально для «Хабра» выбрали из разговора яркие моменты, чтобы их можно было обсудить. 

В разговоре приняли участие Денис Радин, организатор JSNation и React Summit,  Виталий Фридман, сооснователь Smashing Magazine, Андрей Кучеренко, Chief Software Engineer, EPAM Systems, и Ира Левина, драйвер Frontspot сообщества. Целиком дискуссию можно посмотреть на YouTube, а согласиться или не согласиться с приглашенными экспертами лучше всего в комментариях.

Читать далее

Почему мы пишем super(props)?

Время на прочтение4 мин
Охват и читатели10K
Я писал super(props) большое количество раз в жизни, и хотел бы знать:
class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

Конечно, class fields proposal позволяет нам пропустить церемонию инициализации:
class Checkbox extends React.Component {
  state = { isOn: true };
  // ...
}

Подобный синтаксис был запланирован, когда в React 0.13 была добавлена ​​поддержка простых классов в 2015 году. Определение конструктора и вызов super(props) всегда предполагалось как временное решение, пока поля класса не предоставят эргономичную альтернативу.

Но вернемся к этому примеру, используя только функции ES2015:
class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

Здесь у вас не избежно должны возникнуть следующие вопросы: Почему мы вызываем super? Можем ли мы не вызывать его? Если нам нужно вызвать его, что произойдет, если мы не передадим props? Есть ли другие аргументы?
Читать дальше →

Экосистема React в 2022 году

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

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

Читать далее

Simple serverless front + back

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

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

Читать далее

Собеседование по Javascript, мой опыт. Часть первая

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

“Не люблю темные стекла, сквозь них темное небо.
Дайте мне войти, откройте двери.”

(Виктор Цой)

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

Читать далее

Руководство по Supabase. Часть 1

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



Привет, друзья!


В этом цикле из 2 статей я хочу рассказать вам о Supabase — открытой (open source), т.е. бесплатной альтернативе Firebase. Первая статья будет посвящена теории, во второй — мы вместе с вами разработаем полноценное social app с аутентификацией, базой данных, хранилищем файлов и обработкой изменения данных в режиме реального времени.


Что такое Supabase?


Supabase, как и Firebase — это SaaS (software as a service — программное обеспечение как услуга) или BaaS (backend as a service — бэкенд как услуга). Что это означает? Это означает, что при разработке fullstack app мы разрабатываем только клиентскую часть, а все остальное предоставляется Supabase через пользовательские комплекты для разработки программного обеспечения (SDK) и интерфейсы прикладного программирования (API). Под "всем остальным" подразумевается сервис аутентификации (включая возможность использования сторонних провайдеров), база данных (PostgreSQL), файловое хранилище, realtime (реакцию на изменение данных в реальном времени), и сервер, который все это обслуживает.


Если вам это интересно, прошу под кат.

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

JavaScript редактор SVG диаграмм который весит в 6,5 раз меньше bootstrap (библиотека с открытым исходным кодом)

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

Demo | GitHub

Эксперименты с созданием редактора диаграмм на Blazor Webassembly (Blazor WebAssembly: Drag and Drop в SVG, Blazor WebAssembly: соединительные линии в SVG) показали что технология не годится для интенсивных манипуляций с DOM.

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

Читать далее

Го: Дообучаем модель

Время на прочтение6 мин
Охват и читатели2.7K
What will we do with a drunken sailor,
What will we do with a drunken sailor,
What will we do with a drunken sailor,
Early in the morning?

Drunken Sailor


В прошлый раз мы остановились на том, что модели на основе свёрточных нейросетей, вполне способны подсказывать интересные и неочевидные ходы и, таким образом, могут использоваться как основа для построения бота для игры Го. Напомню, что источником модели послужила вот эта замечательная книга. Для того чтобы двигаться дальше: дообучать модель, просто с ней экспериментировать или вообще полностью переделать и обучить с нуля, требовались вычислительные ресурсы. И они появились…
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №504 (24 — 30 января 2022)

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

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

S3 + Lambda + ffmpeg (supports heic)

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

Достаточно частая задача веб разработчика - нарезать картинки. Предлагаю вашему вниманию готовое решение, используя Serverless framework + Lambda + S3.

Читать далее

Как писать условия в JSX

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

Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.

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

Читать далее

React: Code Editor

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



Привет, друзья!


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


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


Функционал нашего приложения будет следующим:


  • имеется три вкладки: для ручного редактирования HTML, CSS и JavaScript, соответственно;
  • пользователь имеет возможность загружать файлы, соответствующие текущей вкладке;
  • пользователь имеет возможность бросать (drop) файлы, соответствующие текущей вкладке;
  • код, введенный пользователем, загружается в iframe и выполняется в режиме песочницы (sandbox) при нажатии соответствующей кнопки.

Песочница:

Репозиторий.


Источник вдохновения.


Если вам это интересно, прошу под кат.

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

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

3D своими руками. Часть 4: треугольник невидимка

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

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

Продолжить обучение

Создание Single Page Application на Marko.js — ZSPA Boilerplate

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

В данной статье вы познакомитесь с Marko.js актуальной на данный момент пятой версии. Пару лет назад на Хабре уже была отличная статья (за авторством apapacy) о том, как работает этот замечательный реактивный фреймворк, разработанный где-то в недрах eBay.

В своем комментарии (а это был далекий 2020 год) я предложил написать на Хабр статью, посвященную моему опыту работы с Marko, и вот - как с тем самым котом - время наконец пришло :-)

Читать далее

Как визуальный генератор пароля спас меня от выгорания и соцсетевой аддикции (HTML/CSS/JS vue без сборки)

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

Перед новым годом по мере нарастания стресса на работе я стал проводить много времени в Твиттере.

Это было моё последнее пристанище после почти годовой деактивации Фейсбука, ВКонтакте и Инстаграма.

Автоматический статус ВК после отключения аккаунта хорошо передавал суть моего положения: «Я не могу жить и работать, пока в интернете есть страница с моим именем».

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

Но мне было стыдно удаляться и оттуда. Получится -- убежал отовсюду, оставив после себя пустое место. Соцсеть это всё-таки связь с людьми, и даже с потенциальными клиентами.

Читать далее

Как сохранять данные в браузере или краткий гайд по LocalStorage

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

Привет! В этой статье я кратко объясню что такое localStorage в JavaScript, его особенности и расскажу как с ним работать.

Читать далее

О, кинчик

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

Мы с друзьями любим играть в настольные игры, но не всегда под рукой оказываются громоздкие коробки с играми. Тут на помощь приходит смартфон. Раньше я написал игру Ну, этот, аналог коробочной игры Бум. Затем родилась идея игры с похожей механикой, но вместо слов - случайные фильмы с кинопоиска. В качестве основы проекта я взял SvelteKit. В статье расскажу об интересном функционале SvelteKit и быстром деплое на площадке Vercel.

Встречайте, О, кинчик!

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №503 (17 — 23 января 2022)

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

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

Публикация Vue.js-приложения в GitHub Packages с помощью GitHub Actions для самых маленьких

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

В этой серии вы узнаете как собрать докер-образ приложения на Vue.js и как опубликовать его в GitHub Packages. Вот так. Вот в общем-то и... не всё... Одним GitHub Action, как это было для Spring Boot приложения, о котором я рассказывал тут, в этот раз обойтись не получится. Нужно ещё проделать некоторые манипуляции, о которых я и расскажу в данной статье.

Читать далее