Frontend
2.27K subscribers
504 photos
30 videos
4 files
1.36K links
Много полезного материала по JavaScript, TypeScript, Angular, React, Vue, HTML, CSS, Node.js, Mobile и многому другому.

По вопросам сотрудничества- @Daily_admin_info

По иным темам @un_ixtime
Download Telegram
pretty-ts-errors

Сделайте ошибки TypeScript более красивыми и удобочитаемыми в VSCode🎀
Ошибки TypeScript становятся более запутанными по мере увеличения сложности типов. В какой-то момент TypeScript накидает вам дерьмовую кучу скобок и "...".
Это расширение поможет вам понять, что происходит.

https://github.com/yoavbls/pretty-ts-errors
CSS с ограниченной областью действия вернулся

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

Что ж, отличная новость — он вернулся. И это намного лучше, чем предыдущая версия.

Что еще лучше, спецификация W3C в основном стабильна, и сейчас в Chrome есть рабочий прототип. Нам просто нужен небольшой интерес со стороны сообщества, чтобы побудить другие браузеры создавать свои реализации и довести это дело до конца.

https://keithjgrant.com/posts/2023/04/scoped-css-is-back/
Аутентификация Next.js: реализация безопасной аутентификации и авторизации пользователей

В этом посте я собираюсь показать вам, как реализовать безопасную аутентификацию и авторизацию пользователей в вашем приложении Next.js.
https://howtocrackit.com/next-js-user-authentication-authorization/
🔥2
Dark Mode в 3-х строках CSS

Темный режим — это тенденция дизайна, при которой цветовая схема веб-сайта изменяется на темный фон со светлым текстом и элементами. Его также называют ночным режимом или темной темой . Целью темного режима является снижение нагрузки на глаза в условиях низкой освещенности, экономия заряда батареи на мобильных устройствах и создание стильного и современного внешнего вида. https://dev.to/madsstoumann/dark-mode-in-3-lines-of-css-and-other-adventures-1ljj
Как преобразовать компоненты Figma в Next.js с помощью Tailwind CSS

В этой статье мы рассмотрим, существует ли простой автоматический способ преобразования проектов Figma в код Next.js. Затем мы рассмотрим быстрый способ преобразования Figma в Next.js с помощью Tailwind CSS. Давайте начнем! https://blog.logrocket.com/convert-figma-components-next-js-tailwind-css/
Полная шпаргалка по JavaScript

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

Отношения любви и ненависти сложны, как и JavaScript.

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

https://javascript.plainenglish.io/the-ultimate-javascript-cheatsheet-a-love-hate-relationship-f44e5e486188
Как разобрать RSS-канал с помощью JavaScript?

Иногда нам нужно проанализировать RSS-канал с помощью JavaScript.

В этой статье мы рассмотрим, как анализировать RSS-канал с помощью JavaScript.

https://javascript.plainenglish.io/how-to-parse-an-rss-feed-using-javascript-59517961149a
🔥2
CSS закусочная

Чтобы играть, введите селектор CSS в редакторе ниже, чтобы выбрать правильные элементы на столе. Если вы сделаете это правильно, вы перейдете на следующий уровень.

Наведите указатель мыши на элементы в таблице, чтобы увидеть их HTML-разметку.
https://flukeout.github.io/#
🔥4
Что быстрее в map() JavaScript по сравнению с forEach?

Оба map()и forEach()являются методами массива в JavaScript, которые используются для перебора каждого элемента в массиве. Однако они имеют разные функциональные возможности и поэтому работают по-разному в определенных сценариях. В этой статье мы рассмотрим различия между map()и forEach()то, как они влияют на производительность.

https://javascript.plainenglish.io/which-is-faster-in-javascript-map-vs-foreach-4d5a62daaaa6
2
Более 50 подсказок ChatGPT для веб-разработчиков

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

В этом сообщении блога мы предоставим вам более 50 подсказок и стратегий, которые помогут вам ускорить рабочий процесс веб-разработки с помощью ChatGPT. От изучения концепций в качестве новичка до подготовки к собеседованиям — вы найдете все, что вам нужно, чтобы максимально использовать возможности ИИ в качестве веб-разработчика.

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

