Дайджест свежих материалов из мира фронтенда за последнюю неделю №429 (17 — 23 августа 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
128K+
JavaScript *
Прототипно-ориентированный язык программирования
244,04
Рейтинг
Организация разработки крупномасштабных React-приложений
13 мин
Перевод
Эта публикация основана на серии материалов о модернизации jQuery-фронтенда с использованием React. Для того чтобы лучше разобраться в причинах, по которым написан этот материал, рекомендуется взглянуть на первый материал этой серии.
В наши дни очень легко организовать разработку маленького React-приложения, или начать работу над ним с нуля. В особенности — при использовании create-react-app. Некоторым проектам, скорее всего, понадобится лишь несколько зависимостей (например — для управления состоянием приложения и для интернационализации проекта) и папка
В наши дни очень легко организовать разработку маленького React-приложения, или начать работу над ним с нуля. В особенности — при использовании create-react-app. Некоторым проектам, скорее всего, понадобится лишь несколько зависимостей (например — для управления состоянием приложения и для интернационализации проекта) и папка
src, в которой, как минимум, имеется директория components. Я полагаю, что именно с такой структуры начинается работа над большинством React-проектов. Обычно, правда, по мере того, как растёт количество зависимостей проекта, программисты сталкиваются с ростом количества компонентов, редьюсеров и других входящих в его состав механизмов, предназначенных для многократного использования. Иногда всем этим становится очень неудобно и сложно управлять. Что делать, например, если больше неясно то, почему нужны некоторые зависимости, и то, как они сочетаются друг с другом? Или, как быть, если в проекте накопилось так много компонентов, что становится сложно найти среди них именно тот, который нужен? Как поступить в том случае, если программисту нужно найти некий компонент, имя которого забыто?
Отслеживаем состояние своего портфеля у брокера «Тинькофф Инвестиции» через Google Таблицы
4 мин
Наверняка многие ведут учет сделок и следят за состоянием своего портфеля в Google-таблицах или в Excel. Раньше мне приходилось вручную вносить информацию о каждом купленном или проданном инструменте и это отнимало значительную часть моего времени. Тогда мне захотелось автоматизировать этот процесс и я начал искать способы реализации данной идеи.
Я обнаружил статью пользователя ErhoSen. Из неё я узнал, что брокер «Тинькофф Инвестиции» предлагает своим клиентам API для взаимодействия с брокерским счетом с индивидуально-инвестиционным счетом (ИИС). С его помощью можно получить список акций, валютных пар, узнать стоимость бумаги по тикеру, просмотреть список операций по счету, получить информацию о своем портфеле и т.д. Однако, мне не хватило существующего функционала скрипта и я решил дописать его, добавив туда свои функции.
Работа с API происходит через токен. Процесс получения токена описан в документации на GitHub’е. Для его получения нужно:
После получения токена можно приступить к работе с таблицей. Перейдите по ссылке и скопируйте к себе таблицу, в которой будете вести учёт.
Вставьте свой токен в ячейку B1 в листе «Настройки».
Важно! После вставки токена не удаляйте и не переименовывайте лист “Настройки”. Если в ячейке B3 появится текущий курс доллара — поздравляем, все готово к работе.
Я обнаружил статью пользователя ErhoSen. Из неё я узнал, что брокер «Тинькофф Инвестиции» предлагает своим клиентам API для взаимодействия с брокерским счетом с индивидуально-инвестиционным счетом (ИИС). С его помощью можно получить список акций, валютных пар, узнать стоимость бумаги по тикеру, просмотреть список операций по счету, получить информацию о своем портфеле и т.д. Однако, мне не хватило существующего функционала скрипта и я решил дописать его, добавив туда свои функции.
Получение токена
Работа с API происходит через токен. Процесс получения токена описан в документации на GitHub’е. Для его получения нужно:
- Перейти на сайт Тинькоффа и выполнить вход в свой аккаунт.
- Убедиться, что функция «Подтверждение сделок кодом» отключена.
- Пролистать вниз страницы до пункта токен для OpenAPI и нажать на «Токен для торговли»
- Скопировать и сохранить токен. Он отображается только один раз, но можно выпускать неограниченное количество токенов.
После получения токена можно приступить к работе с таблицей. Перейдите по ссылке и скопируйте к себе таблицу, в которой будете вести учёт.
Вставьте свой токен в ячейку B1 в листе «Настройки».
Важно! После вставки токена не удаляйте и не переименовывайте лист “Настройки”. Если в ячейке B3 появится текущий курс доллара — поздравляем, все готово к работе.
Разбор худшего в мире куска кода
7 мин
Перевод
Есть одна итальянская страница на Facebook. Называется она «Il Programmatore di Merda», что в переводе означает «Дерьмовый программист». Мне нравится эта страница.
Там часто публикуют куски отвратительного кода и мемы о программировании. Но однажды я увидел там кое-что совершенно потрясающее.
Этот кусок кода заслужил почётное звание «лучшего произведения» за неделю.
Я решил этот код разобрать, но тут так много всего неправильного, что мне сложно даже выбрать первую проблему для анализа.
Если вы — начинающий программист, то мой материал поможет вам понять то, какие ужасные ошибки совершены тем, кто писал этот код.
Там часто публикуют куски отвратительного кода и мемы о программировании. Но однажды я увидел там кое-что совершенно потрясающее.
Этот кусок кода заслужил почётное звание «лучшего произведения» за неделю.
Я решил этот код разобрать, но тут так много всего неправильного, что мне сложно даже выбрать первую проблему для анализа.
Если вы — начинающий программист, то мой материал поможет вам понять то, какие ужасные ошибки совершены тем, кто писал этот код.
Нативный — не значит быстрый. Обгоняем map, filter и reduce на больших массивах
9 мин
Несколько дней назад я выкладывал пост LINQ на JavaScript для самых маленьких. Но моя библиотека сильно уступала по производительности нативным методам и Lodash. В общем-то, сейчас мы будем менять ситуацию.
Как npm обеспечивает безопасность
7 мин
Всем привет! В предыдущих постах мы подробно поговорили про выбор зависимостей и использование lock-файлов в npm, однако я только вскользь касался вопросов безопасности. Пришло время исправить этот недочет: этот и следующий посты будут полностью посвящены безопасности в npm! И для начала мы рассмотрим, как безопасность обеспечивается на уровне инфраструктуры npm и экосистемы в целом.
Как бесплатно перенести свои любимые треки в Spotify, используя Javascript
6 мин
Все любители музыки в России с нетерпением ждали выхода Spotify на наш рынок. Когда наконец это случилось, перед пользователями встала проблема переноса музыки из других сервисов. Лично у меня за годы накопилась огромная коллекция музыки на разных платформах: Яндекс.Музыка, ВКонтакте, личная коллекция на жёстком диске и облако на Яндекс.Диске.
Сначала я думал воспользоваться сервисами вроде Soundiiz и TuneMyMusic. Но вдохновившись статьёй об использовании Python в тех же целях, мне стало интересно решить эту задачку с помощью Javascript. Далее я опишу ряд простых шагов с исходным кодом, которые помогут перенести вашу музыку из разных источников в Spotify.
Как стать экспертом для поисковых систем
3 мин
Не так давно я познакомился с описанием E-A-T алгоритма от Google, который расшифровывается как «Expertise, Authoritativeness, Trustworthiness» (экспертность, авторитетность, достоверность). И мне, как автору, который пишет для разных сайтов стало интересно — насколько я сам соответствую критериям этого алгоритма и могу ли повлиять на текущую ситуацию. Тем более, что некоторые заготовки в виде открытой гугл таблицы для учета и мониторинга собственных публикаций LynxReport уже были.
Google Таблицы → Node.js → Google Charts → Сайт-визитка → Топ-3 место в поиске ФИО + специализация
На основании данных таблицы я решил дополнить сайт-визитку, сведениями о публикациях, которые бы генерировались автоматически. Что я хотел получить:
Как получилось можно посмотреть здесь. Реализовано на платформе Node.js с использованием Bootstrap, Google Charts и Google Таблицы для хранения исходных данных.
Google Таблицы → Node.js → Google Charts → Сайт-визитка → Топ-3 место в поиске ФИО + специализация
На основании данных таблицы я решил дополнить сайт-визитку, сведениями о публикациях, которые бы генерировались автоматически. Что я хотел получить:
- Актуальную сводку публикаций, расположенную на временной шкале Google Charts.
- Автоматическую генерацию выходных данных и ссылок на статьи из гугл таблицы в html версию визитки.
- PDF версии статей со всех сайтов, из-за опасений закрытия некоторых старых сайтов в будущем.
Как получилось можно посмотреть здесь. Реализовано на платформе Node.js с использованием Bootstrap, Google Charts и Google Таблицы для хранения исходных данных.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №428 (10 — 16 августа 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Коротко о this в функциях javascript
4 мин
Туториал
Предисловие
На просторах интернета довольно много информации о том, как работает
this, но мне всё время не хватало буквально чуть-чуть, чтобы до конца в этом разобраться.Возможно, именно эта статья станет для вас той, которая расставит всё по полочкам!
Без лишних слов
Мы разберем как простые, так и сложные примеры — так что всем будет интересно.
Веб-компоненты в реальном мире (часть 2)
5 мин
Прошло больше года с моей публикации "Веб-компоненты в реальном мире" и у меня накопились новые наблюдения, что ещё не так с этой технологией. Возможно, эти моменты позволят кому-то избежать тупикового пути для своих проектов.
LINQ на JavaScript для самых маленьких
8 мин
Туториал
Шел очередной день самоизоляции, и я делал один из тех проектов для себя, которые мы забрасываем через пару дней после того как начали. Ну вы знаете, тот проект, который сделает вас знаменитым, позволит вам выучить новый ЯП, новый фреймворк и все такое. В общем, это был самый обычный день, самой обычной пандемии. Ничего не предвещало беды, пока одна библиотека, которой я пользовался для работы с массивами не выпала со stack overflow… И вот тут-то все и запузырилось.
Краткое руководство по Node.js для начинающих (SPA, PWA, mobile first)
3 мин
Доброго времени суток, друзья!
Представляю вашему вниманию перевод Руководства по Node.js в формате одностраничного прогрессивного адаптированного приложения.
Данный формат означает следующее:
- SPA — новые данные (разделы или главы руководства) загружаются без перезагрузки страницы — реализовано с помощью динамического импорта
- PWA — приложение можно установить на мобильный телефон или компьютер; приложение работает даже при отсутствии подключения к сети — реализовано с помощью сервис-воркера и кэширования
- mobile-first — приложение предназначено для использования, в первую очередь, на смартфонах, но хорошо выглядит и на широких экранах
Посмотреть и установить приложение можно ЗДЕСЬ.
Код проекта на GitHub
Ближайшие события
Пишем интерпретатор BASIC в стиле 80-х
22 мин
Перевод
В течение нескольких лет я работала над личным проектом создания (а на самом деле исследования) «фальшивого эмулятора», то есть написанного на JavaScript эмулятора никогда не существовавшего компьютера. Эта машина должна была стать данью памяти восьми- и шестнадцатибитным компьютерам 1980-х и 90-х.
Однако мне нравятся сложности: в этой машине ещё и использовался новый набор инструкций. Он похож на наборы, применявшиеся в ту эпоху, но немного проще в работе. Так родился Retroputer. В течение нескольких лет эмулятор расширял свои возможности и совершенствовался, но, скорее всего, он никогда не будет «закончен» (в конце концов, это ведь личный проект-исследование).
Когда появился @bbcmicrobot, я захотела создать нечто подобное для Retroputer. Мои навыки разработки на JS в основном ограничивались фронтендом, поэтому это будет отличным поводом получить опыт бэкенда. Только есть одна проблема: Retroputer может понимать только собственный язык ассемблера. Пока у него нет поддержки BASIC.
Так я и пришла к созданию интерпретатора BASIC в стиле 80-х, то есть полностью на языке ассемблера, как его тогда и писали. Я решила, что стоит поделиться своей работой, потому что нам не часто приходится погружаться в области, столь далёкие от привычных абстракций. Мой повседневный инструмент (JavaScript) делает многие аспекты тривиальными, и иногда это даже кажется магией. Понимание самого нижнего уровня процессов часто помогает в понимании этих абстракций.
Итак, давайте приступим.
Знакомство с Vuecket
9 мин
Туториал
English Version
Vuecket — веб-фреймворк, интегрирующий VueJS с клиентской стороны и Apache Wicket с серверной. Он берет все самое лучшее от обоих и позволяет разрабатывать full-stack приложения еще быстрее и проще. Конечно, это всё громкие слова, ведь Vuecket'у на данный момент (Август 2020) меньше месяца, и он не прошел ещё крещение «огнем и кровью» продакшн серверов. Но он уже включил в себя всё самое лучшее из наработанного нами при разработке нашего ключевого Open Source продукта Orienteer(платформа для быстрой разработки бизнес приложений). И именно из-за молодого возраста Vuecket'у нужна ваша помощь: поделитесь, пожалуйста, тем, что вам понравилось, что не очень, где нужна доработка и т.д.
Основные принципы, которыми мы руководствуемся при построении Vuecket'а:
- Быть декларативным — не императивным. Vuecket не диктует какие-то специальные требования к коду. Он может быть приложен достаточно быстро и легко к уже существующим Vue.JS или Apache Wicket проектам.
- Следовать принципу Парето. Vuecket должен обеспечивать 80% нужного функционала из коробки, но для оставшихся 20% должны быть хорошие и удобные точки расширения.
Легко заметить, что эти принципы также применимы и к Vue.JS, и к Apache Wicket.
Итак, как именно мы будем знакомиться с Vuecket? Предлагаю сделать чат/гостевую доску с поддержкой Markdown. Не буду сильно томить: законченное приложение здесь, а код здесь.
Что, черт возьми, такое гидратация и регидратация?
4 мин
Перевод
Если процесс frontend разработки привёл вас к вопросу SEO оптимизации, то почти наверняка, вы столкнётесь с понятием Server Side Rendering (SSR) и тесно связанной с ним гидратацией (или регидратацией). Представленная ниже информация является переводом в очень свободной форме и дополненным некоторыми особенностями, с целью прояснить subject.
Отказ от create-react-app и создание собственного шаблона для React-приложений
9 мин
Перевод
Автор статьи, перевод которой мы сегодня публикуем, предлагает React-разработчикам отойти от использования
create-react-app (CRA) и создать собственный шаблон для React-приложений. Здесь речь пойдёт о преимуществах и недостатках CRA, а так же будет предложено решение, которое способно заменить create-react-app.
Топ-10 Angular-приемов, выбранных сообществом
4 мин
В течение июня Саша Инкин и я, Рома Седов, запилили в Твиттере челлендж.
Каждый день мы публиковали по совету, хитрости или просто какой-нибудь полезной штуке из нашего опыта работы с Angular. Это движение было тепло встречено и поддержано комьюнити разработчиков.
Я решил написать статью о десяти приемах, которые набрали больше всего лайков, а также объяснить показанные в них концепции более подробно.
Давайте начнем!
Каждый день мы публиковали по совету, хитрости или просто какой-нибудь полезной штуке из нашего опыта работы с Angular. Это движение было тепло встречено и поддержано комьюнити разработчиков.
Я решил написать статью о десяти приемах, которые набрали больше всего лайков, а также объяснить показанные в них концепции более подробно.
Давайте начнем!
Webpack: руководство для начинающих
9 мин
Перевод
Доброго времени суток, друзья!
Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.
Перед изучением новой технологии задайте себе два вопроса:
- Зачем нужен этот инструмент?
- Какие задачи он выполняет?
Если вы не можете ответить на эти вопросы, возможно, вам не нужна изучаемая технология. Давайте попробуем ответить на эти вопросы применительно к Webpack.
Влияние service worker'ов на web-приложения
4 мин
Web-приложения всё больше "затачиваются" под мобильные устройства, а service worker'ы являются фундаментом прогрессивных web-приложений (PWA). При первом ознакомлении с данной технологией может сложиться впечатление, что основной задачей service worker'ов является кэширование контента. И это так. Задача service worker'ов — обеспечение функционирования web-приложения в условиях нестабильного или вообще отсутствующего подключения к Сети, что достигается при помощи кэширования данных.
Под катом пара мыслей о том, к каким последствиям для web-приложений привело появление возможности кэшировать данные посредством service worker'ов.