Pull to refresh
16
0
Александр @BegeMode

User

Send message

Вам не нужен для этого JavaScript

Level of difficultyMedium
Reading time11 min
Views28K

Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…

▍ Правило наименьших полномочий


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

В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS. JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.

В отличие от JS с его императивностью, HTML и CSS декларативны. Вы говорите браузеру, что делать, а не как это делать. Это значит, что браузер сам выбирает, как это делать, и может сделать это наиболее эффективным образом.

Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.
Читать дальше →
Total votes 97: ↑95 and ↓2+93
Comments38

Оптимизируем шрифты и ускоряем сайт на 5-12%

Level of difficultyEasy
Reading time8 min
Views12K

Описываем способы максимально ускорить загрузку шрифтов на сайте.

Развенчиваем мифы и разбираем ошибки. В статье вас ждут полезные онлайн сервисы для ускорения работы.

Читать далее
Total votes 18: ↑17 and ↓1+16
Comments24

Подключаем умный поиск (GPT) к своей базе документов

Level of difficultyEasy
Reading time7 min
Views19K

Есть отечественный файрвол (NGFW) и есть документация для пользователей powered by GitBook. В этой документации работает простой поиск — только по словам и словосочетаниям. И это плохо, потому что нет ответов на вопросы: "Какие алгоритмы шифрования ipsec поддерживаются у вас?", "Как заблокировать ютуб?", "Как настроить DMZ?".

Хочется, чтобы поиск был “умным” и чтобы пользователи могли обращаться с подобными вопросами именно к поиску, а не к инженерам тех. поддержки. AI или ML внутри — не важно, как это называть. Но на простые вопросы из списка выше поиск должен отвечать.

Я решил эту задачу (Retrieval Question Answering), используя OpenAI API. Казалось бы, уже опубликованы сотни похожих инструкций, как это сделать. Но под катом будет не инструкция, а рассказ про сложности, которые пришлось решить на пути от идеи до запуска поиска.

Читать далее
Total votes 19: ↑19 and ↓0+19
Comments25

Atomic CSS здорового человека. UnoCSS

Level of difficultyMedium
Reading time12 min
Views4.3K

Продолжение перевода статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой рассматривается уже сам UnoCSS.

Читать далее
Total votes 4: ↑4 and ↓0+4
Comments5

Создаём собственную систему поиска фильмов на основе проекта Андрея Карпати

Level of difficultyMedium
Reading time8 min
Views8.6K
image

В апреле 2023 года Андрей Карпати, один из основателей OpenAI и бывший директор по ИИ в Tesla, поделился своим занятным проектом выходного дня – системой поиска и рекомендации кино.

Её пользовательский интерфейс откровенно прост и предлагает две основных функции: блок поиска, в котором можно искать кино по названию, и вывод списка из 40 похожих фильмов при клике по интересующему.

Несмотря на популярность этого проекта, Карпати, к сожалению, пока не поделился с публикой его исходным кодом.

И вот почему
Источник

Chaturvedi: «Может, откроете исходный код проекта?»

Andrej Karpathy: «Даже не знаю. Он такой страшный, что мне стыдно».


Так что запасайтесь попкорном и будем воссоздавать его сами на основе OpenAI и векторной базы данных!
Читать дальше →
Total votes 55: ↑55 and ↓0+55
Comments5

План «Барбаросса» от Vue.js

Level of difficultyMedium
Reading time4 min
Views14K

После выхода крайней и достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе. Основное внимание переключилось на экосистему - Vite, Nuxt, VitePress, Pinia и другие.

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

Читать далее
Total votes 16: ↑14 and ↓2+12
Comments30

Планировщик задач: не замораживаем вкладку при открытии страницы

Reading time21 min
Views5.4K

Современные сайты — это сложные проекты, требующие много времени на обработку JavaScript. А современные пользователи — это требовательные люди, готовые убежать к конкуренту при ощущении «что-то сайт подтормаживает». Такое ощущение у пользователя может вызываться большим Total Blocking Time, когда он подолгу не может взаимодействовать со страницей.

