Обновить
512K+

JavaScript *

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

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

Как написать свою онлайн-песочницу с поддержкой React и популярных библиотек

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

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

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

Читать далее

Хочу поделиться личным проектом, над которым я работал в последнее время. Измерия. Я создал её для нас

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

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

Цель — создать централизованную базу знаний по Минску/СНГ/Миру, которая поможет сэкономить время, нервы, силы и финансы при выборе нового жилья. Минск уже неплохо покрыт — время братьев по СНГ.

Читать далее

[js] Программируйте на уровне интерфейсов

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

Привет Хабр!

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

Читать далее

Прекратите изучать фреймворк, станьте JavaScript-разработчиком

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

Представьте диалог:

—  Здравствуйте, я водитель КАМАЗа!

—  Добрый день, к сожалению, в нашем автопарке только ЗИЛы, позовите следующего кандидата, пожалуйста!

Странный диалог, не так ли? Ведь очевидно, что основной профессиональный «скилл» водителя — умение управлять транспортным средством. Каким конкретно — вопрос, по большому счету, вторичный. С разработчиками — то же самое.

Всем привет, это Макс Кравец из Holyweb, и сегодня мы поговорим о том, почему фронтенд-разработчику важно учить JavaScript, а не фреймворк или библиотеку.

Читать далее

Как я генерировал мандалы

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

Первый опыт в веб-разработке и работе с векторной графикой.

Читать далее

Пятёрочка — Интегрируй меня полностью

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

Мы в KTS делаем проект для Пятерочки – новый личный кабинет сотрудника. Продукт объединяет уже существующие сервисы и автоматизирует бизнес-процессы, которые раньше выполнялись вручную.

Над личным кабинетом работает много команд, поэтому нужен удобный механизм параллельной разработки модулей-микрофронтендов. Мы попробовали три способа встраивания: iframe, NPM-пакеты и Webpack Module Federation. В статье анализируем преимущества и недостатки каждого из них и рассказываем, почему переходили от одной технологии к другой.

Поехали!

В JS-функциях «побеждает» последний оператор return

Время на прочтение3 мин
Охват и читатели22K
Вот — JavaScript-функция. Какой из операторов return, имеющихся в ней, «победит» при вызове этой функции?

function test() {
  return 'one';
  return 'two';
  return 'three';
}

Вероятно, вы скажете, что это — первый return. А вот я хочу попытаться убедить вас в том, что «победителем» окажется return последний.



Будьте спокойны: эта функция, определённо, возвращает 'one'. Но в данном случае первый return не даёт выполняться остальным. В результате «последний return» — это и есть return 'one', именно он и «побеждает» другие операторы return. Конечно, это — и самый первый такой оператор, но при этом то, что я заявил выше, остаётся истинным (я, говоря это, с самодовольным видом скрещиваю руки на груди).

Знаю, в вашей голове сейчас проносится примерно такая мысль: «Да заткнись уже!». Но я, всё же, прошу вас ещё немного меня потерпеть…
Читать дальше →

Как разобраться в исходном коде React

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

React самая популярная библиотека для построения пользовательских интерфейсов. Мы знаем про виртуальное дерево, движок fiber, процедуру reconcilation, хуки и другие прекрасные возможности react. Но как это работает на уровне исходного кода? Ответить на этот вопрос смогут очень небольшое количество программистов.

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

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №478 (18 — 25 июля 2021)

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

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

Vue — рекомендации при работе с формами

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

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

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

Читать далее

Кажется, мы стали забывать основы фронтенда

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

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

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

Читать далее

Почему я «мучаюсь» с JS

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

Я не знаю TypeScript, поэтому и пишу эту статью. У меня есть некоторый опыт программирования на Java и PHP и этот опыт заставляет меня кодировать на JavaScript'е соответствующим образом. К последней моей статье коммент от коллеги Silverthorne был такой:


