Пришло время для еженедельного Дайджеста! Что нового за неделю с 7/29/2024 по 8/5/2024:

1. «Арендовал телефон — стал фермером»: знакомство с Mobile Farm

2. Основы тестирования React-приложений через Cypress

3. Atomic CSS Deep Dive

4. (Hyper) Links About (Hyper) Links

5. git push --force and how to deal with it

6. If I Was Starting My Career Today: Thoughts After 15 Years Spent In UX Design (Part 1)

7. How to Add a Header to a curl Request

8. Collective #857

9. About Columnar storage in Manticore Search

10. Sessions and Redis for Beginners

11. 5 Basic VS Code Extensions You Must Use

12. JavaScript Currying: The Secret Sauce to Smoother, Cleaner Code

13. How to Simplify State Management With React.js Context API - A Tutorial

14. Implementing Slack Notifications in Your Next Application

15. Five Questions to Ask Yourself Before Creating a Web Project

16. What's new in Svelte: August 2024

#дайджест

Хабр

«Арендовал телефон — стал фермером»: знакомство с Mobile Farm

Привет, Хабр! На связи Саша, менеджер фермы мобильных устройств в Selectel . Чуть больше года назад я выпустил текст про наши эксперименты во время работы над продуктом, чтобы клиенты могли...

Пришло время для еженедельного Дайджеста! Что нового за неделю с 7/22/2024 по 7/29/2024:

1. [Перевод] Аутентификация в SPA приложении через OpenAM используя OAuth2/OIDC

2. WebSim AI: Бесплатный ИИ-помощник для быстрой веб-разработки – время фронтендерам напрячься

3. Зачем нужна эта библиотека Python в веб-разработке

4. Pop(over) the Balloons

5. Flying free: a tale of partitioning with canaries in PostgreSQL

6. Integrating Image-To-Text And Text-To-Speech Models (Part 1)

7. Inspirational Websites Roundup #63

8. Creating A Virtual Machine in Microsoft Azure

9. Mockree - AI Powered Job Interview Simulator

10. CodeCompass.AI: Empower Your Team with Instant Project Insights

11. The Noonification: WTF IS A TRAP? (7/28/2024)

12. How to Improve Your Workflow by 10X: 17 Essential Apps

13. CSS Positions: Real Examples to Help You Learn

14. Network++ Part 2

15. Creating Batched Notifications in a Dedicated Time Window for Better UX and Saving Notification Cost

16. 7.25.0 Released: Safari bugfixes and duplicated named capturing groups

17. Node v20.16.0 (LTS)

18. Node Sass is end-of-life

#дайджест

Хабр

Аутентификация в SPA приложении через OpenAM используя OAuth2/OIDC

Данная статья будет полезна разработчикам браузерных (SPA) приложений, которые хотят настроить аутентификацию пользователей. Для аутентификации будет использоваться OAuth2/OIDC протокол c PKCE . В...

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

Сейчас самый популярный способ определения нужной темы — это "prefers-color-scheme". При первоначальном рендере браузер определяет предпочтения пользователя по световой теме на основе настроек браузера или ОС.

Однако этот метод имеет несколько проблем:

- Вы отправляете CSS для обеих тем, это может увеличить объём CSS и, следовательно, время загрузки страницы.
- При первоначальном рендере страница может кратковременно отобразиться в режиме по умолчанию, пока загружается CSS, что ухудшает UX.

Было бы здорово, если бы сервер мог определить тему пользователя при первом же запросе HTML. Для этого существуют клиентские подсказки (Client Hints), например, "Sec-CH-Prefers-Color-Scheme".

С помощью этого заголовка браузер может отправить серверу при первоначальном запросе значение "light" или "dark", и сервер использует это, чтобы вставить в HTML нужный CSS.

Преимущества такого подхода:

- Меньший объем данных при первоначальной загрузке, что улучшает быстродействие.
- Нет эффекта мерцания при загрузке, что улучшает UX.

Однако есть одна большая проблема. Те, кто занимаются стандартизацией, решили, что клиентские подсказки могут способствовать утечке конфиденциальных данных через "цифровой отпечаток". Поэтому они НЕ разрешают отправлять эти подсказки при первоначальном запросе HTML от браузера к серверу.

Вместо этого сервер должен отправить заголовок "Accept-CH", чтобы запросить у браузера эти подсказки. Если браузер поддерживает их и пользователь не отключил их в настройках, тогда браузер согласится отправить клиентские подсказки.

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

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

Wikipedia

Client Hints

Extension to the HTTP protocol

