Обновить
234.22

JavaScript *

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

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

Создание telegram web apps и взаимодействие с ними в телеграм ботах

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

В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная - Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.

Читать далее

Pinia vs Vuex: Ананасовый экспресс в светлое будущее

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

Pinia vs Vuex: Ананасовый экспресс сижу код пишу!

Pinia, легковесная библиотека управления состояниями для Vue.js, приобрела популярность в последнее время. Она использует новую систему реактивности во Vue 3 для создания интуитивно понятной и полностью типизированной библиотеки управления состояниями.

Читать далее

Войти в IT в 27 лет. Что получилось за 4 года

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

4 года назад я решила уйти из маркетинга и начать работать фронтенд-разработчиком. Расскажу о том, как искала первую работу, как жила на 30 тысяч в Москве, как обучалась, как устроилась фронтом в Prequel и что сделала бы иначе, окажись в той же ситуации. Также всем желающим могу рассказать, как выровнять блок по вертикали))

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


Как все начиналось

В далеком 2007 году я заканчивала экономический факультет Тверского университета, у нас был курс информатики на семестр, где 3-4 занятия были посвящены html и css. Преподаватель объяснила основы табличной верстки, без адаптива, на уровне “Цвет текста можно поменять вот так, а картинку вставить вот так”. Далее в голодные студенческие годы я начала заниматься фотографией и для поиска клиентов сделала свой первый сайт на Joomla. Отсутствие способностей к дизайну, несколько лекций по табличной верстке и случайно купленная книжка с маркетинговым названием “Как сделать сайт, продвинуть его и начать зарабатывать” дали свой ужасающий по стилю, но вполне работающий результат.

Вычитанные в этой книге советы по SEO сработали, удалось продвинуться по некоторым средне- и низкочастотным запросам, например, “деловая фотосессия”, помогло еще и то, что я жила в городе на 400 тысяч человек с умеренной конкуренцией в фотографии. Однако после универа и переезда в Москву заниматься фотографией стало сложнее – отработать полную неделю в Москве, а на выходных встать в 5 утра на съемку свадьбы было тяжеловато физически. В одну из суббот, отсняв армянскую свадьбу на 200 человек, я осознала, что с фото пора завязывать.

Дальше была попытка работать по специальности, однако я снова пришла к SEO и 2,5 года отработала в агентстве SEO-шником, но со временем меня перестало устраивать, что в оптимизации сложно отследить точное влияние своих действий на результат. Одновременно вокруг росло количество курсов, обещающих, что ты станешь Senior Java Developer за 2 недели (нет) и друзей-программистов, обещающих 150к уже через полгода (нет, нет, нет).

Я самоуверенно решила, что верстку и так знаю, купила книгу по JavaScript и начала читать и делать упражнения. Дополнительно посмотрела пару уроков на Youtube “Как сделать сайт за 2 часа”, повторила за авторами, получила несколько лендингов. Через пару месяцев отправилась на поиски работы, сайтики с видео-уроков представила как свое портфолио, но не скрывала, что сделаны по обучающим видосам.

Читать далее

Фронтенд-новости №6. Интернет сломан, бесплатный VPN в Edge, State of CSS 2022

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

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 9–15 мая.

Что там у вас ещё

Разрабатываем REST API с помощью TypeScript, NestJS, Prisma, AdminJS и Swagger

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



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


В данном туториале мы разработаем простой сервер на NestJS, взаимодействующий с SQLite с помощью Prisma, с административной панелью, автоматически генерируемой с помощью AdminJS, и описанием интерфейса, автоматически генерируемым с помощью Swagger. Все это будет приготовлено под соусом TypeScript.


Репозиторий с кодом проекта.


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

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

Симулятор x86 подобного процессора на машине Тьюринга

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

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

Читать далее

Знакомство с ООП на примере JavaScript

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

Всем привет! В этой статье мы рассмотрим основные характеристики объектно-ориентированного программирования (ООП) на практических примерах JS-кода. В ходе обсуждения мы осветим основные принципы ООП, а также ответим на вопросы, почему и когда этот стиль может быть полезен.
Читать дальше →

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

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

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

И вот я готов представить обновлённую Измерию. Всё, что осталось от старой, — возможность оставлять рейтинги на карте и её (карты) вид. Для полного списка изменений предлагаю проследовать на специально отведённую для этого страницу. В данной же статье я разберу косяки, на которые пользователи и комментаторы Хабра обратили внимание, способы их устранения, а также дополнения, приносящие ещё больше полезности в сервис. Примерное время чтения: 7 минут.

Читать далее

