Про Frontend каждый день | NOTA
Канал
18
подписчиков
Ежедневный дайджест самых интересных статей про Frontend и веб-разработку.
По всем вопросам: @nota_admin
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Пандус для сайта
Иван Бакаидов делится докладом о доступности современного веба для людей с особенностями здоровья, указывая на недостаточное внимание разработчиков к этой проблеме. В докладе обсуждаются различные ограничения, влияющие на использование сайтов (дислексия, моторика, слух и зрение), а также предлагаются решения для улучшения доступности, включая правильное использование атрибута alt, HTML5 и поддержку screenreaders.
https://habr.com/ru/articles/346238
————————————————————
2. Grouping Tasks with Tabs
В учебнике объясняется, как использовать Vuetify и Vue.js для создания приложения списка задач. Автор показывает, как с помощью компонента вкладок можно группировать задачи по определенным критериям, таким как "Все", "Сегодня" и "Важное". В статье детально описывается процесс создания вкладок, добавление иконок и фиксация вкладок, а также отображение разных списков задач в каждом компоненте v-tab-item.
https://javascript.plainenglish.io/grouping-tasks-tabs-vuetify-to-do-list-app-tutorial-e52633c13e67
————————————————————
3. Several Ways to Use Async Pipes in Angular
Статья рассматривает использование асинхронных трубок (async pipes) в Angular и преимущества перед подписками (subscribes). Автор объясняет основы асинхронных трубок, их использование в различных сценариях и предоставляет примеры. Обсуждается использование ng-container и *ngIf для более чистого кода, оператора CombineLatest для объединения нескольких потоков данных и преимущества async pipes для производительности и управления подписками.
https://medium.com/front-end-weekly/several-ways-to-use-async-pipes-in-angular-fb0d080e8e12
————————————————————
Теги:
#devblog #vuejs #angular
1. Пандус для сайта
Иван Бакаидов делится докладом о доступности современного веба для людей с особенностями здоровья, указывая на недостаточное внимание разработчиков к этой проблеме. В докладе обсуждаются различные ограничения, влияющие на использование сайтов (дислексия, моторика, слух и зрение), а также предлагаются решения для улучшения доступности, включая правильное использование атрибута alt, HTML5 и поддержку screenreaders.
https://habr.com/ru/articles/346238
————————————————————
2. Grouping Tasks with Tabs
В учебнике объясняется, как использовать Vuetify и Vue.js для создания приложения списка задач. Автор показывает, как с помощью компонента вкладок можно группировать задачи по определенным критериям, таким как "Все", "Сегодня" и "Важное". В статье детально описывается процесс создания вкладок, добавление иконок и фиксация вкладок, а также отображение разных списков задач в каждом компоненте v-tab-item.
https://javascript.plainenglish.io/grouping-tasks-tabs-vuetify-to-do-list-app-tutorial-e52633c13e67
————————————————————
3. Several Ways to Use Async Pipes in Angular
Статья рассматривает использование асинхронных трубок (async pipes) в Angular и преимущества перед подписками (subscribes). Автор объясняет основы асинхронных трубок, их использование в различных сценариях и предоставляет примеры. Обсуждается использование ng-container и *ngIf для более чистого кода, оператора CombineLatest для объединения нескольких потоков данных и преимущества async pipes для производительности и управления подписками.
https://medium.com/front-end-weekly/several-ways-to-use-async-pipes-in-angular-fb0d080e8e12
————————————————————
Теги:
#devblog #vuejs #angular
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Пишем JavaScript, не забывая о доступности
Статья затрагивает важность создания доступного JavaScript-кода, предлагая советы по улучшению доступности веб-компонентов. Рассматриваются методы управления фокусом, использование атрибутов tabindex и ARIA для поддержки пользователей с ограниченными возможностями. Автор обсуждает навигацию с клавиатуры, доступность модальных окон и интерактивных элементов, подчеркивая, что JavaScript может улучшить, а не ухудшить доступность сайтов.
https://abatickaya.medium.com/writing-javascript-with-accessibility-in-mind-84e94d927f3e
————————————————————
2. Different ways to remove an element from an array
В этой статье автор рассказывает о различных способах удаления элементов из массивов в JavaScript. Обсуждаются такие методы, как pop(), shift(), splice() и filter(). Приводятся примеры использования каждого метода, включая удаление последнего элемента, первого элемента, конкретного элемента и удаление элементов, соответствующих определенным условиям. Также подробно рассматривается процесс удаления объектов из массива JSON.
https://medium.com/@ak.gupta/different-ways-to-remove-an-element-from-an-array-9a20cc9004e4
————————————————————
3. Building Next-Level APIs with GraphQL: Efficiency, Flexibility, and Scalability
Статья обсуждает преимущества GraphQL перед традиционными REST API, подчеркивая его эффективность, гибкость и масштабируемость. Описываются основы GraphQL, включая схему, резолверы, запросы и мутации, а также реализация GraphQL на сервере. Автор рассматривает вызовы, связанные с GraphQL, включая кэширование, безопасность и время отклика, и обсуждает лучшие практики работы с GraphQL, предлагая руководство по созданию API с помощью Apollo Server.
https://medium.com/@Bhupi2508/building-next-level-apis-with-graphql-efficiency-flexibility-and-scalability-91b0a00321f
————————————————————
Теги:
#javascript #api #graphql
1. Пишем JavaScript, не забывая о доступности
Статья затрагивает важность создания доступного JavaScript-кода, предлагая советы по улучшению доступности веб-компонентов. Рассматриваются методы управления фокусом, использование атрибутов tabindex и ARIA для поддержки пользователей с ограниченными возможностями. Автор обсуждает навигацию с клавиатуры, доступность модальных окон и интерактивных элементов, подчеркивая, что JavaScript может улучшить, а не ухудшить доступность сайтов.
https://abatickaya.medium.com/writing-javascript-with-accessibility-in-mind-84e94d927f3e
————————————————————
2. Different ways to remove an element from an array
В этой статье автор рассказывает о различных способах удаления элементов из массивов в JavaScript. Обсуждаются такие методы, как pop(), shift(), splice() и filter(). Приводятся примеры использования каждого метода, включая удаление последнего элемента, первого элемента, конкретного элемента и удаление элементов, соответствующих определенным условиям. Также подробно рассматривается процесс удаления объектов из массива JSON.
https://medium.com/@ak.gupta/different-ways-to-remove-an-element-from-an-array-9a20cc9004e4
————————————————————
3. Building Next-Level APIs with GraphQL: Efficiency, Flexibility, and Scalability
Статья обсуждает преимущества GraphQL перед традиционными REST API, подчеркивая его эффективность, гибкость и масштабируемость. Описываются основы GraphQL, включая схему, резолверы, запросы и мутации, а также реализация GraphQL на сервере. Автор рассматривает вызовы, связанные с GraphQL, включая кэширование, безопасность и время отклика, и обсуждает лучшие практики работы с GraphQL, предлагая руководство по созданию API с помощью Apollo Server.
https://medium.com/@Bhupi2508/building-next-level-apis-with-graphql-efficiency-flexibility-and-scalability-91b0a00321f
————————————————————
Теги:
#javascript #api #graphql
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Теория категорий для программистов. На пальцах
Статья демистифицирует теорию категорий, делая её понятной для программистов. Разъясняется, что такое категории, морфизмы и как они связаны с функциональным программированием. Автор объясняет базовые концепции на примерах из Scala и затрагивает темы магм, моноидов, функторов и монад, подчеркивая их применимость в коде. Статья предназначена для новичков в функциональном программировании и тех, кто хочет углубиться в теоретическую математику.
https://habr.com/ru/articles/521120
————————————————————
2. Iterators and Iterables in Javascript.
Эта статья объясняет ключевые концепции итераторов и итерируемых объектов в JavaScript, их различия и взаимосвязь. Автор детально рассматривает, как создать пользовательский итератор и итерируемый объект, а также преимущества использования Symbol.iterator. Приводятся примеры кода, демонстрирующие их работу и важность для управления коллекциями и итераций. Также затрагиваются темы генераторов и их будущее изучение.
https://medium.com/@adityakashyap_36551/iterators-and-iterables-in-javascript-44eb007e498
————————————————————
3. React and Bootstrap 4 —Setup & Navigation
Статья рассказывает о создании React-приложения с использованием Bootstrap для создания навигационной панели. Автор делится опытом интеграции CSS и JS частей Bootstrap с принципами React, предлагает решение через создание собственных компонентов. Руководство включает шаги по настройке React-приложения, добавлению Bootstrap, созданию компонентов навигации и управлению состоянием с помощью React. Полезно для разработчиков, желающих сочетать эти два фреймворка.
https://medium.com/paul-ardeleanu/react-and-bootstrap-4-part-1-setup-navigation-d4767e2ed9f0
————————————————————
Теги:
#algorithms #javascript #react #html_css
1. Теория категорий для программистов. На пальцах
Статья демистифицирует теорию категорий, делая её понятной для программистов. Разъясняется, что такое категории, морфизмы и как они связаны с функциональным программированием. Автор объясняет базовые концепции на примерах из Scala и затрагивает темы магм, моноидов, функторов и монад, подчеркивая их применимость в коде. Статья предназначена для новичков в функциональном программировании и тех, кто хочет углубиться в теоретическую математику.
https://habr.com/ru/articles/521120
————————————————————
2. Iterators and Iterables in Javascript.
Эта статья объясняет ключевые концепции итераторов и итерируемых объектов в JavaScript, их различия и взаимосвязь. Автор детально рассматривает, как создать пользовательский итератор и итерируемый объект, а также преимущества использования Symbol.iterator. Приводятся примеры кода, демонстрирующие их работу и важность для управления коллекциями и итераций. Также затрагиваются темы генераторов и их будущее изучение.
https://medium.com/@adityakashyap_36551/iterators-and-iterables-in-javascript-44eb007e498
————————————————————
3. React and Bootstrap 4 —Setup & Navigation
Статья рассказывает о создании React-приложения с использованием Bootstrap для создания навигационной панели. Автор делится опытом интеграции CSS и JS частей Bootstrap с принципами React, предлагает решение через создание собственных компонентов. Руководство включает шаги по настройке React-приложения, добавлению Bootstrap, созданию компонентов навигации и управлению состоянием с помощью React. Полезно для разработчиков, желающих сочетать эти два фреймворка.
https://medium.com/paul-ardeleanu/react-and-bootstrap-4-part-1-setup-navigation-d4767e2ed9f0
————————————————————
Теги:
#algorithms #javascript #react #html_css
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Веб ожирел не по незнанию
Статья анализирует проблему "ожирения" веба из-за избыточного и ненужного кода. Автор рассматривает, почему веб-страницы стали тяжелее (средний размер превысил 2.4 МБ), и указывает на отсутствие реальных страданий разработчиков от проблем пользователей. Предлагаются решения для улучшения производительности и качества кода, а также критика современных бизнес-моделей, способствующих "ожирению" веба.
https://abatickaya.medium.com/%D0%B2%D0%B5%D0%B1-%D0%BE%D0%B6%D0%B8%D1%80%D0%B5%D0%BB-%D0%BD%D0%B5-%D0%BF%D0%BE-%D0%BD%D0%B5%D0%B7%D0%BD%D0%B0%D0%BD%D0%B8%D1%8E-beb7233e9d7f
————————————————————
2. Hot React Testing Practices II. Every idea starts off small and grows…
Блэйн Кастен делится своими мыслями об эволюции практик тестирования React. Он рассказывает о важности разделения бизнес-логики и компонентов UI/UX, а также о преимуществах использования чистых функций для упрощения тестирования. Автор подчеркивает пользу подхода Facebook к разработке, когда бизнес-логика выносится за пределы компонентов, что упрощает тестирование и улучшает архитектуру кода.
https://medium.com/@blainekasten/hot-react-testing-practices-ii-1dfe9445bf21
————————————————————
3. Learn CSS transform animation
Статья служит руководством по использованию CSS свойства transform для анимации элементов на веб-страницах. Автор описывает функции translate, scale, rotate и skew, демонстрируя, как они могут менять положение, размер и форму элементов. Также рассматривается свойство transform-origin, определяющее точку, относительно которой выполняется трансформация. Подробные примеры кода и советы помогают читателям понять, как создавать динамичные и интерактивные анимации для своих проектов.
https://medium.com/swlh/learn-css-transform-animation-zero-to-hero-6a2a643bd56b
————————————————————
Теги:
#devblog #react #qa #html_css
1. Веб ожирел не по незнанию
Статья анализирует проблему "ожирения" веба из-за избыточного и ненужного кода. Автор рассматривает, почему веб-страницы стали тяжелее (средний размер превысил 2.4 МБ), и указывает на отсутствие реальных страданий разработчиков от проблем пользователей. Предлагаются решения для улучшения производительности и качества кода, а также критика современных бизнес-моделей, способствующих "ожирению" веба.
https://abatickaya.medium.com/%D0%B2%D0%B5%D0%B1-%D0%BE%D0%B6%D0%B8%D1%80%D0%B5%D0%BB-%D0%BD%D0%B5-%D0%BF%D0%BE-%D0%BD%D0%B5%D0%B7%D0%BD%D0%B0%D0%BD%D0%B8%D1%8E-beb7233e9d7f
————————————————————
2. Hot React Testing Practices II. Every idea starts off small and grows…
Блэйн Кастен делится своими мыслями об эволюции практик тестирования React. Он рассказывает о важности разделения бизнес-логики и компонентов UI/UX, а также о преимуществах использования чистых функций для упрощения тестирования. Автор подчеркивает пользу подхода Facebook к разработке, когда бизнес-логика выносится за пределы компонентов, что упрощает тестирование и улучшает архитектуру кода.
https://medium.com/@blainekasten/hot-react-testing-practices-ii-1dfe9445bf21
————————————————————
3. Learn CSS transform animation
Статья служит руководством по использованию CSS свойства transform для анимации элементов на веб-страницах. Автор описывает функции translate, scale, rotate и skew, демонстрируя, как они могут менять положение, размер и форму элементов. Также рассматривается свойство transform-origin, определяющее точку, относительно которой выполняется трансформация. Подробные примеры кода и советы помогают читателям понять, как создавать динамичные и интерактивные анимации для своих проектов.
https://medium.com/swlh/learn-css-transform-animation-zero-to-hero-6a2a643bd56b
————————————————————
Теги:
#devblog #react #qa #html_css
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Руководство по JavaScript, часть 6: исключения, точка с запятой, шаблонные литералы
Шестая часть руководства по JavaScript охватывает темы обработки исключений, особенностей использования точек с запятой и шаблонных литералов. Автор объясняет механизмы try...catch...finally для управления ошибками, рассматривает правила и особенности автоматической вставки точек с запятой (ASI) в JavaScript, а также демонстрирует возможности шаблонных литералов ES6 для упрощения работы со строками и внедрения выражений.
https://habr.com/ru/articles/430376
————————————————————
2. Simplest checkbox in Vue.JS. Every time I need to use a checkbox…
Автор делится простейшим способом создания настраиваемого и многоразового компонента флажка (checkbox) для Vue.js. В статье демонстрируется создание Checkbox.vue, простота его импорта и использования с директивой v-model. Подходит для тех, кто хочет сэкономить время и избежать повторения одинаковых действий при стилизации элементов формы в проектах Vue.js.
https://medium.com/@maximkehayov/simplest-custom-checkbox-component-for-vue-js-5d073a46744d
————————————————————
3. Backend Developer Roadmap. If you’re thinking about becoming a web…
Статья описывает пошаговый путь становления бэкенд-разработчиком, начиная с основ интернета, клиентских технологий (HTML, CSS, JavaScript) и операционных систем, до изучения языков программирования, систем контроля версий, фреймворков, баз данных, API, безопасности и контейнеризации. Подробное руководство для тех, кто стремится к карьере в серверной разработке и желает узнать о необходимых навыках и инструментах.
https://medium.com/codex/backend-developer-roadmap-e61ce30ab10d
————————————————————
Теги:
#javascript #vuejs #backend #career
1. Руководство по JavaScript, часть 6: исключения, точка с запятой, шаблонные литералы
Шестая часть руководства по JavaScript охватывает темы обработки исключений, особенностей использования точек с запятой и шаблонных литералов. Автор объясняет механизмы try...catch...finally для управления ошибками, рассматривает правила и особенности автоматической вставки точек с запятой (ASI) в JavaScript, а также демонстрирует возможности шаблонных литералов ES6 для упрощения работы со строками и внедрения выражений.
https://habr.com/ru/articles/430376
————————————————————
2. Simplest checkbox in Vue.JS. Every time I need to use a checkbox…
Автор делится простейшим способом создания настраиваемого и многоразового компонента флажка (checkbox) для Vue.js. В статье демонстрируется создание Checkbox.vue, простота его импорта и использования с директивой v-model. Подходит для тех, кто хочет сэкономить время и избежать повторения одинаковых действий при стилизации элементов формы в проектах Vue.js.
https://medium.com/@maximkehayov/simplest-custom-checkbox-component-for-vue-js-5d073a46744d
————————————————————
3. Backend Developer Roadmap. If you’re thinking about becoming a web…
Статья описывает пошаговый путь становления бэкенд-разработчиком, начиная с основ интернета, клиентских технологий (HTML, CSS, JavaScript) и операционных систем, до изучения языков программирования, систем контроля версий, фреймворков, баз данных, API, безопасности и контейнеризации. Подробное руководство для тех, кто стремится к карьере в серверной разработке и желает узнать о необходимых навыках и инструментах.
https://medium.com/codex/backend-developer-roadmap-e61ce30ab10d
————————————————————
Теги:
#javascript #vuejs #backend #career
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Как я делал IAM на готовых решениях
Автор делится опытом создания IAM (Identity and Access Management) для легаси проекта, используя готовые решения. Рассказывается о проблемах проекта, таких как высокая стоимость поддержки и плохая инженерная культура. Решение было найдено в использовании AWS, строгом следовании инженерной культуре и принципах разработки. Автор описывает выбор между различными инструментами и платформами IAM, такими как Okta, Auth0, Keycloak и Ory, и объясняет причины выбора Ory Kratos и Ory Keto. Описывается процесс интеграции IAM в проект на Flask.
https://medium.com/@gen1us2k/%D0%BA%D0%B0%D0%BA-%D1%8F-%D0%B4%D0%B5%D0%BB%D0%B0%D0%BB-iam-%D0%BD%D0%B0-%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D1%8B%D1%85-%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D1%8F%D1%85-cb131370fa8e
————————————————————
2. Borrowing for Design — from the Coder.
Автор размышляет о том, как программирование влияет на процесс дизайна и стратегического мышления. Он делится уроками, извлеченными из кодирования: важность понимания языка целевой аудитории, принцип "Keep it Simple Stupid" и внимание к деталям. Программирование научило автора простоте, стратегическому подходу и системному мышлению в дизайне.
https://medium.com/@soukarni.barai/borrowing-for-design-from-the-coder-a515a09d5b95
————————————————————
3. Ultimate Package of CSS Code Generators for Web Development.😎
Статья представляет подборку инструментов для генерации CSS кода, которые упростят и ускорят веб-разработку. Описываются различные генераторы CSS эффектов, такие как градиенты, тени, кнопки и анимации. Автор делится ссылками на инструменты вроде "CSS 3.0 Maker", "CSSmatic", "CSS Grid Generator" и многие другие, которые помогут создавать сложные дизайны, экономя время и усилия разработчиков.
https://medium.com/@vdas53073/ultimate-package-of-css-code-generators-for-web-development-78a767960086
————————————————————
Теги:
#devblog #uiux #html_css
1. Как я делал IAM на готовых решениях
Автор делится опытом создания IAM (Identity and Access Management) для легаси проекта, используя готовые решения. Рассказывается о проблемах проекта, таких как высокая стоимость поддержки и плохая инженерная культура. Решение было найдено в использовании AWS, строгом следовании инженерной культуре и принципах разработки. Автор описывает выбор между различными инструментами и платформами IAM, такими как Okta, Auth0, Keycloak и Ory, и объясняет причины выбора Ory Kratos и Ory Keto. Описывается процесс интеграции IAM в проект на Flask.
https://medium.com/@gen1us2k/%D0%BA%D0%B0%D0%BA-%D1%8F-%D0%B4%D0%B5%D0%BB%D0%B0%D0%BB-iam-%D0%BD%D0%B0-%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D1%8B%D1%85-%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D1%8F%D1%85-cb131370fa8e
————————————————————
2. Borrowing for Design — from the Coder.
Автор размышляет о том, как программирование влияет на процесс дизайна и стратегического мышления. Он делится уроками, извлеченными из кодирования: важность понимания языка целевой аудитории, принцип "Keep it Simple Stupid" и внимание к деталям. Программирование научило автора простоте, стратегическому подходу и системному мышлению в дизайне.
https://medium.com/@soukarni.barai/borrowing-for-design-from-the-coder-a515a09d5b95
————————————————————
3. Ultimate Package of CSS Code Generators for Web Development.😎
Статья представляет подборку инструментов для генерации CSS кода, которые упростят и ускорят веб-разработку. Описываются различные генераторы CSS эффектов, такие как градиенты, тени, кнопки и анимации. Автор делится ссылками на инструменты вроде "CSS 3.0 Maker", "CSSmatic", "CSS Grid Generator" и многие другие, которые помогут создавать сложные дизайны, экономя время и усилия разработчиков.
https://medium.com/@vdas53073/ultimate-package-of-css-code-generators-for-web-development-78a767960086
————————————————————
Теги:
#devblog #uiux #html_css
Что почитать сегодня – NOTA Frontend Daily Digest.
1. «Никто не говорит другим, что им нужно делать»: Nicolò Ribaudo о разработке Babel и многом другом
Интервью с Nicolò Ribaudo, ключевым разработчиком Babel и приглашённым экспертом TC39. Рассказывает о своём пути в open source, работе над Babel, учёбе и балансе между ними. Обсуждает проблемы финансирования open source проектов, свои амбиции и взгляды на участие в сообществе TC39. Поднимает вопросы о роли высшего образования для разработчиков и своём отношении к математике в контексте программирования.
https://habr.com/ru/articles/474722
————————————————————
2. Reactive Programming is not a Trend: Why the Time to Adopt is Now
Статья утверждает, что реактивное программирование – не просто модное направление, а важный подход, который следует принимать прямо сейчас. Описываются его преимущества, в том числе эффективность, упрощение разработки и скорость реализации сложных фич. Приводится аргументация, почему реактивное программирование стало стандартом среди лидеров индустрии и как оно влияет на производительность команд разработчиков. Обсуждается роль RxJS и Observable в контексте современного веб-разработки, а также перспективы включения Observable в стандарт JavaScript.
https://news.thisdot.co/reactive-programming-is-not-a-trend-why-the-time-to-adopt-is-now-b3954ea44aa3
————————————————————
3. Documenting Software Architecture in Code Repository
В статье обсуждается использование markdown для документирования архитектуры программного обеспечения прямо в репозитории кода. Подробно описывается, как управлять дизайном и решениями по архитектуре вместе с кодом, предоставляя удобство и видимость системы для новых инженеров. Рассматриваются инструменты, такие как PlantUML для визуализации UML и C4 диаграмм, и шаблон Arc 42 для ключевых архитектурных решений.
https://medium.com/software-architecture-foundations/documenting-software-architecture-in-code-repository-74716412b0a2
————————————————————
Теги:
#devblog #javascript #architecture
1. «Никто не говорит другим, что им нужно делать»: Nicolò Ribaudo о разработке Babel и многом другом
Интервью с Nicolò Ribaudo, ключевым разработчиком Babel и приглашённым экспертом TC39. Рассказывает о своём пути в open source, работе над Babel, учёбе и балансе между ними. Обсуждает проблемы финансирования open source проектов, свои амбиции и взгляды на участие в сообществе TC39. Поднимает вопросы о роли высшего образования для разработчиков и своём отношении к математике в контексте программирования.
https://habr.com/ru/articles/474722
————————————————————
2. Reactive Programming is not a Trend: Why the Time to Adopt is Now
Статья утверждает, что реактивное программирование – не просто модное направление, а важный подход, который следует принимать прямо сейчас. Описываются его преимущества, в том числе эффективность, упрощение разработки и скорость реализации сложных фич. Приводится аргументация, почему реактивное программирование стало стандартом среди лидеров индустрии и как оно влияет на производительность команд разработчиков. Обсуждается роль RxJS и Observable в контексте современного веб-разработки, а также перспективы включения Observable в стандарт JavaScript.
https://news.thisdot.co/reactive-programming-is-not-a-trend-why-the-time-to-adopt-is-now-b3954ea44aa3
————————————————————
3. Documenting Software Architecture in Code Repository
В статье обсуждается использование markdown для документирования архитектуры программного обеспечения прямо в репозитории кода. Подробно описывается, как управлять дизайном и решениями по архитектуре вместе с кодом, предоставляя удобство и видимость системы для новых инженеров. Рассматриваются инструменты, такие как PlantUML для визуализации UML и C4 диаграмм, и шаблон Arc 42 для ключевых архитектурных решений.
https://medium.com/software-architecture-foundations/documenting-software-architecture-in-code-repository-74716412b0a2
————————————————————
Теги:
#devblog #javascript #architecture
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Рецепты Nginx: CAS (сервис центральной авторизации)
В статье представлены инструкции по настройке сервиса центральной авторизации с использованием Nginx и его плагинов. Объясняется процесс генерации и проверки токенов, настройка сервера авторизации и клиентской части. Автор подробно разбирает каждый шаг конфигурирования, от создания запросов на проверку токена до обработки ошибок авторизации. Предоставленные примеры конфигураций и советы помогут в реализации безопасной системы авторизации на вашем сервере.
https://habr.com/ru/articles/456634/
————————————————————
2. Signals Sub-RFC 3 — New Angular Reactive Approach or a Path to Confusion?
Статья обсуждает новый подход к реактивным компонентам в Angular с использованием API Сигналов и вызывает опасения по поводу его потенциальных преимуществ и последствий для разработчиков. Рассматриваются три варианта интеграции API Сигналов, их совместимость со старыми и новыми API, а также критические размышления о возможных рисках и выгодах. Авторы обращают внимание на необходимость создания устойчивой и постоянно обновляющейся платформы, избегая при этом ненужной путаницы в существующей экосистеме.
https://blog.bitsrc.io/signals-sub-rfc-3-new-angular-reactive-approach-or-a-path-to-confusion-7d428ae57fc6
————————————————————
3. Innovative Custom Software Development Ideas in 2021 — A Stepping Stone for Start-Up Success
Статья освещает ряд инновационных идей для разработки заказного программного обеспечения, которые могут служить основой для успеха стартапов. Рассматриваются тенденции рынка и акцентируется внимание на необходимости адаптации к специфическим требованиям бизнеса. Предлагаются идеи для мобильных и веб-приложений, социальных сетей и электронной коммерции, а также обсуждаются преимущества индивидуальной разработки ПО, включая инвестиционную привлекательность, продуктивность, безопасность и масштабирование. Автор подчеркивает, что кастомизация программного обеспечения помогает достичь бизнес-целей и улучшить обслуживание клиентов.
https://medium.com/geekculture/innovative-custom-software-development-ideas-in-2021-a-stepping-stone-for-start-up-success-bafdecbe84ff
————————————————————
Теги:
#backend #angular #career
1. Рецепты Nginx: CAS (сервис центральной авторизации)
В статье представлены инструкции по настройке сервиса центральной авторизации с использованием Nginx и его плагинов. Объясняется процесс генерации и проверки токенов, настройка сервера авторизации и клиентской части. Автор подробно разбирает каждый шаг конфигурирования, от создания запросов на проверку токена до обработки ошибок авторизации. Предоставленные примеры конфигураций и советы помогут в реализации безопасной системы авторизации на вашем сервере.
https://habr.com/ru/articles/456634/
————————————————————
2. Signals Sub-RFC 3 — New Angular Reactive Approach or a Path to Confusion?
Статья обсуждает новый подход к реактивным компонентам в Angular с использованием API Сигналов и вызывает опасения по поводу его потенциальных преимуществ и последствий для разработчиков. Рассматриваются три варианта интеграции API Сигналов, их совместимость со старыми и новыми API, а также критические размышления о возможных рисках и выгодах. Авторы обращают внимание на необходимость создания устойчивой и постоянно обновляющейся платформы, избегая при этом ненужной путаницы в существующей экосистеме.
https://blog.bitsrc.io/signals-sub-rfc-3-new-angular-reactive-approach-or-a-path-to-confusion-7d428ae57fc6
————————————————————
3. Innovative Custom Software Development Ideas in 2021 — A Stepping Stone for Start-Up Success
Статья освещает ряд инновационных идей для разработки заказного программного обеспечения, которые могут служить основой для успеха стартапов. Рассматриваются тенденции рынка и акцентируется внимание на необходимости адаптации к специфическим требованиям бизнеса. Предлагаются идеи для мобильных и веб-приложений, социальных сетей и электронной коммерции, а также обсуждаются преимущества индивидуальной разработки ПО, включая инвестиционную привлекательность, продуктивность, безопасность и масштабирование. Автор подчеркивает, что кастомизация программного обеспечения помогает достичь бизнес-целей и улучшить обслуживание клиентов.
https://medium.com/geekculture/innovative-custom-software-development-ideas-in-2021-a-stepping-stone-for-start-up-success-bafdecbe84ff
————————————————————
Теги:
#backend #angular #career
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Алгоритм преобразования НКА в эквивалентный ДКА
Статья посвящена алгоритму преобразования недетерминированного конечного автомата (НКА) в детерминированный конечный автомат (ДКА). Автор объясняет теорию конечных автоматов, принципы работы алгоритма Томпсона и его применение для преобразования. В статье подробно разбираются понятия ε-замыкания, операции перехода и создания эффективного ДКА из НКА. Иллюстрируются шаги алгоритма примерами и псевдокодом, что делает материал доступным для понимания.
https://habr.com/ru/articles/671742/
————————————————————
2. General Troubleshooting and Getting Started with React on Rails
Автор делится советами о том, как повысить продуктивность при использовании React on Rails. Рекомендации включают использование простейших решений, чтение сообщений об ошибках и пошаговое добавление компонентов. Статья подчеркивает важность понимания простых примеров перед переходом к сложным, а также рекомендует избегать серверного рендеринга и горячей перезагрузки на начальных этапах. Автор также объясняет, как убедиться в совместимости версий программного обеспечения и как проверять ошибки в логах.
https://blog.shakacode.com/general-troubleshooting-and-getting-started-with-react-on-rails-e4b47da4efca
————————————————————
3. How to become a Frontend Developer in 2023
Статья представляет подробное руководство по становлению фронтенд-разработчиком в 2023 году. Охватываются основы HTML, CSS и JavaScript, ресурсы для обучения, важность освоения CSS и JavaScript, принципы веб-дизайна и практический опыт через проекты. Автор обсуждает методы обучения, инструменты и библиотеки, а также подчеркивает необходимость постоянного обновления знаний в соответствии с последними тенденциями фронтенд-разработки.
https://medium.com/@BlainBrawn/how-to-become-frontend-developer-in-2023-53c3ca03f30e
————————————————————
Теги:
#algorithms #react #career
1. Алгоритм преобразования НКА в эквивалентный ДКА
Статья посвящена алгоритму преобразования недетерминированного конечного автомата (НКА) в детерминированный конечный автомат (ДКА). Автор объясняет теорию конечных автоматов, принципы работы алгоритма Томпсона и его применение для преобразования. В статье подробно разбираются понятия ε-замыкания, операции перехода и создания эффективного ДКА из НКА. Иллюстрируются шаги алгоритма примерами и псевдокодом, что делает материал доступным для понимания.
https://habr.com/ru/articles/671742/
————————————————————
2. General Troubleshooting and Getting Started with React on Rails
Автор делится советами о том, как повысить продуктивность при использовании React on Rails. Рекомендации включают использование простейших решений, чтение сообщений об ошибках и пошаговое добавление компонентов. Статья подчеркивает важность понимания простых примеров перед переходом к сложным, а также рекомендует избегать серверного рендеринга и горячей перезагрузки на начальных этапах. Автор также объясняет, как убедиться в совместимости версий программного обеспечения и как проверять ошибки в логах.
https://blog.shakacode.com/general-troubleshooting-and-getting-started-with-react-on-rails-e4b47da4efca
————————————————————
3. How to become a Frontend Developer in 2023
Статья представляет подробное руководство по становлению фронтенд-разработчиком в 2023 году. Охватываются основы HTML, CSS и JavaScript, ресурсы для обучения, важность освоения CSS и JavaScript, принципы веб-дизайна и практический опыт через проекты. Автор обсуждает методы обучения, инструменты и библиотеки, а также подчеркивает необходимость постоянного обновления знаний в соответствии с последними тенденциями фронтенд-разработки.
https://medium.com/@BlainBrawn/how-to-become-frontend-developer-in-2023-53c3ca03f30e
————————————————————
Теги:
#algorithms #react #career
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Мои правила дизайна хорошего интерфейса
Автор делится личными принципами проектирования эффективного интерфейса, подчеркивая важность акцентов, пропорциональности отступов и смысловой нагрузки элементов. Статья охватывает аспекты, такие как значимость текста над иконками, целесообразность дизайна и взаимосвязи расположения элементов. Автор призывает к созданию функциональных, а не перегруженных интерфейсов, с фокусом на пользовательский опыт.
https://habr.com/ru/articles/277399/
————————————————————
2. Breakdown: AngularJS Custom Directives
Статья объясняет использование кастомных директив в AngularJS и описывает основы их создания. Автор разбирает шаблоны, ограничения (restrict), контроллеры и другие свойства, необходимые для определения директив. Приводится пример базовой директивы и обсуждаются практические аспекты, такие как изоляция области видимости (scope) и использование 'controllerAs'. Статья призвана помочь новичкам в освоении механизма директив для улучшения структуры и поведения AngularJS приложений.
https://medium.com/joelachance/breakdown-angularjs-custom-directives-4a041a25b6d3
————————————————————
3. How to rock our technical interview
Антон Яценюк, Frontend Competence Manager в компании Rolique, делится советами по подготовке к техническому собеседованию. Он рассказывает о процессе интервью и дает подсказки, которые помогут вам перед и во время собеседования. Статья охватывает вопросы относительно резюме, технических навыков, особенностей работы с JavaScript/TypeScript, и подходах к живому кодированию. Также рассматриваются вопросы архитектуры и дизайна, важные для любой позиции в IT.
https://rolique.medium.com/how-to-rock-our-technical-interview-50f8e75a42d6
————————————————————
Теги:
#uiux #angular #career
1. Мои правила дизайна хорошего интерфейса
Автор делится личными принципами проектирования эффективного интерфейса, подчеркивая важность акцентов, пропорциональности отступов и смысловой нагрузки элементов. Статья охватывает аспекты, такие как значимость текста над иконками, целесообразность дизайна и взаимосвязи расположения элементов. Автор призывает к созданию функциональных, а не перегруженных интерфейсов, с фокусом на пользовательский опыт.
https://habr.com/ru/articles/277399/
————————————————————
2. Breakdown: AngularJS Custom Directives
Статья объясняет использование кастомных директив в AngularJS и описывает основы их создания. Автор разбирает шаблоны, ограничения (restrict), контроллеры и другие свойства, необходимые для определения директив. Приводится пример базовой директивы и обсуждаются практические аспекты, такие как изоляция области видимости (scope) и использование 'controllerAs'. Статья призвана помочь новичкам в освоении механизма директив для улучшения структуры и поведения AngularJS приложений.
https://medium.com/joelachance/breakdown-angularjs-custom-directives-4a041a25b6d3
————————————————————
3. How to rock our technical interview
Антон Яценюк, Frontend Competence Manager в компании Rolique, делится советами по подготовке к техническому собеседованию. Он рассказывает о процессе интервью и дает подсказки, которые помогут вам перед и во время собеседования. Статья охватывает вопросы относительно резюме, технических навыков, особенностей работы с JavaScript/TypeScript, и подходах к живому кодированию. Также рассматриваются вопросы архитектуры и дизайна, важные для любой позиции в IT.
https://rolique.medium.com/how-to-rock-our-technical-interview-50f8e75a42d6
————————————————————
Теги:
#uiux #angular #career
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Как работает @supports. В CSS существует простой способ…
Статья знакомит читателя с CSS директивой @supports, позволяющей проверять поддержку свойств и значений браузерами. Автор обсуждает, в каких случаях стоит использовать @supports для создания фолбэков и представляет примеры кода. Объясняется влияние @supports на каскадность CSS и рассматриваются подходы к его использованию, включая логические операторы not, and и or.
https://medium.com/webbdev/css-264fc77cc04
————————————————————
2. Create your first Angular4 + Firebase + Travis CI application!
Эта статья представляет подробное руководство по созданию приложения с использованием Angular 4, Firebase и интеграцией с Travis CI. Описывается процесс установки Angular CLI, настройки Firebase и автоматического деплоя через Travis CI. Автор делится ссылкой на GitHub репозиторий с примером и шагами для запуска проекта, интеграции с Firebase и настройки CI/CD процесса с Travis CI.
https://medium.com/@hyseneim/create-your-first-angular4-firebase-travis-ci-application-e29bf64fc4e1
————————————————————
3. E2E Testing for Enterprise Angular Applications
Статья рассматривает важность автоматизированного end-to-end (E2E) тестирования для крупных Angular приложений. Объясняется, как Protractor, фреймворк для тестирования AngularJS приложений, помогает тестировать в реальном браузере, взаимодействуя с приложением как пользователь. Предлагается инструкция по установке Protractor и написанию первого теста, а также обсуждаются подходы к тестированию элементов и REST API запросов в Protractor.
https://medium.com/cyphertree/e2e-testing-for-enterprise-angular-applications-286b07b18222
————————————————————
Теги:
#html_css #angular
1. Как работает @supports. В CSS существует простой способ…
Статья знакомит читателя с CSS директивой @supports, позволяющей проверять поддержку свойств и значений браузерами. Автор обсуждает, в каких случаях стоит использовать @supports для создания фолбэков и представляет примеры кода. Объясняется влияние @supports на каскадность CSS и рассматриваются подходы к его использованию, включая логические операторы not, and и or.
https://medium.com/webbdev/css-264fc77cc04
————————————————————
2. Create your first Angular4 + Firebase + Travis CI application!
Эта статья представляет подробное руководство по созданию приложения с использованием Angular 4, Firebase и интеграцией с Travis CI. Описывается процесс установки Angular CLI, настройки Firebase и автоматического деплоя через Travis CI. Автор делится ссылкой на GitHub репозиторий с примером и шагами для запуска проекта, интеграции с Firebase и настройки CI/CD процесса с Travis CI.
https://medium.com/@hyseneim/create-your-first-angular4-firebase-travis-ci-application-e29bf64fc4e1
————————————————————
3. E2E Testing for Enterprise Angular Applications
Статья рассматривает важность автоматизированного end-to-end (E2E) тестирования для крупных Angular приложений. Объясняется, как Protractor, фреймворк для тестирования AngularJS приложений, помогает тестировать в реальном браузере, взаимодействуя с приложением как пользователь. Предлагается инструкция по установке Protractor и написанию первого теста, а также обсуждаются подходы к тестированию элементов и REST API запросов в Protractor.
https://medium.com/cyphertree/e2e-testing-for-enterprise-angular-applications-286b07b18222
————————————————————
Теги:
#html_css #angular
Что почитать сегодня – NOTA Frontend Daily Digest.
1. QlikView. Условное форматирование «Как в Эксель»
Статья описывает условное форматирование в QlikView на примере функциональности, аналогичной Excel. Автор делится сложностями и решениями для динамической раскраски таблиц в зависимости от выбранных пользователем параметров. Показывается подробная реализация с примерами кода, позволяющая динамично изменять цвета и настраивать множественные условия форматирования.
https://habr.com/ru/articles/446076/
————————————————————
2. What is Atomic CSS?
Статья объясняет концепцию Atomic CSS и преимущества использования утилитных классов вместо традиционного подхода к CSS. Рассматриваются примеры с Tailwind CSS, преимущества инкапсуляции стилей и уменьшение побочных эффектов. Также обсуждаются недостатки, такие как сложность восприятия и начальное непонимание для новичков.
https://javascript.plainenglish.io/what-is-atomic-css-6dd63fee9ef9
————————————————————
3. How to Use ng-bootstrapped Popup Modals Within Angular Components
Статья представляет пошаговое руководство по добавлению модальных окон ng-bootstrap в Angular компоненты. Описываются шаги установки ng-bootstrap, создание модального компонента и его интеграция в приложение Angular. Подробно рассказывается о настройке модальных окон, внедрении сервисов и использовании модальных окон в реальном проекте с примерами кода.
https://medium.com/linkit-intecs/how-to-use-ng-bootstrapped-popup-modals-within-angular-components-f952f95ebe95
————————————————————
Теги:
#html_css #angular
1. QlikView. Условное форматирование «Как в Эксель»
Статья описывает условное форматирование в QlikView на примере функциональности, аналогичной Excel. Автор делится сложностями и решениями для динамической раскраски таблиц в зависимости от выбранных пользователем параметров. Показывается подробная реализация с примерами кода, позволяющая динамично изменять цвета и настраивать множественные условия форматирования.
https://habr.com/ru/articles/446076/
————————————————————
2. What is Atomic CSS?
Статья объясняет концепцию Atomic CSS и преимущества использования утилитных классов вместо традиционного подхода к CSS. Рассматриваются примеры с Tailwind CSS, преимущества инкапсуляции стилей и уменьшение побочных эффектов. Также обсуждаются недостатки, такие как сложность восприятия и начальное непонимание для новичков.
https://javascript.plainenglish.io/what-is-atomic-css-6dd63fee9ef9
————————————————————
3. How to Use ng-bootstrapped Popup Modals Within Angular Components
Статья представляет пошаговое руководство по добавлению модальных окон ng-bootstrap в Angular компоненты. Описываются шаги установки ng-bootstrap, создание модального компонента и его интеграция в приложение Angular. Подробно рассказывается о настройке модальных окон, внедрении сервисов и использовании модальных окон в реальном проекте с примерами кода.
https://medium.com/linkit-intecs/how-to-use-ng-bootstrapped-popup-modals-within-angular-components-f952f95ebe95
————————————————————
Теги:
#html_css #angular
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Микрооптимизации производительности и JavaScript
Статья анализирует дилемму между оптимизацией производительности и качеством кода, основываясь на примерах из движка V8. Обсуждается влияние устаревших знаний, важность явности кода и вопросы необходимости и стоимости оптимизаций.
https://medium.com/devschacht/optimizations-and-javascript-f8e060d3eae3
————————————————————
2. Helpful resources for web developers and designers, freelancer or not.
Статья собирает полезные ресурсы для веб-разработчиков и дизайнеров: базы данных, инструменты дизайна, шрифты, хостинг, иконки, картинки, вдохновение, SEO и другие. Автор делится личным опытом использования каждого инструмента и объясняет, как они могут способствовать творчеству и экономии времени.
https://medium.com/@Ribbfors/helpful-resources-for-web-developers-and-designers-freelancer-or-not-7791f2ad6e69
————————————————————
3. Adding a Redis cache to an Express app
Статья описывает интеграцию кэширования Redis в приложение Express для повышения производительности. Рассматривается шаги установки Redis, настройки кэша с возможностью истечения и создание нового маршрута для сравнения эффективности. Подходы кэширования применяются для ускорения запросов и снижения нагрузки.
https://adostes.medium.com/adding-a-redis-cache-to-an-express-app-455c834becd1
————————————————————
Теги:
#javascript #uiux #redis #jsexpress
1. Микрооптимизации производительности и JavaScript
Статья анализирует дилемму между оптимизацией производительности и качеством кода, основываясь на примерах из движка V8. Обсуждается влияние устаревших знаний, важность явности кода и вопросы необходимости и стоимости оптимизаций.
https://medium.com/devschacht/optimizations-and-javascript-f8e060d3eae3
————————————————————
2. Helpful resources for web developers and designers, freelancer or not.
Статья собирает полезные ресурсы для веб-разработчиков и дизайнеров: базы данных, инструменты дизайна, шрифты, хостинг, иконки, картинки, вдохновение, SEO и другие. Автор делится личным опытом использования каждого инструмента и объясняет, как они могут способствовать творчеству и экономии времени.
https://medium.com/@Ribbfors/helpful-resources-for-web-developers-and-designers-freelancer-or-not-7791f2ad6e69
————————————————————
3. Adding a Redis cache to an Express app
Статья описывает интеграцию кэширования Redis в приложение Express для повышения производительности. Рассматривается шаги установки Redis, настройки кэша с возможностью истечения и создание нового маршрута для сравнения эффективности. Подходы кэширования применяются для ускорения запросов и снижения нагрузки.
https://adostes.medium.com/adding-a-redis-cache-to-an-express-app-455c834becd1
————————————————————
Теги:
#javascript #uiux #redis #jsexpress
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Прикажи Vue.js не тратить попусту время и рендерить быстрее!
Статья рассказывает о проблемах производительности Vue.js при обработке больших объемов данных. Автор делится советами, как сократить время рендеринга, используя библиотеку "vue-nonreactive" и избегая излишнего отслеживания изменений.
https://medium.com/@offsky/%D0%BF%D1%80%D0%B8%D0%BA%D0%B0%D0%B6%D0%B8-vue-js-%D0%BD%D0%B5-%D1%82%D1%80%D0%B0%D1%82%D0%B8%D1%82%D1%8C-%D0%BF%D0%BE%D0%BF%D1%83%D1%81%D1%82%D1%83-%D0%B2%D1%80%D0%B5%D0%BC%D1%8F-%D0%B8-%D1%80%D0%B5%D0%BD%D0%B4%D0%B5%D1%80%D0%B8%D1%82%D1%8C-%D0%B1%D1%8B%D1%81%D1%82%D1%80%D0%B5%D0%B5-92ee98edf7b7
————————————————————
2. Mentor: “TypeScript is a virus!”
Статья рассматривает мнение Кайла Симпсона о TypeScript, его распространенности и сложности синтаксиса по сравнению с JavaScript. Обсуждается, является ли TypeScript ловушкой и как сложность обобщенных типов влияет на производительность кода.
https://javascript.plainenglish.io/mentor-typescript-is-a-virus-a8ed076f1de9
————————————————————
3. A chaotic mind leads to chaotic code
Статья обсуждает влияние беспорядочных мыслей на качество кода и подходы к управлению стрессом. Автор рассматривает техники медитации, дыхательные упражнения и самопоощрение как способы борьбы с хаосом в уме для повышения качества работы.
https://medium.com/free-code-camp/a-chaotic-mind-leads-to-chaotic-code-e7d6962777c0
————————————————————
Теги:
#javascript #vuejs #typescript #softskills
1. Прикажи Vue.js не тратить попусту время и рендерить быстрее!
Статья рассказывает о проблемах производительности Vue.js при обработке больших объемов данных. Автор делится советами, как сократить время рендеринга, используя библиотеку "vue-nonreactive" и избегая излишнего отслеживания изменений.
https://medium.com/@offsky/%D0%BF%D1%80%D0%B8%D0%BA%D0%B0%D0%B6%D0%B8-vue-js-%D0%BD%D0%B5-%D1%82%D1%80%D0%B0%D1%82%D0%B8%D1%82%D1%8C-%D0%BF%D0%BE%D0%BF%D1%83%D1%81%D1%82%D1%83-%D0%B2%D1%80%D0%B5%D0%BC%D1%8F-%D0%B8-%D1%80%D0%B5%D0%BD%D0%B4%D0%B5%D1%80%D0%B8%D1%82%D1%8C-%D0%B1%D1%8B%D1%81%D1%82%D1%80%D0%B5%D0%B5-92ee98edf7b7
————————————————————
2. Mentor: “TypeScript is a virus!”
Статья рассматривает мнение Кайла Симпсона о TypeScript, его распространенности и сложности синтаксиса по сравнению с JavaScript. Обсуждается, является ли TypeScript ловушкой и как сложность обобщенных типов влияет на производительность кода.
https://javascript.plainenglish.io/mentor-typescript-is-a-virus-a8ed076f1de9
————————————————————
3. A chaotic mind leads to chaotic code
Статья обсуждает влияние беспорядочных мыслей на качество кода и подходы к управлению стрессом. Автор рассматривает техники медитации, дыхательные упражнения и самопоощрение как способы борьбы с хаосом в уме для повышения качества работы.
https://medium.com/free-code-camp/a-chaotic-mind-leads-to-chaotic-code-e7d6962777c0
————————————————————
Теги:
#javascript #vuejs #typescript #softskills
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Обход капч с помощью Headless Chrome
Статья описывает работу с сервисом 2Captcha для распознавания капчи. Достоинствами являются высокая точность распознавания, доступность API. Недостатками - необходимость оплачивать запросы, зависимость от работоспособности сервиса. Предлагается интегрировать 2Captcha в Puppeteer для получения токена reCaptcha на странице при автоматизированной регистрации.
https://habr.com/ru/articles/508192/
————————————————————
2. Testing your implementation of ngOnChanges in Angular components
Данная статья описывает как протестировать метод ngOnChanges в компонентах Angular. Предлагаются два подхода: прямо вызвать этот метод в тесте и использовать вспомогательный компонент, на котором будут изменяться входные параметры проверяемого компонента.
https://medium.com/@christophkrautz/testing-ngonchanges-in-angular-components-bbb3b4650ee8
————————————————————
3. The Pros and Cons of Minimalist Web Design
Рассматриваются преимущества и недостатки минималистского подхода в веб-дизайне. К плюсам относятся простота навигации, быстрая загрузка, SEO-оптимизация. К минусам - ограниченная возможность коммуникации, скудность дизайна, ограниченные возможности развития. Статья рекомендует подходить к выбору стиля индивидуально с учетом целей сайта.
https://medium.com/@Imaginovation/the-pros-and-cons-of-minimalist-web-design-ad33d8ef933b
————————————————————
Теги:
#javascript #angular #uiux
1. Обход капч с помощью Headless Chrome
Статья описывает работу с сервисом 2Captcha для распознавания капчи. Достоинствами являются высокая точность распознавания, доступность API. Недостатками - необходимость оплачивать запросы, зависимость от работоспособности сервиса. Предлагается интегрировать 2Captcha в Puppeteer для получения токена reCaptcha на странице при автоматизированной регистрации.
https://habr.com/ru/articles/508192/
————————————————————
2. Testing your implementation of ngOnChanges in Angular components
Данная статья описывает как протестировать метод ngOnChanges в компонентах Angular. Предлагаются два подхода: прямо вызвать этот метод в тесте и использовать вспомогательный компонент, на котором будут изменяться входные параметры проверяемого компонента.
https://medium.com/@christophkrautz/testing-ngonchanges-in-angular-components-bbb3b4650ee8
————————————————————
3. The Pros and Cons of Minimalist Web Design
Рассматриваются преимущества и недостатки минималистского подхода в веб-дизайне. К плюсам относятся простота навигации, быстрая загрузка, SEO-оптимизация. К минусам - ограниченная возможность коммуникации, скудность дизайна, ограниченные возможности развития. Статья рекомендует подходить к выбору стиля индивидуально с учетом целей сайта.
https://medium.com/@Imaginovation/the-pros-and-cons-of-minimalist-web-design-ad33d8ef933b
————————————————————
Теги:
#javascript #angular #uiux
Что почитать сегодня – NOTA Frontend Daily Digest.
1. JavaScript: Публичные и приватные поля классов
Статья описывает новый синтаксис классов в JavaScript для определения публичных и приватных полей. Рассмотрены примеры использования публичных и приватных статических полей и методов. Отмечены преимущества нового подхода для проектирования классов и работы с подклассами.
https://habr.com/ru/articles/438202/
————————————————————
2. Things to learn to become Web Developer
Статья содержит рекомендации по набору навыков для разработчика веб-приложений. Рассматриваются инструменты и технологии для фронтенда, бэкенда и фуллстек разработки. Даются примеры популярных фреймворков, языков программирования, систем управления базами данных. Также затрагивается тема внедрения серверных компонентов и систем управления содержимым.
https://medium.com/@samirthapa468/things-to-learn-to-become-web-developer-83d43c73d3ed
————————————————————
3. Unleash the Power of Server-Side Rendering with React Server Components and Next.js 13
Статья посвящена новой возможности Next.js - серверным компонентам React. Рассматривается их отличие от SSR. Приводится пример использования директивы для определения серверного компонента. Отмечаются преимущества этого подхода для уменьшения нагрузки и повышения скорости отображения.
https://blog.bitsrc.io/unleash-the-power-of-server-side-rendering-with-react-server-components-and-next-js-13-10448b803611
————————————————————
Теги:
#javascript #career #nextjs
1. JavaScript: Публичные и приватные поля классов
Статья описывает новый синтаксис классов в JavaScript для определения публичных и приватных полей. Рассмотрены примеры использования публичных и приватных статических полей и методов. Отмечены преимущества нового подхода для проектирования классов и работы с подклассами.
https://habr.com/ru/articles/438202/
————————————————————
2. Things to learn to become Web Developer
Статья содержит рекомендации по набору навыков для разработчика веб-приложений. Рассматриваются инструменты и технологии для фронтенда, бэкенда и фуллстек разработки. Даются примеры популярных фреймворков, языков программирования, систем управления базами данных. Также затрагивается тема внедрения серверных компонентов и систем управления содержимым.
https://medium.com/@samirthapa468/things-to-learn-to-become-web-developer-83d43c73d3ed
————————————————————
3. Unleash the Power of Server-Side Rendering with React Server Components and Next.js 13
Статья посвящена новой возможности Next.js - серверным компонентам React. Рассматривается их отличие от SSR. Приводится пример использования директивы для определения серверного компонента. Отмечаются преимущества этого подхода для уменьшения нагрузки и повышения скорости отображения.
https://blog.bitsrc.io/unleash-the-power-of-server-side-rendering-with-react-server-components-and-next-js-13-10448b803611
————————————————————
Теги:
#javascript #career #nextjs
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Эмуляция события вызова функции
Статья описывает способ эмулировать событие вызова функции в JavaScript путем переопределения функции и добавления в нее обработчика, который будет вызываться перед, после и при ошибке выполнения функции. Приведены примеры использования такого подхода для отслеживания анимаций и методов объектов.
https://habr.com/ru/articles/135001/
————————————————————
2. Union types in TypeScript
Статья кратко описывает возможность использования объединенных типов (union types) в TypeScript. Union types позволяют объявлять переменную или параметр функции, которые могут принимать значения нескольких типов. Приведен пример объявления функции, принимающей строку или число с помощью union types.
https://blake-wood-bst.medium.com/union-types-in-typescript-99a8f4a782e5
————————————————————
3. Software Development Interview Questions
Статья содержит список часто задаваемых вопросов на собеседовании в разработку программного обеспечения. В список входят вопросы о таких понятиях как сущностно-ориентированное и функциональное программирование, связывание, внедрение зависимостей, шаблоны проектирования, тестирование, принципы SOLID и другие.
https://medium.com/@alxetd/software-development-interview-questions-dfcbeec5a73e
————————————————————
Теги:
#javascript #typescript #career
1. Эмуляция события вызова функции
Статья описывает способ эмулировать событие вызова функции в JavaScript путем переопределения функции и добавления в нее обработчика, который будет вызываться перед, после и при ошибке выполнения функции. Приведены примеры использования такого подхода для отслеживания анимаций и методов объектов.
https://habr.com/ru/articles/135001/
————————————————————
2. Union types in TypeScript
Статья кратко описывает возможность использования объединенных типов (union types) в TypeScript. Union types позволяют объявлять переменную или параметр функции, которые могут принимать значения нескольких типов. Приведен пример объявления функции, принимающей строку или число с помощью union types.
https://blake-wood-bst.medium.com/union-types-in-typescript-99a8f4a782e5
————————————————————
3. Software Development Interview Questions
Статья содержит список часто задаваемых вопросов на собеседовании в разработку программного обеспечения. В список входят вопросы о таких понятиях как сущностно-ориентированное и функциональное программирование, связывание, внедрение зависимостей, шаблоны проектирования, тестирование, принципы SOLID и другие.
https://medium.com/@alxetd/software-development-interview-questions-dfcbeec5a73e
————————————————————
Теги:
#javascript #typescript #career
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Сортировка на односвязном списке за O(nlogn) времени в худшем случае с O(1) дополнительной памяти
Статья посвящена алгоритму сортировки односвязного списка за линейное время с опорными на медианах медиан. Предлагается алгоритм, позволяющий сортировать за O(nlogn) в худшем случае, используя только постоянный объём дополнительной памяти за счёт упрощения рекурсивной схемы быстрой сортировки.
https://habr.com/ru/articles/247053/
————————————————————
2. How to get a grip on reference vs value in JavaScript
Статья посвящена различию между передачей по ссылке и по значению в JavaScript. Примитивные типы (числа, строки, булевы) передаются по значению, а объекты и массивы - по ссылке. Это влияет на то, как изменения одной переменной сказываются на других. Рассматриваются способы создания копий объектов и массивов.
https://medium.com/free-code-camp/how-to-get-a-grip-on-reference-vs-value-in-javascript-cba3f86da223
————————————————————
3. Why use a Headless CMS with JAMstack
Статья рассматривает преимущества использования headless CMS в сочетании с JAMstack. Headless CMS позволяет разделить представление и содержимое, обеспечивая гибкость, будущую устойчивость и безопасность. JAMstack делает сайты быстрыми, безопасными и легко масштабируемыми. Вместе они дают распределенную архитектуру с хорошей производительностью.
https://hamsa-harcourt.medium.com/why-use-a-headless-cms-with-jamstack-72379a158496
————————————————————
Теги:
#javascript #backend #architecture
1. Сортировка на односвязном списке за O(nlogn) времени в худшем случае с O(1) дополнительной памяти
Статья посвящена алгоритму сортировки односвязного списка за линейное время с опорными на медианах медиан. Предлагается алгоритм, позволяющий сортировать за O(nlogn) в худшем случае, используя только постоянный объём дополнительной памяти за счёт упрощения рекурсивной схемы быстрой сортировки.
https://habr.com/ru/articles/247053/
————————————————————
2. How to get a grip on reference vs value in JavaScript
Статья посвящена различию между передачей по ссылке и по значению в JavaScript. Примитивные типы (числа, строки, булевы) передаются по значению, а объекты и массивы - по ссылке. Это влияет на то, как изменения одной переменной сказываются на других. Рассматриваются способы создания копий объектов и массивов.
https://medium.com/free-code-camp/how-to-get-a-grip-on-reference-vs-value-in-javascript-cba3f86da223
————————————————————
3. Why use a Headless CMS with JAMstack
Статья рассматривает преимущества использования headless CMS в сочетании с JAMstack. Headless CMS позволяет разделить представление и содержимое, обеспечивая гибкость, будущую устойчивость и безопасность. JAMstack делает сайты быстрыми, безопасными и легко масштабируемыми. Вместе они дают распределенную архитектуру с хорошей производительностью.
https://hamsa-harcourt.medium.com/why-use-a-headless-cms-with-jamstack-72379a158496
————————————————————
Теги:
#javascript #backend #architecture
Что почитать сегодня – NOTA Frontend Daily Digest.
1. Рисование по Canvas через WebSockets, или как работала наша демка на HTML5 Camp
Статья описывает прототип совместного рисования в реальном времени через веб-сокеты. Представлены реализация текстового чата и добавление функционала рисования на Canvas с передачей линий через сокеты. Описываются тонкости реализации в разных браузерах.
https://habr.com/ru/articles/134097
————————————————————
2. An Opinionated Web Application Solution: Part 2
Статья описывает подходы к настройке webpack для веб-приложений. Рассматривается использование одного конфигурационного файла webpack c учетом переменных окружения, извлечение CSS из JS, локальное соответствие классов CSS (CSS Modules). Также описывается использование псевдонимов для импортов модулей.
https://codeburst.io/an-opinionated-web-application-solution-part-2-33a526c6cd8d
————————————————————
3. No more loading spinners, load the structure!
Статья предлагает загружать структуру элементов вместо использования спиннеров при загрузке данных. Приводятся примеры Facebook, Medium, LinkedIn и Slack, которые отображают контейнеры для будущих данных. Это улучшает UX, делая приложение более понятным и стильным.
https://medium.com/@farolfo/no-more-loading-spinners-start-by-loading-the-structure-b52fbab4045f
————————————————————
Теги:
#devblog #html_css #uiux
1. Рисование по Canvas через WebSockets, или как работала наша демка на HTML5 Camp
Статья описывает прототип совместного рисования в реальном времени через веб-сокеты. Представлены реализация текстового чата и добавление функционала рисования на Canvas с передачей линий через сокеты. Описываются тонкости реализации в разных браузерах.
https://habr.com/ru/articles/134097
————————————————————
2. An Opinionated Web Application Solution: Part 2
Статья описывает подходы к настройке webpack для веб-приложений. Рассматривается использование одного конфигурационного файла webpack c учетом переменных окружения, извлечение CSS из JS, локальное соответствие классов CSS (CSS Modules). Также описывается использование псевдонимов для импортов модулей.
https://codeburst.io/an-opinionated-web-application-solution-part-2-33a526c6cd8d
————————————————————
3. No more loading spinners, load the structure!
Статья предлагает загружать структуру элементов вместо использования спиннеров при загрузке данных. Приводятся примеры Facebook, Medium, LinkedIn и Slack, которые отображают контейнеры для будущих данных. Это улучшает UX, делая приложение более понятным и стильным.
https://medium.com/@farolfo/no-more-loading-spinners-start-by-loading-the-structure-b52fbab4045f
————————————————————
Теги:
#devblog #html_css #uiux
Что почитать сегодня – NOTA Frontend Daily Digest.
1. 30 секунд CSS
Статья содержит коллекцию полезных CSS-сниппетов, которые можно изучить менее чем за 30 секунд. Представлены решения для явного очистки элементов, поддержания постоянного соотношения сторон, кастомизации выделения текста, использования CSS-переменных, создания тонкой рамки вокруг элемента и другие короткие CSS-решения.
https://habr.com/ru/articles/350160
————————————————————
2. SolidPress: Empowering Web Development with Solidity
SolidPress - это новая веб-разработочная платформа, которая использует Solidity для создания динамических веб-сайтов с повышенной безопасностью, прозрачностью и децентрализацией. В отличие от традиционных систем, SolidPress использует блокчейн Ethereum для хранения и управления данными сайта, аутентификации пользователей и другой критической информации. Это обеспечивает недоступность данных для изменения и цензуры.
https://medium.com/@solidity101/solidpress-fd514d2c9e79
————————————————————
3. 7 JavaScript Web APIs to build Futuristic Websites you didn’t know🤯
В статье рассматриваются 7 полезных веб-API JavaScript, которые могут помочь создавать футуристические веб-сайты: Screen Capture API, Web Share API, Intersection Observer API, Clipboard API, Screen Wake Lock API, Screen Orientation API и Fullscreen API. Приведены примеры использования этих API.
https://tapajyoti-bose.medium.com/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-12b737ccf594
————————————————————
Теги:
#html_css #backend
1. 30 секунд CSS
Статья содержит коллекцию полезных CSS-сниппетов, которые можно изучить менее чем за 30 секунд. Представлены решения для явного очистки элементов, поддержания постоянного соотношения сторон, кастомизации выделения текста, использования CSS-переменных, создания тонкой рамки вокруг элемента и другие короткие CSS-решения.
https://habr.com/ru/articles/350160
————————————————————
2. SolidPress: Empowering Web Development with Solidity
SolidPress - это новая веб-разработочная платформа, которая использует Solidity для создания динамических веб-сайтов с повышенной безопасностью, прозрачностью и децентрализацией. В отличие от традиционных систем, SolidPress использует блокчейн Ethereum для хранения и управления данными сайта, аутентификации пользователей и другой критической информации. Это обеспечивает недоступность данных для изменения и цензуры.
https://medium.com/@solidity101/solidpress-fd514d2c9e79
————————————————————
3. 7 JavaScript Web APIs to build Futuristic Websites you didn’t know🤯
В статье рассматриваются 7 полезных веб-API JavaScript, которые могут помочь создавать футуристические веб-сайты: Screen Capture API, Web Share API, Intersection Observer API, Clipboard API, Screen Wake Lock API, Screen Orientation API и Fullscreen API. Приведены примеры использования этих API.
https://tapajyoti-bose.medium.com/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-12b737ccf594
————————————————————
Теги:
#html_css #backend
Telegram Center
Канал