Search
Write a publication
Pull to refresh
0
0
Send message

Чистый код для TypeScript — Часть 1

Reading time4 min
Views19K

Наткнувшись на материал по принципам чистый код для TypeScript и прочитав его решил взяться за его перевод. Здесь я хочу поделиться с вами некоторыми выдержками из этого перевода, так как некоторые моменты чистого кода для TypeScript повторяют такие же принципы для JavaScript, я их здесь описывать не буду, если будет интересно перевод для JS уже публиковался на хабре(@BoryaMogila) или же можете ознакомится с ними в первоисточнике.


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

Свойства Min и Max width/height в CSS

Reading time10 min
Views130K
Перевод «Min and Max Width/Height in CSS» Ахмада Шадида.

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

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

Ванильный JavaScript и HTML. Никаких фреймворков. Никаких библиотек. Никаких проблем

Reading time9 min
Views32K

Используете для создания приложений Vue, React, Angular или Svelte? Я использую, и если вы тоже, и уверен, что вам уже давно не приходилось писать приложение, которое выводит информацию без этих прекрасных инструментов.

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

При выводе небольшого количества информации вам может потребоваться использовать HTML, JavaScript и DOM без каких-либо инструментов. Недавно я написал несколько базовых примеров, которые иллюстрируют основы веб-разработки и помогают в изучении DOM, HTML, JavaScript и принципов работы браузера. Этот опыт позволил мне понять, что другие разработчики — возможно, вы, — будут рады вспомнить, как выводить информацию без использования библиотек.

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

Давайте рассмотрим разные способы вывода информации. И держите под рукой эту документацию!
Читать дальше →

Поиск багов как образ жизни

Reading time6 min
Views18K

Разработка статических анализаторов кода и борьба за качество open-source проектов на протяжении более шести лет не могли не сказаться на моём взаимодействии с программами в нерабочее время. К сожалению, мне постоянно встречаются разные баги и, к ещё большему сожалению, повлиять на это почти невозможно. Я решил собрать несколько историй об интересных багах и их исправлении или игноре. Представляю вам альтернативный формат статьи о поиске ошибок в программах, которые обычно наполняют блог PVS-Studio.
Читать дальше →

Делаем HTTP-запросы, изящно деградируем (и ни единого разрыва)

Reading time5 min
Views19K
image

Сегодня мало кто помнит, что веб-приложения могут работать без единого XHR-запроса. AJAX (Asynchronous Javascript and XML) дает классную возможность — подгружать данные без перезагрузки страницы. Эта концепция лежит в основе большинства современных SPA.

Но ничто не дается просто так, за все нужно платить. Концепция AJAX кажется предельно простой, но даже на уровне запроса данных с сервера можно встретить кучу проблем.
Читать дальше →

Какую цену мы платим за использование async/await в языках JS / C# / Rust

Reading time3 min
Views17K

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


Работая с Javascript / Typescript, я давно заметил, что асинхронное API работает медленней чем аналогичное синхронное, и даже знал что так должно быть. Но в последнем проекте асинхронная работа с файловой системой стала узким местом, и я озаботился замерами.


Известно, что await можно использовать только внутри функций или блоков async, а это значит, что если у нас самый нижний уровень API асинхронный, то придется использовать async/await практически везде, даже там, где оно очевидно не нужно.


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


Какую цену мне приходится платить за каждый асинхронный вызов?
Результаты тестов удручают...

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

5 возможностей JavaScript, без которых я не мог бы писать код

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

Прежде чем мы начнем, позвольте мне немного рассказать о коде, который я пишу. Почти весь мой код состоит из Javascript, плюс немного HTML и CSS. Я пишу как клиентский, так и серверный JS. Я тестирую свой код. Я создаю и распространяю библиотеки с открытым исходным кодом, которые используются тысячами разработчиков по всему миру. Для фронтенда я использую React, для бэкенда — Express или бессерверные вычисления.

Вот 5 особенностей JS, без которых я не мог бы писать код. В произвольном порядке. Разумеется, «без которых я не мог бы писать код» — это гипербола. Это «фичи», которые мне по-настоящему нравятся и используются мной постоянно.
Читать дальше →

Интеграционные тесты на Flutter — это просто

Reading time6 min
Views8.6K

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

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

Three.js и геометрия

Reading time4 min
Views8.3K

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

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

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

Управление состоянием приложения с RxJS/Immer как простая альтернатива Redux/MobX

Reading time6 min
Views6K
"Вы поймете, когда вам нужен Flux. Если вы не уверены, что вам это нужно, вам это не нужно." Пит Хант


Для управления состоянием приложения я как правило применяю Redux. Но не всегда есть необходимость в использовании модели Action\Reducer, хотя бы из-за трудозатратности ее применения для написания простейшего функционала. Возьмем в качестве примера обычный счетчик. На выходе хотелось получить простое и практичное решение, которое позволит описать модель состояния и пару методов его меняющие, наподобие такого:


state = {value: 0} 
increase() { 
  state.value += 1 
} 
decrease() {
  state.value -= 1
}

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


В общем, захотелось найти простое решение для управления состоянием, в основе которого лежала бы иммутабельность, с возможностью применять его в Angular\React и реализованное на TypeScript. Беглый обзор на просторах github подходящего решения не выдал, поэтому возьмем RxJS/Immer и попробуем сделать свое.

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

О 30-кратном увеличении параллелизма в Node.js