Node.js: разрабатываем бота для Telegram

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


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


В данном туториале мы разработаем простого бота для 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.".

При разработке бота я буду опираться в основном на официальную документацию.



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

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

Метод document.write, подобное и связанное с ним

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

Данная заметка является своего рода комментарием к другой статье на Хабр-е Удивительная история document.write, которая, в свою очередь, представляет из себя перевод публикации с сайта https://eager.io/ The Curious Case of document.write. Я же здесь хочу лишь подчеркнуть определённую полезность данного метода клиентского JavaScript (https://developer.mozilla.org/ru/docs/Web/API/Document/write), а также немного порассуждать о подходах и проблемах, связанных с генерацией разметки.

Читать далее

Изучение TypeScript — полное руководство для начинающих. Часть 2 — Ссылочные типы данных

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

Всем привет!
Меня зовут Лихопой Кирилл и я - Fullstack-разработчик.

В этой серии статей я рассказываю об основах TypeScript, его преимуществах и фишках.

Сегодня мы поговорим про объекты, массивы и функции, а также затронем еще пару тем, полезных для веб-разработки. Итак, начнем.

Другие части:
Часть 1 - Введение и примитивы
Часть 3 - Классы и интерфейсы
Часть 4 - Литералы и дженерики
Часть 5 - Строгий режим и сужение типов

Читать далее

Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры

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

Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских.

Горячее

Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax().

Узнайте о JavaScript контейнерах.

Что случится если вы откажетесь от React?

Ещё один сайт на HTML. Да, так тоже можно.

Остальные новости и статьи — под катом.

Что там у вас ещё

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

Нецелевое использование assert-функций в TypeScript

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

Это ужасный (но очень полезный) хак, который я придумал для добавления типов в старый код. Вчера мой коллега, работающий над добавлением типов в одну из наших основных библиотек на LinkedIn, спросил меня, как быть со старым (и уже не рекомендуемым) паттерном. В качестве одного из вариантов решения мы попробовали применить assert-функцию. вразрез с её предназначением. В конечном итоге нам не удалось добиться конкретно желаемого 1, но мне этот паттерн показался достаточно интересным, чтобы им поделиться.
Читать дальше →

Безопасность Web Apps в Telegram ботах

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

16 апреля 2022 Telegram презентовал новую фичу - Web apps, с помощью которой можно открывать веб страницы в боте без перехода в браузер. Подробнее можно почитать в источнике https://core.telegram.org/bots/webapps.

Однозначно это удобная функция для пользователей и для разработчиков. Но, так как это веб приложение, можно просмотреть что под капотом. Telegram привел в качестве примера бота @DurgerKingBot, его и разберем.

Читать далее

Функция Reactive во Vue: как это работает

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

После jQuery я попробовал AngularJS и был очарован его возможностями. Несколько строк в AngularJS заменяли кучу спегетти-кода в jQuery. Это было похоже на магию. Сейчас все современные Frontend-фреймворки так или иначе обеспечивают реактивность, и это уже никого не удивляет. Тем не менее далеко не все разработчики понимают, как это работает.

Сейчас я работаю с Vue, поэтому и разбираться с тем, как устроены реактивные функции, будем на его примере. Я расскажу, как сделать из простого объекта реактивный, а также немного о том, какие современные возможности JS для этого используются.

Читать далее

Node.js: разрабатываем сборщик модулей

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


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


Вам когда-нибудь хотелось узнать, как работают сборщики модулей (module bundlers) JavaScript типа Webpack или Parcel, что называется, под капотом. Если хотелось, тогда эта статья для вас.


В данном туториале мы разработаем простой сборщик модулей на Node.js, который будет компилировать все модули приложения в один минифицированный файл с кодом, соответствующим стандарту ES5.


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


Репозиторий с кодом.

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

Тестирование с помощью Vitest

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

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

Читать далее

React Native 0.68 и «новая архитектура»

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

30 марта 2022 года команда инженеров Meta анонсировали новую версию React Native 0.68. Помимо различных минорных улучшений и фиксов эта версия содержит историческое для платформы изменение, впервые мы можем попробовать в своих приложениях так называемую новую архитектуру. Давайте вместе разберемся что это за новая архитектура и почему к ней шли без малого 4 года.

Читать далее

Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

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

Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая.

— Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5.

— Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений.

Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс, например, import test from 'node:test';. Не все базовые модули на данный момент будут использовать через префикс, например fs.

– Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научитесь делать пуш-уведомления полезными.

Больше новостей и статей под катом. Хватит почитать на все майские!

Что там у вас ещё

Вклад авторов