https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt
5 способов ускорить разработку внешнего интерфейса

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

https://blog.bitsrc.io/5-ways-to-speed-up-frontend-development-d536e6497c31
🔥2
Как настроить псевдонимы путей в проектах внешнего интерфейса нативным способом

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

https://dev.to/nodge/the-native-way-to-configure-path-aliases-in-frontend-projects-ce4
👍2
Сегодня команда TypeScript выпускает новое расширение VS Code под названием Deopt Explorer! Этот инструмент может помочь найти полиморфизм и деоптимизацию в вашем коде, и он уже помог нам ускорить работу самого TypeScript. Посмотрите, что мы построили!

https://devblogs.microsoft.com/typescript/introducing-deopt-explorer/
Используйте Notion в качестве базы данных для своего блога Next.JS

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

В этом посте вы узнаете, как получать страницы из Notion API и отображать их содержимое, чтобы создать замечательный блог Next.JS, полностью управляемый с помощью Notion. https://dev.to/martinp/use-notion-as-a-database-for-your-nextjs-blog-195p
Forwarded from REact
⚡️refine.new — Представляем самый быстрый способ создания приложений React

Узнайте, как Refine.new и платформа Refine меняют способы создания интерфейсных приложений разработчиками в React. https://refine.hashnode.dev/refinenew-introducing-the-fastest-way-to-create-react-apps
Статьи & Учебники

Продвинутая оптимизация производительности веб-сайтов (7 минут чтения)

Оптимизация веб-производительности всегда была критически важна для веб-сайтов и приложений. Поскольку функциональность приложений неуклонно растет, увеличивается потребность в надежной производительности. В этой статье рассматриваются передовые методы веб-оптимизации, такие как ленивая загрузка, кэширование, сжатие изображений и многое другое. https://www.codemotion.com/magazine/frontend/web-developer/advanced-web-performance-optimization/

Насколько сложно создать фронтенд-фреймворк?? (12 минут чтения)

Фреймворки для фронтенда помогают абстрагироваться от обычного HTML и JavaScript в пользу понятного кода, компонентов и реактивности. В этой статье рассказывается о том, как менее чем за 400 строк кода построить с нуля базовый фронтенд-фреймворк, обладающий реактивностью и композитивностью (компонентная архитектура). https://18alan.space/posts/how-hard-is-it-to-build-a-frontend-framework.html

Проектирование липких меню: Руководство по UX (6 минут чтения)

Липкие меню очень полезны на мобильных устройствах и в отзывчивых веб-приложениях. Однако есть несколько моментов, о которых следует помнить, когда вы их добавляете, поскольку они могут сильно повлиять на UX в определенных ситуациях, например, поведение меню при поднятой клавиатуре на мобильных устройствах. В этой статье обсуждается, когда вам следует & не следует использовать липкие меню, как сделать так, чтобы они не отвлекали пользователей, и лучшие практики, чтобы убедиться, что они всегда отзывчивы и доступны. https://smashingmagazine.com/2023/05/sticky-menus-ux-guidelines/

Мнения & Советы

Работа над незнакомой кодовой базой (3 минуты чтения)

Разработчикам часто приходится работать над незнакомой кодовой базой. Это происходит каждый раз, когда человек присоединяется к новому проекту или даже когда ему нужно поработать над ранее нетронутой частью в больших проектах. Это явление не ограничивается разработчиком, которому нужно исправить ошибку; это может быть архитектор решений, которому нужно разработать новую функцию, или автор открытого кода, работающий над проблемой на GitHub в свободное время. В этой статье описывается, как лучше всего подойти к ситуации, чтобы сократить время, необходимое для начала внесения вклада в незнакомую кодовую базу. https://blog.frankel.ch/working-unfamiliar-codebase/

Бум ИИ с открытым исходным кодом построен на подачках Big Tech. Как долго это продлится? (7 минут чтения)

Бум ИИ с открытым исходным кодом во многом основан на исследованиях Big Tech. Например, многие модели, о которых идет речь в заголовках, построены на основе LLaMA, большой языковой модели с открытым исходным кодом, выпущенной Meta AI. Если эти компании решат прекратить публиковать свои модели, сообщество ИИ с открытым исходным кодом может потерпеть крах по сравнению с ИИ с закрытым исходным кодом. Сейчас критическое время для сообщества ИИ с открытым исходным кодом, чтобы найти способы сделать ИИ более доступным для всех. https://www.обзор технологий.com/2023/05/12/1072950/open-source-ai-google-openai-eleuther-meta/