Что в такой ситуации делать? На нашей конференции HolyJS Виктор Хомяков из Яндекса рассказал о том, как там делали инициализацию скриптов на странице поиска более дружественной к человеку и не блокирующей UI. А также о том, как и вам уменьшить TBT, не ухудшая другие показатели.

Доклад понравился зрителям, поэтому теперь для Хабра мы сделали текстовую версию. Далее повествование идёт от лица Виктора.

Читать далее
Total votes 23: ↑22 and ↓1+21
Comments13

Введение в потоковую передачу данных в Вебе

Level of difficultyMedium
Reading time8 min
Views11K


Веб-потоки (web streams) предоставляют основанный на веб-стандартах способ асинхронной потоковой передачи данных по сети. Они позволяют разработчикам обрабатывать большие наборы данных по чанкам (chunks — части, куски), контролировать перегрузку сети (обратное давление — backpressure) и создавать высокоэффективные и отзывчивые приложения.


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


Web Streams API постепенно становится краеугольным камнем основных веб-платформ, включая браузеры, Node.js и Deno. В этой статье мы рассмотрим, что такое веб-потоки, как они работают, их преимущества, а также инструменты, созданные на их основе.




Читать дальше →
Total votes 4: ↑4 and ↓0+4
Comments3

Технология единого входа: как работает SSO

Level of difficultyEasy
Reading time15 min
Views16K

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

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

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

Первые идеи SSO зародились в конце 1990-х, когда корпоративные сети стали более сложными, и потребность в централизованном управлении доступом стала очевидной. Это был период, когда организации начали искать способы упростить управление учетными записями для своих сотрудников.
В начале 2000-х было активное развитие технологий SSO. Организации начали внедрять SSO для упрощения доступа к корпоративным приложениям и ресурсам. Это также был период появления стандартов, таких как Kerberos, который лег в основу многих ранних реализаций SSO.
С развитием облачных технологий и мобильных устройств SSO начало получать ещё большее распространение. Возникли такие стандарты, как OAuth и OpenID, которые позволили SSO выйти за пределы корпоративных сетей и обеспечить интеграцию с обширным спектром внешних онлайн-сервисов и приложений.

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

Читать далее
Total votes 23: ↑18 and ↓5+13
Comments7

Выбор СУБД: шпаргалка, чтобы не запутаться

Reading time6 min
Views30K

Вопрос выбора СУБД для российской компании или госоргана – вопрос не праздный, тем более сейчас – когда с момента ухода с рынка западных вендоров прошло уже полтора года и пора что-то решать. Но как не запутаться в номенклатуре СУБД и выбрать ту, которая лучше всего подходит? Без ложной скромности скажу: мы в «Кругах Громова» уже немного поднаторели в систематизации, поэтому надеемся, что наша шпаргалка для тех, кто хочет выбрать СУБД, окажется полезной.

Начнем с классики. СУБД делятся на несколько типов. Не будем описывать их подробно, остановимся только на их основном предназначении.

Читать далее
Total votes 23: ↑14 and ↓9+5
Comments10

Неочевидные моменты TypeScript и способы их решения

Level of difficultyHard
Reading time7 min
Views15K

Разрабатывая на TypeScript, можно столкнуться с ситуациями, в которых код будет работать не так, как ожидается. В статье разберем несколько таких моментов. Часть просто придется иметь ввиду, часть решается обновлением, а часть исправляется – обо всем по порядку.

Если вам будет удобно сразу же проверять каждый пример, читая статью, можно это делать в редакторе. Он удобен тем, что версию TypeScript в нем можно переключать.

Читать далее
Total votes 16: ↑14 and ↓2+12
Comments11

Глубокий JS. В память о типах и данных

Level of difficultyHard
Reading time10 min
Views26K

Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в официальной документации, а на просторах интернета полно статей на этот счет.

Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS V8.

Читать далее
Total votes 55: ↑53 and ↓2+51
Comments27

Вкатываемся в Machine Learning с нуля за ноль рублей: что, где, в какой последовательности изучить

Level of difficultyEasy
Reading time26 min
Views173K

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