Пришло время для еженедельного Дайджеста! Что нового за неделю с 5/20/2024 по 5/27/2024:

1. Внедряем DevSecOps в процесс разработки. Часть 2. Обзор инструментов, Commit-time Checks

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

3. Исследование: разработчики тратят более 50% своего времени на устранение неполадок, а не на инновации

4. How does your chatbot UX size up? The 5 laws of ChatRobotics

5. Switching It Up With HTML’s Latest Control

6. Perspective

7. Collective #841

8. Cybersecurity Basics: Beginner’s Guide

9. Angular Dependency Injection Simplified

10. Comparing Flask and Django for Python Web Development

11. A Practical Approach to Novel Class Discovery in Tabular Data: Appendix

12. Why You Should Choose Angular or Vue over React for Your New Web Application

13. Building a CRUD App with Node.js, PostgreSQL, and Prisma

14. Using Python to Interact with OpenAI's GPT-3.5, GPT-4, and GPT-4o APIs

15. Angular v18 is now available!

16. Node v18.20.3 (LTS)

#дайджест

Хабр

Внедряем DevSecOps в процесс разработки. Часть 2. Обзор инструментов, Commit-time Checks

Привет! На связи Олег Казаков из Spectr .  Мы продолжаем публикацию цикла статей, где делимся опытом и наработками и рассказываем, из чего состоит DevSecOps и как его внедрить в процесс...

Пришло время для еженедельного Дайджеста! Что нового за неделю с 5/13/2024 по 5/20/2024:

1. Мониторинг Supervisord: Упрощение контроля над процессами

2. [Перевод] React.js: Знакомимся с useReducer, Axios и JSON Server на примере создания инвентарного списка

3. [Перевод] 37 Советов от Senior Frontend Разработчика

4. Фронтенд-разработка: чем занимаются и сколько зарабатывают специалисты

5. Исследование: разработчики тратят более 50% своего времени на устранение неполадок, а не на инновации

6. Building A User Segmentation Matrix To Foster Cross-Org Alignment

7. How to Retrieve WiFi Password on Windows

8. Anchor Positioning and the Popover API for a JS-Free Site Menu

9. Collective #839

10. My Very First React Project: Building a FAQ Accordion Component

11. React Router

12. Full Stack Developer Roadmap: Skills, Tools, and Tips

13. Why Self-Taught Skills Are the New MBA in Today's Economy

14. What the Do-While Is ZeptoN?

15. 8 Games You Can Play Right In This Article Built With HTML, CSS, and JS

16. It's Party Time For NPM Spammers?

17. A Comprehensive Guide to Building DolphinScheduler 3.2.0 Production-Grade Cluster Deployment

18. Node v22.2.0 (Current)

#дайджест

Хабр

Мониторинг Supervisord: Упрощение контроля над процессами

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

Добро пожаловать!

Меня зовут Антон Непша, я фронтенд-лид из Сбера:

- В разработке с 2014 г.;
- Бывший фрилансер, бывший скрам-мастер;
- Вырос в Сбере до фронтенд-лида из оператора колл-центра;

Большую часть своей карьеры в Сбере разрабатывал микрофронты для веб версии СберБанк Онлайн:
- Сервисы дебетовых карт;
- Платёжные счета;
- Кошелёк на главном экране;

Сейчас занимаюсь развитием фронтенд-сообщества в своём юните.

О чём канал

О разработке, конечно.

Для новичков пишу:
- О скорости загрузки страниц;
- О том, почему пора уходить от create-react-app, и о том, насколько vite гибок;
- О самых популярных командах git и вообще о терминале;
- О семвере;
- О том, как стать фронтенд разработчиком и о том, можно ли пропускать главы в learn.javascript.ru;

Для практикующих инженеров тоже пишу:
- про Optimistic UI;
- про State of CSS 2023;
- про то, в какой версии хрома CSS Properties & Values API заработал так, как нам было обещано;
- про фильтры на React Server Components;
- про React Forget;
- про ченьджлог девятого мажора pnpm;

Кроме того, есть посты, которые зайдут и тем, и другим:
- про собеседования, собеседования и ещё раз собеседования;
- про useActionState в React;
- про INP;
- про то, как я добавил гигачат-бота в комменты на этом канале;

Кстати, ещё я:
- организовал конференцию по JavaScript, Kotlin и Swift в Школе21;
- выступал на Frontend Night By Sber;
- выступал на MoscowCSS_24;
- побывал на подкасте в гостях у Cloud ru;
- выступил на IT Talk by Sber в Казани;
- выступил на HolyJS;