Стартапы & Инструменты

ChatGPT Prompt Engineering для разработчиков (веб-сайт)

Этот бесплатный курс от deeplearning.ai и Эндрю Нг (соучредитель и бывший руководитель Google Brain) учат разработчиков, как использовать LLM для быстрого создания новых и мощных приложений. В статье описывается принцип работы LLM, приводятся лучшие практики для оперативного проектирования и показано, как LLM API могут быть использованы в приложениях для решения различных задач, таких как обобщение, вывод, преобразование текста и расширение. https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/
Эпический стек (GitHub Repo)

The Epic Stack - это авторитетный стартёр проектов и справочник, который позволяет командам быстрее доводить свои идеи до производства на более стабильном фундаменте. Он поставляется с множеством функций, таких как аутентификация по электронной почте/паролю, электронные письма для транзакций, размещение пользовательских изображений, стилизация с помощью TailwindCSS, GitHub Actions и многое другое. https://github.com/epicweb-dev/epic-stack

Windmill (GitHub Repo)

Windmill - платформа для разработчиков с открытым исходным кодом для превращения скриптов в рабочие процессы и пользовательские интерфейсы. Это альтернатива Airplane и Retool. Поддерживаемые языки сценариев: Python, Typescript, Go, Bash и SQL. https://github.com/windmill-labs/windmill

🎁 Разное

Что нового в CSS и пользовательском интерфейсе: I/O 2023 Edition

В этой статье представлены 20 самых интересных и важных функций CSS в Chrome, таких как запросы контейнера (которые позволяют стилизовать элементы на основе размера их контейнера) и селектор :has(), который позволяет выбирать элементы, являющиеся потомками элемента, имеющего 'n' количество дочерних элементов. https://developer.chrome.com/en/blog/whats-new-css-ui-2023/

Экосистема JavaScript восхитительно странная (6 минут чтения)

Экосистема JavaScript неуклонно растет. Но менее 10 лет назад JavaScript не был таким функциональным, как сейчас - в нем не было импортов, классов, async, стрелочных функций и многого другого. С течением времени JavaScript совершенствовался, но JavaScript все еще фундаментально отличается от таких языков, как Ruby и Python. https://fly.io/blog/js-ecosystem-delightfully-wierd/

Как я использовал GitHub Copilot для создания расширения для браузера (8 минут чтения)

GitHub Copilot можно использовать как инструмент для парного программирования. В этом руководстве рассказывается о том, как использовать этот инструмент искусственного интеллекта для создания приложений, например, расширений для браузеров. У автора также есть несколько ключевых выводов. Например, хотя генеративный ИИ облегчает изучение новых предметов, он не заменяет работу по обучению. По-прежнему проводятся эксперименты и исследования. Вместо этого генеративный ИИ помогает значительно ускорить обучение. https://github.blog/2023-05-12-how-i-used-github-copilot-to-build-a-browser-extension/
This media is not supported in your browser
VIEW IN TELEGRAM
Это просто обычный старый сайт. Никакого JavaScript. Навигационные страницы с кликами <a> ссылаются на другие HTML-страницы. Самый простой сайт в мире. Тем не менее, с помощью нескольких строк кода для активации View Transitions KAPOW.

https://codepen.io/chriscoyier/project/editor/DyKgxe
This media is not supported in your browser
VIEW IN TELEGRAM
Методы работы с массивами в JavaScript.
Работает намного лучше, чем ваш файл .env

Шесть месяцев назад я призывал всех отказаться от использования файлов .env в пользу подходов, использующих секретные платформы управления. С тех пор я узнал и испытал гораздо больше о том, как эффективно управлять переменными среды. В этой статье я снова аргументирую, почему мы должны сократить практику хранения всех переменных среды в файле .envи перейти к более сложному подходу к управлению ими в локальной разработке.
https://medium.com/@tony.infisical/the-death-of-the-env-file-6d65bfc6ac5e