export default class TeqFw_Http2_Back_Server {
constructor(spec) {
// EXTRACT DEPS
/** @type {Function|TeqFw_Http2_Back_Server_Stream.action} */
const process = spec['TeqFw_Http2_Back_Server_Stream$'];
/** @type {TeqFw_Web_Back_Handler_Registry} */
const registryHndl = spec['TeqFw_Web_Back_Handler_Registry$'];


зачем все это, когда есть TypeScript?

В ответном комменте я попросил от него продемонстрировать TS-код, который делает то же самое. Он не ответил. Я добавил коммент с просьбой, чтобы кто-угодно продемонстрировал TS-код, который делает то же самое. Ничего. И вот я пишу уже статью с аналогичной просьбой.

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

Как использовать IndexDB для управления состоянием в JavaScript

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

Эта статья — перевод оригинальной статьи Craig Buckler "How to Use IndexDB to Manage State in JavaScript".

В этой статье объясняется, как использовать IndexedDB для хранения состояния в типичном клиентском приложении на JavaScript.

Код доступен на Github. Он представляет собой пример to-do приложения, которое вы можете использовать или адаптировать для своих собственных проектов.

Читать далее

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

Хранение инстанса карты mapbox-gl вне React

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

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

Читать далее

Очень интересная библиотека JS: распознавание символов, введённых с дисплея вашего смартфона на сайте

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

Ссылка на github

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

Очень простая библиотека JavaScript, которая распознаёт ваши рисунки на мобильной версии сайта.

Читать далее

Создание видео урока по веб программированию с использованием: Jsfiddle, SpeechSynthesisUtterance, OBS Studio

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

Для демонстрации небольшого объема кода (html, js, css), удобно пользовать онлайн редактором Jsfiddle.

У меня возникла мысль. Как вывести объяснения кода в виде информационных баннеров и озвучить их при помощи SpeechSynthesisUtterance

Мое решение подключить в консоли браузера хром: css, js и создать див с id=”info_mysmx” для отображения текста.

Читать далее

Vue/React Store и JS Request Manager

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

Время идет, технологии растут, а разработка тяжела на перемены. Все больше и больше ресурсов зависят от API (но нет единых стандартов и решений). До сих пор популярен REST... Что бы сделать запрос на такой сервер, необходимо задать header (auth token), указать тип запроса, адрес, задать get параметры, указать параметры в теле и тип этого тела (json/multipart). Благо есть axios и fetch и они от части решают проблему с отправкой запросов. Время идет дальше и количество запросов - которые нужно отправлять растет, а код начинает превращаться в свалку копипасты. Иногда делают мини конструкторы или обертки. Большая же часть живет по старинке.

Эта часть кода начинает жить в хранилищах (Store). В дальнейшем я буду приводить примеры на основе Vuex (Vue Store), но в целом думаю это актуально и для React и Angular. Мы разгрузим Store и перенесем все запросы в Request Manager.

Читать далее

Книга «Разработка на JavaScript. Построение кроссплатформенных приложений с помощью GraphQL, React, React Native ...»

Время на прочтение8 мин
Охват и читатели7.7K
image Привет, Хаброжители! Что такое современный JavaScript? Когда-то он просто добавлял интерактивности к окнам веб-браузера, а теперь превратился в основательный фундамент мощного и надежного софта. Разработчики любого уровня смогут использовать JavaScript для создания API, веб-, мобильных и десктопных приложений. В этой книге:

  • Работа с данными с помощью GraphQL.
  • Аутентификация для API, веб- и нативных приложений.
  • Создание высокопроизводительных веб-приложений
  • Разработка кроссплатформенных приложений под iOS и Android
  • Создание десктопных приложений.

Для кого эта книга
Она предназначена для разработчиков среднего уровня, имеющих некоторый опыт работы с HTML, CSS и JS, а также для амбициозных новичков, желающих изучить инструменты, необходимые для запуска проектов для бизнеса и любых других целей.
Читать дальше →

Easy canvas — простая js библиотека, которая невероятно упрощает работу с canvas html

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

Ссылка на GitHub

Очень простая библиотека javascript, которая сильно упрощает работу с canvas html.

Очень простая библиотека javascript, которая сильно упрощает работу с canvas html.

Читать

Как я прототип игры писал и учился генерировать лабиринты

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

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

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

Читать далее