Поэтому иногда пишу о выступлениях:
- О том, как я волновался на сцене и что с этим делать;
- О поиске тем для выступлений;
- Даже о шрифтах в PowerPoint;

В общем, присоединяйтесь:)

Отказываемся от SASS в пользу нативного CSS?

К началу 2024 года css не плохо так уже успел развиться. Многие уникальные возможности которые есть в sass уже есть и в нативном css. Стоит ли уже сейчас полностью отказываться от препроцессора? Возможно, но стоит по больше узнать о новых возможностях css, чтобы лучше понимать что лучше использовать для написания стилей. Наткнулся на такую статью, где как раз рассказывается о новых возможностях сиэсэс. Распишу основные моменты с примерами.

*1️⃣ Переменные*
В CSS они уже довольно давно существуют и я например не помню когда в последний раз использовал переменные из препроцессора. В использовании переменных из натива есть плюсы, как минимум возможность перезаписывать переменные с помощью js, в препроцессоре они существуют только в контексте препроцессора.

Если кто не знает, то переменные работают так:

```
:root {
--button-padding: 10px 20px;
--button-bg-color: #007bff;
--button-text-color: #ffffff;
--button-border-radius: 8px;
}

.button {
padding: var(--button-padding);
background-color: var(--button-bg-color);
color: var(--button-text-color);
border-radius: var(--button-border-radius);
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
```

2️⃣ Вложения
Одним из плюсов sass было внутреннее вложение стилей, но теперь и нативный css поддерживает такую возможность. Поддержка уже 84.7%, что не может не радовать. Для небольших стилевых решений уже достаточно нативного css.

```
.blog {
position: relative;
padding: 1rem;
background: var(--neutral-100);

}
}
```

3️⃣ Псевдокласс :is
Сокращаем код, в принимающие свойства передаем список классов.

Если мы раньше могли сделать такую запись:

header > p, main > p, footer > p { font\-size: 18px; font\-family: Verdana; }

То теперь с этим псевдоклассом будем писать так:

```

:is(header, main, footer) > p {
font-size: 18px; font-family: Verdana;
}
```

4️⃣ Псевдокласс : has()
Еще одно интересное нововведение, более точный выбор элементов для родительского класса.

Применяем стили ко всем ссылкам, которые содержат изображения:

```
a:has(img) {
/ Стили /
}

```

5️⃣ Контейнерные запросы
Одно из самых важных обновлений css, которое позволяет более точно настраивать адаптивные дизайны в зависимости от размера контейнера. Контейнеры — альтернатива медиа-запросам , которые применяют стили к элементам на основе размера области просмотра. Пока не удалось прям опробовать в полной мере, но думаю это важный пункт для изучения из новых возможностей. Больше примеров в документации по ссылке.

6️⃣ Каскадные слои @layer
С помощью каскадных слоев мы можем заменить вложеность классов обозначив свой слой. Очень полезно при создании собственных дизайн систем, больше контроля над компонентами. Углубленно про слои можно прочитать в документации.

```
@layer utilities {
.button {
padding: 0.5rem;
}

.button--lg {
padding: 0.8rem;
}
}
```

Отказываемся от SASS?

DEV Community

Goodbye SASS 👋, welcome back native CSS

Sass has established itself as a powerful preprocessor installed locally, forming the backbone of my...

Пришло время для еженедельного Дайджеста! Что нового за неделю с 3/18/2024 по 3/25/2024:

1. Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано

2. «Физика для программистов» — как физтехи применяют её в приложениях. Бросок объекта под углом к горизонту

3. Дизайн-разбор ссылок в вёрстке

4. Обзор библиотеки types-spring

5. How to make complex serverless file processing a piece of cake

6. Success At Scale: Last Chance For Pre-Sale Price

7. Creating Color Palettes with the CSS color-mix() Function

8. Collective #819

9. Fetch any Website HTML without a cors error | Free API

10. Navigating Java Mastery from Home: A Beginner's Guide to Effective Learning

11. useContext React Hook

12. Easily Handle Faults And Retries With Polly In C#

13. 4 Ways to Add Icons from Figma to Your Website

14. The Noonification: From Leadership to Lines of Code: A Team Leaders Guide (3/8/2024)

15. Introducing CricLang: The Cricket-Inspired Programming Language ?

16. How to Write Your Own Typesafe React Router in 500 Lines

17. Node v21.7.1 (Current)

18. Валидируйте это немедленно

19. className убивает ваш UI kit

20. Путь развития (Roadmap) Frontend разработчика

21. Как бесплатно выучить JavaScript и не идти в онлайн-школы