Читать далее
Total votes 159: ↑157 and ↓2+155
Comments49

Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика

Reading time4 min
Views27K

С каждым годом собеседования становятся все сложнее и сложнее, а количество вопросов, которые могут спросить, не укладывается в голове.

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

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

Ну что, поехали!

Читать далее
Total votes 16: ↑15 and ↓1+14
Comments19

Это база: нюансы работы с Redis. Часть 1

Level of difficultyMedium
Reading time15 min
Views34K

Привет! Меня зовут Петр и мы в компании Nixys очень любим Redis. Эта база используется, если не на каждом нашем проекте, то на подавляющем большинстве. Мы работали как с разными инсталляциями Redis, так и с разными версиями, вплоть до самых дремучих, вроде 2.2. Несмотря на то, что в Интернете очень много статей и докладов по этой БД, мы в своей практике достаточно часто встречаемся с непониманием некоторых основных концепций Redis и со стороны разработчиков, и со стороны системных администраторов.

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

Читать далее
Total votes 79: ↑79 and ↓0+79
Comments5

Объясняем простым языком, что такое трансформеры

Level of difficultyEasy
Reading time12 min
Views25K

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

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

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

Читать далее
Total votes 36: ↑36 and ↓0+36
Comments2

Как можно использовать .NET из Javascript (React) в 2023 году

Level of difficultyMedium
Reading time5 min
Views6.8K

Статья показывает опыт использования .NET из JavaScript (React) с помощью компиляции .NET кода в WebAssembly с помощью новых возможностей .NET 7. Включает инструкцию по созданию проекта для .NET для использования из Javascript, и интеграции его в веб-приложение, написанного с использованием React. Рассматривается также сборка такого проекта с помощью GitHub Actions (CI) и хостинг его на GitHub Pages. Содержатся ссылки репозитории на GitHub тестового и реального проекта, использующие данный подход.

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments12

8 углубленных вопросов на собеседованиях на роль сеньора в JavaScript

Level of difficultyMedium
Reading time13 min
Views26K
image

JavaScript — это мощный язык, который является частью фундамента интернета. У этого мощного языка также есть некоторые свои особенности. Например, знаете ли вы, что значение 0 === -0 равно true, или что Number("") дает 0?

Дело в том, что иногда эти причуды могут заставить вас почесать в затылке или даже задаться вопросом, был ли Брендан Эйч под кайфом в тот день, когда он изобретал JavaScript. Что ж, дело здесь не в том, что JavaScript — плохой язык программирования или он — зло, как говорят его критики. Со всеми языками программирования связаны какие-то странности, и JavaScript не является исключением.

В этом материале мы покажем подробное объяснение некоторых важных вопросов на интервью по JavaScript. Моя цель будет состоять в том, чтобы тщательно объяснить эти вопросы, чтобы мы могли понять лежащие в их основе концепции.
Читать дальше →
Total votes 55: ↑35 and ↓20+15
Comments37

9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании

Level of difficultyMedium
Reading time15 min
Views47K

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

Меня зовут Илья, я frontend-разработчик SimbirSoft. Долгое время вопрос изучения алгоритмов был холиварным. Со я временем убедился, что ни одно современное собеседование в крупную компанию не обходится без вопросов про алгоритмы, и в последний год их всё больше.

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

Статья будет полезна разработчикам любых направлений, которые начали свой путь к крепкому уровню middle.

Читать далее
Total votes 9: ↑6 and ↓3+3
Comments19

Свой ChatGPT бот в Telegram в 2024

Level of difficultyMedium
Reading time8 min
Views54K

Я решил сделать свою интеграцию ChatGPT в Telegram, чтобы лучше понять, как работает ChatGPT API, какие настройки мне доступны и пользоваться ботом без всяких ограничений, а также иметь свободный доступ к модели GPT-4.

Мне не хотелось для этого проекта держать отдельный сервер, покупать домен и делать под него SSL сертификат, который требует Telegram для настройки WebHook. Поэтому я решил настроить всю систему с помощью serverless-технологий. 

Читать далее
Total votes 20: ↑17 and ↓3+14
Comments59

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity