Дайджест новостей из мира фронтенд-разработки за последнюю неделю 9–15 мая.
JavaScript *
Прототипно-ориентированный язык программирования
Новости
Разрабатываем REST API с помощью TypeScript, NestJS, Prisma, AdminJS и Swagger
Привет, друзья!
В данном туториале мы разработаем простой сервер на NestJS, взаимодействующий с SQLite с помощью Prisma, с административной панелью, автоматически генерируемой с помощью AdminJS, и описанием интерфейса, автоматически генерируемым с помощью Swagger. Все это будет приготовлено под соусом TypeScript.
Если вам это интересно, прошу под кат.
Симулятор x86 подобного процессора на машине Тьюринга
Привет, Хабр! В свободное от работы время по вечерам мне нравится воплощать в жизнь свои сумасшедшие идеи. В один из таких вечеров родилась мысль реализовать компилятор кода в машину Тьюринга. Осознав всю тщетность бытия сложность реализации, было принято решение начать с чего-то более простого – симулятора простенького процессора со своим собственным ассемблером, в котором команды выполнялись бы с помощью различных состояний машины Тьюринга, а данные хранились бы на одной ленте. В конечном итоге удалось осуществить практически первоначальную задумку, а именно получить одну единственную машину Тьюринга, способную выполнять скомпилированную из NASM подобного ассемблера программу без какого-либо внешнего взаимодействия.
Хабрчане закидали меня камнями за косяки в МВП. Я не уныл, всё поправил и готов получать новую порцию или релиз Измерии
Привет. Полгода назад я выкатывал МВП приложения, в котором можно было оценить места своего проживания по определённым критериям, например, качество воды или воздуха.
И вот я готов представить обновлённую Измерию. Всё, что осталось от старой, — возможность оставлять рейтинги на карте и её (карты) вид. Для полного списка изменений предлагаю проследовать на специально отведённую для этого страницу. В данной же статье я разберу косяки, на которые пользователи и комментаторы Хабра обратили внимание, способы их устранения, а также дополнения, приносящие ещё больше полезности в сервис. Примерное время чтения: 7 минут.
Node.js: разрабатываем бота для Telegram
Привет, друзья!
В данном туториале мы разработаем простого бота для Telegram. Сначала зарегистрируем и кастомизируем бота с помощью BotFather, затем напишем для него сервер на Express, развернем сервер на Heroku и подключим бота к серверу с помощью веб-хука.
Функционал бота будет следующим:
- в ответ на сообщение joke возвращается программистская шутка, например: "Algorithm: a word used by programmers when they don't want to explain how their code works." (Алгоритм — это слово, используемое программистами, когда они не хотят объяснять, как работает их код));
- в ответ на сообщение, представляющее собой дату в формате ДД.ММ, возвращается либо список дел, запланированных на эту дату в таблице Google (массив объектов), либо фраза "You have nothing to do on this day.", если на эту дату не запланировано никаких дел;
- в ответ на любое другое сообщение возвращается фраза "I have nothing to say.".
При разработке бота я буду опираться в основном на официальную документацию.
- Репозиторий с кодом сервера для бота.
- Бот — @aio350_reminder_bot.
Если вам это интересно, прошу под кат.
Метод document.write, подобное и связанное с ним
Данная заметка является своего рода комментарием к другой статье на Хабр-е Удивительная история document.write, которая, в свою очередь, представляет из себя перевод публикации с сайта https://eager.io/ The Curious Case of document.write. Я же здесь хочу лишь подчеркнуть определённую полезность данного метода клиентского JavaScript (https://developer.mozilla.org/ru/docs/Web/API/Document/write), а также немного порассуждать о подходах и проблемах, связанных с генерацией разметки.
Изучение TypeScript — полное руководство для начинающих. Часть 2 — ссылочные типы данных
Всем привет!
Меня зовут Лихопой Кирилл и я - фронтенд-разработчик в компании Idaproject.
В этой серии статей я рассказываю об основах TypeScript, его преимуществах и фишках.
Сегодня мы поговорим про объекты, массивы и функции, а также затронем еще пару тем, полезных для веб-разработки. Если вы пропустили первую часть, то советую ознакомиться: Изучение TypeScript — Полное руководство для начинающих. Часть 1 — введение и примитивные типы данных. Итак, начнем.
Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры
Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских.
Горячее
Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax().
Узнайте о JavaScript контейнерах.
Что случится если вы откажетесь от React?
Ещё один сайт на HTML. Да, так тоже можно.
Остальные новости и статьи — под катом.
Нецелевое использование assert-функций в TypeScript
Это ужасный (но очень полезный) хак, который я придумал для добавления типов в старый код. Вчера мой коллега, работающий над добавлением типов в одну из наших основных библиотек на LinkedIn, спросил меня, как быть со старым (и уже не рекомендуемым) паттерном. В качестве одного из вариантов решения мы попробовали применить assert-функцию. вразрез с её предназначением. В конечном итоге нам не удалось добиться конкретно желаемого 1, но мне этот паттерн показался достаточно интересным, чтобы им поделиться.
Безопасность Web Apps в Telegram ботах
16 апреля 2022 Telegram презентовал новую фичу - Web apps, с помощью которой можно открывать веб страницы в боте без перехода в браузер. Подробнее можно почитать в источнике https://core.telegram.org/bots/webapps.
Однозначно это удобная функция для пользователей и для разработчиков. Но, так как это веб приложение, можно просмотреть что под капотом. Telegram привел в качестве примера бота @DurgerKingBot, его и разберем.
Функция Reactive во Vue: как это работает
После jQuery я попробовал AngularJS и был очарован его возможностями. Несколько строк в AngularJS заменяли кучу спегетти-кода в jQuery. Это было похоже на магию. Сейчас все современные Frontend-фреймворки так или иначе обеспечивают реактивность, и это уже никого не удивляет. Тем не менее далеко не все разработчики понимают, как это работает.
Сейчас я работаю с Vue, поэтому и разбираться с тем, как устроены реактивные функции, будем на его примере. Я расскажу, как сделать из простого объекта реактивный, а также немного о том, какие современные возможности JS для этого используются.
Node.js: разрабатываем сборщик модулей
Привет, друзья!
Вам когда-нибудь хотелось узнать, как работают сборщики модулей (module bundlers) JavaScript типа Webpack или Parcel, что называется, под капотом. Если хотелось, тогда эта статья для вас.
В данном туториале мы разработаем простой сборщик модулей на Node.js, который будет компилировать все модули приложения в один минифицированный файл с кодом, соответствующим стандарту ES5.
Тестирование с помощью Vitest
Vitest — это новая среда тестирования на базе Vite. Он все еще находится в разработке, и некоторые функции могут быть еще не готовы, но это хорошая альтернатива, которую можно попробовать и изучить.
React Native 0.68 и «новая архитектура»
30 марта 2022 года команда инженеров Meta анонсировали новую версию React Native 0.68. Помимо различных минорных улучшений и фиксов эта версия содержит историческое для платформы изменение, впервые мы можем попробовать в своих приложениях так называемую новую архитектуру. Давайте вместе разберемся что это за новая архитектура и почему к ней шли без малого 4 года.
Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React
Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая.
— Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden
, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5.
— Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений.
– Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс, например, import test from 'node:test';
. Не все базовые модули на данный момент будут использовать через префикс, например fs.
– Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научитесь делать пуш-уведомления полезными.
Больше новостей и статей под катом. Хватит почитать на все майские!
Изучение TypeScript — Полное руководство для начинающих. Часть 1 — введение и примитивные типы данных
Всем привет. Меня зовут Лихопой Кирилл и я - Frontend-разработчик в компании Idaproject.
Представляю вашему вниманию cвою первую статью на Хабре, a точне перевод англоязычной статьи, на тему изучения TypeScript (TS, Тайпскрипт).
11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком
Я полагаю, вы знакомы с инструментами разработчика браузера Chrome. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.
В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки!
Разработчик в стране Serverless: готовим чемоданчик serverless разработчика (Часть 5 Заключительная)
В предыдущих частях я сделал приложения, которое работает с БД, GitHub API. Все компоненты разворачиваются при помощи AWS SAM. Можно запускать реализованные функции локально. Все функции собраны воедино в одно API:
Первые шаги. Первая лямбда (Часть 1)
Как подружиться с БД (Часть 3)
В этой, последней части, я рассмотрю вопросы, без ответов на которые опытная эксплуатация вряд ли будет похожа на прогулку в парке.
Уже изучено достаточно много, чтобы начинать собирать свой чемоданчик must have инструментов для serverless разработки. В этой части я соберу свой чемоданчик, а вы оставляйте в комментариях свои, будет интересно.
Забавы с маргинальными фреймворками: Пишем приложение для отладки TCP соединений с Malina.js
Одна из моих работ связана с отлаживанием протоколов общения теплосчётчиков для удалённого снятия показаний. Чаще всего теплосчётчик даже не мой, а находится у клиента на объекте, поэтому я подключаю его через GPRS-терминал к какой-либо своей сетевой машине, где поднят TCP сервер откуда посылаю байтики и смотрю, что мне ответит теплосчётчик. Посылать байты с консоли можно, но не очень удобно. Есть ряд приложений с которыми этот процесс упрощается, но я решил сделать себе в помощь специальный TCP сервер в виде Node-приложения с Web-интерфейсом, созданном с помощью фреймворка Malina.js.
Под катом я расскажу в деталях о создании этого приложения. Рассказ будет очень длинным, чашка кофе или бокал пенного лишними не будут.
Вклад авторов
-
alexzfort 9303.0 -
ru_vds 6103.6 -
ilusha_sergeevich 2778.0 -
azproduction 2516.8 -
alizar 1913.6 -
phillennium 1623.2 -
TheShock 1133.0 -
aio350 1000.0 -
spmbt 944.6 -
glebmachine 733.0