Reading time14 min
Views23K
Каков наилучший способ беспроблемного увеличения параллелизма в Node.js-сервисе, который используется в продакшне? Это — вопрос, на который моей команде понадобилось ответить пару месяцев назад.

У нас запущено 4000 контейнеров Node (или «воркеров»), обеспечивающих работу нашего сервиса интеграции с банками. Сервис изначально был спроектирован так, что каждый воркер был рассчитан на обработку только одного запроса за раз. Это снижало воздействие на систему тех операций, которые могли неожиданно заблокировать цикл событий и позволяло нам игнорировать различия в использовании ресурсов различными подобными операциями. Но, так как наши мощности были ограничены одновременным выполнением лишь 4000 запросов, система не могла достойно масштабироваться. Скорость выдачи ответов на большинство запросов зависела не от мощности оборудования, а от возможностей сети. Поэтому мы могли бы улучшить систему и снизить стоимость её поддержки в том случае, если бы нашли способ надёжной параллельной обработки запросов.



Занявшись исследованием этого вопроса, мы не смогли найти хорошего руководства, в котором речь шла бы о переходе от «отсутствия параллелизма» в сервисе Node.js к «высокому уровню параллелизма». В результате мы разработали собственную стратегию перехода, которая была основана на тщательном планировании, на хороших инструментах, на средствах мониторинга и на здоровой дозе отладки. В итоге нам удалось повысить уровень параллелизма нашей системы в 30 раз. Это эквивалентно снижению затрат на поддержку системы примерно на 300 тысяч долларов в год.

Данный материал посвящён рассказу о том, как мы увеличили производительность и эффективность наших Node.js-воркеров, и о том, что мы узнали, пройдя этот путь.
Читать дальше →

Запись звука JS c микрофона или голосовые комментарии

Reading time4 min
Views34K

Запись звука JS c микрофона или голосовые комментарии


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

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

Постановка задачи


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

Оптимизируем автоматизацию: как мы ускорили автотесты в 3-4 раза, сохранив старые наработки

Reading time5 min
Views5.7K
Автотесты на проектах нужны. Но, как говорится, автоматизация на вкус и цвет может быть разная. Мы пришли на проект, где уже были автотесты, и смогли улучшить покрытие и ускорить прохождение тестов без фундаментальной революции. Под катом о том, как нам это удалось.

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

API, который заставляет плакать

Reading time5 min
Views14K

Чего ожидать


Цель – показать разработчикам, с какими проблемами сталкиваются пользователи их API на примере работы с различными CRM-системами.

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

Подводка


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

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

С тех пор, жил мальчик, поживал, да добра наживал. И не знал он бед и горестей… или все-таки знал? Давайте разбираться!
Читать дальше →

Vue для самых маленьких a.k.a небольшой блог по всем канонам

Reading time15 min
Views29K


Всем привет! В данной статье рассмотрим разработку фронта простенького блога на Vue с использованием всех прелестей Vue включая Vuex и Router. А также поговорим про структуру приложения и работу с контейнером и роутером.
Читать дальше →

Модальные окна, которые мы заслужили

Reading time3 min
Views34K

Начнем


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

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

Пять интересных способов использования Array.reduce() (и один скучный путь)

Reading time7 min
Views79K

Привет, Хабр! Представляю вашему вниманию перевод статьи "Five Interesting Ways to Use Array.reduce() (And One Boring Way)" автора Chris Ferdinandi.


Из всех современных методов работы с массивами самым сложным из всех, что мне пришлось использовать, был Array.reduce().


На первый взгляд он кажется простым, скучным методом, который мало что дает. Но, не смотря на свой скромный вид, Array.reduce() является мощным и гибким дополнением к вашему набору инструментов разработчика.


Сегодня рассмотрим некоторые интересные вещи, которые можно сделать с помощью Array.reduce().

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

Что добавят в JavaScript уже в 2020 году

Reading time4 min
Views21K

Недавно опциональный доступ к аттрибутам (Optional Chaining) и значение по умолчанию для атрибутов (Nullish Coalescing) перешли на последний, четвёртый этап процесса TC39.


На практике это означает, что эти и другие нововведения станут частью стандарта JavaScript уже в этом, 2020 году. Их мы и рассмотрим в этой статье.


Отслеживать поддержку браузерами можно здесь («2020 features») — прим. перев.


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

Как делать асинхронные Redux экшены используя Redux-Thunk

Reading time5 min
Views106K

Приветствую Хабр! Представляю вашему вниманию перевод статьи — Asynchronous Redux Actions Using Redux Thunk, автора — Alligator.io


По умолчанию, экшены в Redux являются синхронными, что, является проблемой для приложения, которому нужно взаимодействовать с серверным API, или выполнять другие асинхронные действия. К счастью Redux предоставляет нам такую штуку как middleware, которая стоит между диспатчом экшена и редюсером. Существует две самые популярные middleware библиотеки для асинхронных экшенов в Redux, это — Redux Thunk и Redux Saga. В этом посте мы будем рассматривать первую.
Читать дальше →

Клади плитку эффективно ( Про CSS, SVG, pattern и другое)

Reading time8 min
Views14K

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


Сказ о том, как вставлять фоновые повторяющиеся изображения страниц, что бы всем было хорошо.


Ну, что готовы поиграть ..? Тогда погнали


Information

Rating
Does not participate
Registered
Activity