22. Почему Node.js такой популярный

23. Что ещё нового в современном CSS

24. Martian Kubernetes Kit: unboxing our toolkit's technical secrets

25. Event Calendars For Web Made Easy With These Commercial Options

26. Time to Ditch Analytics? Tracking Scripts and Web Sustainability

27. Inspirational Websites Roundup #57

28. NuShell - Ceci n'est pas une |

29. So I started writing code.....

30. Learn Full Stack Developer Course Online - Master Frontend and Backend Development

31. OperationQueue + Asynchronous Code: Everything You Need to Know

32. Four Types of Array Data-Based Bar Charts in Python

33. Unlocking HTML's Hidden Powers

34. How to Master Authentication and User Flow in Node.js With Knex and Redis

35. Code Smell 243 - Concatenated Properties

36. The Noonification: Data Science: The Cental Limit Theorem Explained (3/11/2024)

37. [Перевод] Как я выиграл Хакатон, едва не потеряв рассудок

38. Путь развития Frontend разработчика (Вторая часть)

39. Пишем асинхронный парсер и скрапер картинок на Python с графическим интерфейсом

40. Как начать карьеру веб-разработчика

41. Проверьте себя: что умеет JavaScript

42. Accessible Forms with Pseudo Classes

43. Why should developers write? 3 reasons and 3 common blocks

44. Crafting Experiences: Uniting Rikyu’s Wisdom With Brand Experience Principles

45. I’m So Old: Web Edition

1. Collective #823

2. Ask AI Anything with Walles.AI’s Natural Language Processing Magic!

3. Shared Workers for WebSockets

4. Shrouded Horizons: My Passage to the Dark Web Marketplaces

5. C#: From Fundamentals to Advanced Techniques - A Beginner-Friendly CheatSheet

6. How to Test Multiple Variations of Generative AI Prompts

7. .NET 9: LINQ Enhancements: A Detailed Introduction

8. Integrating React Bricks With an External API

9. Angular with NativeScript: Creating the Blackout Lighting Console

#дайджест

Хабр

Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано

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

Использовать PixelCode в IDE, мнения? Ради эксперимента решил попробовать такой шрифт в VSCode, вроде как уже подпривык, но думаю еще поюзаю.

Заценить самим можно здесь: https://github.com/qwerasd205/PixelCode

Пришло время для еженедельного Дайджеста! Что нового за неделю с 3/11/2024 по 3/18/2024:

1. Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано

2. «Физика для программистов» — как физтехи применяют её в приложениях. Бросок объекта под углом к горизонту

3. Дизайн-разбор ссылок в вёрстке

4. Обзор библиотеки types-spring

5. How to make complex serverless file processing a piece of cake

6. Success At Scale: Last Chance For Pre-Sale Price

7. Creating Color Palettes with the CSS color-mix() Function

8. Collective #819

9. Fetch any Website HTML without a cors error | Free API

10. Navigating Java Mastery from Home: A Beginner's Guide to Effective Learning

11. useContext React Hook

12. Easily Handle Faults And Retries With Polly In C#

13. 4 Ways to Add Icons from Figma to Your Website

14. The Noonification: From Leadership to Lines of Code: A Team Leaders Guide (3/8/2024)

15. Introducing CricLang: The Cricket-Inspired Programming Language ?

16. How to Write Your Own Typesafe React Router in 500 Lines

17. Node v21.7.1 (Current)

18. Валидируйте это немедленно

19. className убивает ваш UI kit

20. Путь развития (Roadmap) Frontend разработчика

21. Как бесплатно выучить JavaScript и не идти в онлайн-школы

22. Почему Node.js такой популярный

23. Что ещё нового в современном CSS

24. Martian Kubernetes Kit: unboxing our toolkit's technical secrets

25. Event Calendars For Web Made Easy With These Commercial Options

26. Time to Ditch Analytics? Tracking Scripts and Web Sustainability

27. Inspirational Websites Roundup #57

28. NuShell - Ceci n'est pas une |

29. So I started writing code.....

30. Learn Full Stack Developer Course Online - Master Frontend and Backend Development

31. OperationQueue + Asynchronous Code: Everything You Need to Know

32. Four Types of Array Data-Based Bar Charts in Python

33. Unlocking HTML's Hidden Powers

34. How to Master Authentication and User Flow in Node.js With Knex and Redis

35. Code Smell 243 - Concatenated Properties

36. The Noonification: Data Science: The Cental Limit Theorem Explained (3/11/2024)

#дайджест

Хабр

Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано

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