🖥 15 сайтов, экономящих время разработчика
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3767
Forwarded and filtered by @smartfeed_bot
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3767
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
15 сайтов, экономящих время разработчика
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
This media is not supported in your browser
VIEW IN TELEGRAM
Нашли codepen того самого переключателя из мемного видео: Detailed Theme Switch
Проект реализован с помощью CSS и JavaScript. Исходники:https://codepen.io/jkantner/pen/OJazKey
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Original post link: t.me/tproger_web/4711
Forwarded and filtered by @smartfeed_bot
Проект реализован с помощью CSS и JavaScript. Исходники:https://codepen.io/jkantner/pen/OJazKey
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Original post link: t.me/tproger_web/4711
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Что такое Flux - архитектура? Какие сущности она имеет?
Flux-архитектура — архитектурный подход или набор шаблонов программирования для построения пользовательского интерфейса веб-приложений, сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных.
Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении.
В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку:
- Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация явлется синхронным процессом. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные.
- Диспетчер/Диспатчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами.
- Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища при помощи чистых функций.
- Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия.
👉 @seniorFront
Flux-архитектура — архитектурный подход или набор шаблонов программирования для построения пользовательского интерфейса веб-приложений, сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных.
Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении.
В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку:
- Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация явлется синхронным процессом. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные.
- Диспетчер/Диспатчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами.
- Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища при помощи чистых функций.
- Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия.
👉 @seniorFront
👩💻 35 браузерных плагинов для Google Chrome в помощь разработчику
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Читать...
Original post link: t.me/frontendnoteschannel/3771
Forwarded and filtered by @smartfeed_bot
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Читать...
Original post link: t.me/frontendnoteschannel/3771
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
🧩 35 браузерных плагинов для Google Chrome в помощь разработчику
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Forwarded from Веб-страница
Cloudflare выпустила Pingora v0.3.0 с поддержкой HTTP-модулей
Cloudflare представила второй публичный релиз открытого проекта Pingora v0.3.0. Это асинхронный многопоточный фреймворк на Rust, который помогает создавать прокси-сервисы HTTP.
Проект используется для создания сервисов, обеспечивающих значительную часть трафика в Cloudflare (вместо применения Nginx). Исходный код Pingora опубликован на GitHub под лицензией Apache 2.0.
Проект Pingora предоставляет библиотеки и API для создания сервисов поверх HTTP/1 и HTTP/2, TLS или просто TCP/UDP. В качестве прокси-сервера он поддерживает сквозное проксирование HTTP/1 и HTTP/2, gRPC и WebSocket. Поддержка HTTP/3 — в планах.
Pingora также включает в себя настраиваемые стратегии балансировки нагрузки и аварийного переключения. Чтобы соответствовать требованиям безопасности, он поддерживает как широко используемые библиотеки OpenSSL, так и BoringSSL, которые соответствуют требованиям FIPS (федеральных стандартов обработки информации США) и пост-квантового шифрования.
Подробнее: https://habr.com/ru/news/828678/
#cloudflare
Cloudflare представила второй публичный релиз открытого проекта Pingora v0.3.0. Это асинхронный многопоточный фреймворк на Rust, который помогает создавать прокси-сервисы HTTP.
Проект используется для создания сервисов, обеспечивающих значительную часть трафика в Cloudflare (вместо применения Nginx). Исходный код Pingora опубликован на GitHub под лицензией Apache 2.0.
Проект Pingora предоставляет библиотеки и API для создания сервисов поверх HTTP/1 и HTTP/2, TLS или просто TCP/UDP. В качестве прокси-сервера он поддерживает сквозное проксирование HTTP/1 и HTTP/2, gRPC и WebSocket. Поддержка HTTP/3 — в планах.
Pingora также включает в себя настраиваемые стратегии балансировки нагрузки и аварийного переключения. Чтобы соответствовать требованиям безопасности, он поддерживает как широко используемые библиотеки OpenSSL, так и BoringSSL, которые соответствуют требованиям FIPS (федеральных стандартов обработки информации США) и пост-квантового шифрования.
Подробнее: https://habr.com/ru/news/828678/
#cloudflare
👩💻 Не бойтесь генераторов JavaScript
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
Читать...
Original post link: t.me/frontendnoteschannel/3773
Forwarded and filtered by @smartfeed_bot
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
Читать...
Original post link: t.me/frontendnoteschannel/3773
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Не бойтесь генераторов JavaScript
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
This media is not supported in your browser
VIEW IN TELEGRAM
Sphere
Анимация вращения трёх сфер, реализованная с помощью библиотеки Three.js.
https://codepen.io/termat/pen/MdjBeQ
Original post link: t.me/senior_front/2125
Forwarded and filtered by @smartfeed_bot
Анимация вращения трёх сфер, реализованная с помощью библиотеки Three.js.
https://codepen.io/termat/pen/MdjBeQ
Original post link: t.me/senior_front/2125
Forwarded and filtered by @smartfeed_bot
bunkerweb: многостаночный файервол для сайта
Защита на базе NGINX с веб-интерфейсом и CLI-командами, которая в состоянии:
— распознать необычные запросы к серверу и заблокировать их;
— предотвращать TLS Hardening («прослушивание» данных во время передачи от сервера к клиенту);
— блокировать ботов капчей (cookie, javascript, captcha, hCaptcha or reCAPTCHA);
Репозиторий проекта: https://github.com/bunkerity/bunkerweb
#инструменты
Original post link: t.me/tproger_web/4718
Forwarded and filtered by @smartfeed_bot
Защита на базе NGINX с веб-интерфейсом и CLI-командами, которая в состоянии:
— распознать необычные запросы к серверу и заблокировать их;
— предотвращать TLS Hardening («прослушивание» данных во время передачи от сервера к клиенту);
— блокировать ботов капчей (cookie, javascript, captcha, hCaptcha or reCAPTCHA);
Репозиторий проекта: https://github.com/bunkerity/bunkerweb
#инструменты
Original post link: t.me/tproger_web/4718
Forwarded and filtered by @smartfeed_bot
Расширяем возможности мобильного приложения на WebView
Часто разработчики используют только встроенный API взаимодействия JavaScript c нативными кодом, например Web API, но нам этого оказалось мало, и мы расширили спектр возможностей подхода web-native. Внутри статьи я расскажу, какой подход выбрал, как к этому пришёл, и, как обошёл возникшие проблемы. Подчеркну плюсы и минусы использования своего решения и в конце предложу несколько идей дальнейшего развития выбранного пути.
👉 @seniorFront
Original post link: t.me/seniorFront/4296
Forwarded and filtered by @smartfeed_bot
Часто разработчики используют только встроенный API взаимодействия JavaScript c нативными кодом, например Web API, но нам этого оказалось мало, и мы расширили спектр возможностей подхода web-native. Внутри статьи я расскажу, какой подход выбрал, как к этому пришёл, и, как обошёл возникшие проблемы. Подчеркну плюсы и минусы использования своего решения и в конце предложу несколько идей дальнейшего развития выбранного пути.
👉 @seniorFront
Original post link: t.me/seniorFront/4296
Forwarded and filtered by @smartfeed_bot
Лучшие способы вызова API на JavaScript
При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/
#api #javascript
Original post link: t.me/tproger_web/4719
Forwarded and filtered by @smartfeed_bot
При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/
#api #javascript
Original post link: t.me/tproger_web/4719
Forwarded and filtered by @smartfeed_bot
🧰 ТОП-10 инструментов дизайнера UX/UI
В средствах для создания дизайна UX/UI легко запутаться, поэтому сначала стоит понять их предназначение. Предлагаем вниманию читателей небольшой обзор актуальных инструментов.
Читать...
Original post link: t.me/frontendnoteschannel/3780
Forwarded and filtered by @smartfeed_bot
В средствах для создания дизайна UX/UI легко запутаться, поэтому сначала стоит понять их предназначение. Предлагаем вниманию читателей небольшой обзор актуальных инструментов.
Читать...
Original post link: t.me/frontendnoteschannel/3780
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
🛠 ТОП-10 инструментов дизайнера UX/UI, актуальных в 2021 году
В средствах для создания дизайна UX/UI легко запутаться, поэтому сначала стоит понять их предназначение. Предлагаем вниманию читателей небольшой обзор актуальных в 2021 году инструментов.
Forwarded from Frontender's notes [ru]
Напишите функцию, которая принимает строку из одного или нескольких слов и возвращает ту же строку, но со всеми пятью или более буквенными словами в обратном порядке (точно так же, как название этого ката).
Передаваемые строки будут состоять только из букв и пробелов. Пробелы будут включены только в том случае, если присутствует более одного слова.
Пример кода:
spinWords( "Hey fellow warriors" ) => returns "Hey wollef sroirraw"
spinWords( "This is a test") => returns "This is a test"
spinWords( "This is another test" )=> returns "This is rehtona test"
Решение задачи🔽
function spinWords(sentence) {
return sentence.split(' ').map(word => {
return word.length >= 5 ? word.split('').reverse().join('') : word;
}).join(' ');
}
// Примеры использования
console.log(spinWords("Hey fellow warriors")); // "Hey wollef sroirraw"
console.log(spinWords("This is a test")); // "This is a test"
console.log(spinWords("This is another test")); // "This is rehtona test"
Please open Telegram to view this post
VIEW IN TELEGRAM
#вопросы_с_собеседований
Что такое глобальные переменные и какие с ними возникают проблемы?
Глобальные переменные — это те, которые доступны по всей длине кода без какой-либо области видимости. Ключевое слово var используется для объявления локальной переменной, но если вы его опустите, переменная станет глобальной.
Проблема с глобальными переменными заключается в конфликте имен переменных локальной и глобальной области видимости. Также трудно отлаживать и тестировать код, использующий глобальные переменные.
Original post link: t.me/senior_front/2133
Forwarded and filtered by @smartfeed_bot
Что такое глобальные переменные и какие с ними возникают проблемы?
Глобальные переменные — это те, которые доступны по всей длине кода без какой-либо области видимости. Ключевое слово var используется для объявления локальной переменной, но если вы его опустите, переменная станет глобальной.
msg = "Hello"; // var is missing, it becomes global variable
Проблема с глобальными переменными заключается в конфликте имен переменных локальной и глобальной области видимости. Также трудно отлаживать и тестировать код, использующий глобальные переменные.
Original post link: t.me/senior_front/2133
Forwarded and filtered by @smartfeed_bot
Firefox не только самый быстрый, но и самый эффективный браузер
Несколько месяцев назад мы публиковали результаты тестов Speedometer 3.0, согласно которым Firefox сохраняет преимущество в производительности перед Chrome.
А сейчас появились доказательства, что Firefox не только быстрее, но и эффективнее Chrome по некоторым параметрам. В частности, по работе с памятью: https://habr.com/ru/companies/ruvds/articles/827170/
#firefox
Original post link: t.me/tproger_web/4727
Forwarded and filtered by @smartfeed_bot
Несколько месяцев назад мы публиковали результаты тестов Speedometer 3.0, согласно которым Firefox сохраняет преимущество в производительности перед Chrome.
А сейчас появились доказательства, что Firefox не только быстрее, но и эффективнее Chrome по некоторым параметрам. В частности, по работе с памятью: https://habr.com/ru/companies/ruvds/articles/827170/
#firefox
Original post link: t.me/tproger_web/4727
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Она: Он такой загадочный. Интересно, о чем он думает?
Он:
Original post link: t.me/tproger_web/4729
Forwarded and filtered by @smartfeed_bot
Он:
Original post link: t.me/tproger_web/4729
Forwarded and filtered by @smartfeed_bot
👩💻 Шпаргалка по хукам в React
Хуки - это функции, позволяющие оперативно контролировать текущее состояние функциональных компонентов React. Новичкам эта статья поможет разобраться в сложных вопросах, а профессионалам - развеять имеющиеся сомнения.
Читать...
Original post link: t.me/frontendnoteschannel/3790
Forwarded and filtered by @smartfeed_bot
Хуки - это функции, позволяющие оперативно контролировать текущее состояние функциональных компонентов React. Новичкам эта статья поможет разобраться в сложных вопросах, а профессионалам - развеять имеющиеся сомнения.
Читать...
Original post link: t.me/frontendnoteschannel/3790
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Шпаргалка по хукам в React
Хуки - это функции, позволяющие оперативно контролировать текущее состояние функциональных компонентов React. Новичкам эта статья поможет разобраться в сложных вопросах, а профессионалам - развеять имеющиеся сомнения.
⚙️ Как сделать чистый код еще чище
Предлагаем практический пример улучшения, казалось бы, чистого кода на сетевом и UI-уровне. Посмотрите, как в процессе продуманного рефакторинга - путем удаления всего лишнего (вложений, типов), уменьшения отступов, выполнения модульной разбивки - можно повысить уровень читаемости и производительности проекта.
Читать...
Original post link: t.me/frontendnoteschannel/3794
Forwarded and filtered by @smartfeed_bot
Предлагаем практический пример улучшения, казалось бы, чистого кода на сетевом и UI-уровне. Посмотрите, как в процессе продуманного рефакторинга - путем удаления всего лишнего (вложений, типов), уменьшения отступов, выполнения модульной разбивки - можно повысить уровень читаемости и производительности проекта.
Читать...
Original post link: t.me/frontendnoteschannel/3794
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Как сделать чистый код еще чище
Предлагаем практический пример улучшения, казалось бы, чистого кода на сетевом и UI-уровне. Посмотрите, как в процессе продуманного рефакторинга - путем удаления всего лишнего (вложений, типов), уменьшения отступов, выполнения модульной разбивки - можно повысить…
Алгоритмы и структуры данных для начинающих
Уверенное применение структур данных и алгоритмов имеет важное значение при создании программ. Изучить основы поможет серия коротких видеоуроков с примерами на JavaScript. Например, что такое BinarySearchTree, LinkedList, Stack, Queue, их применение, а также другие структуры и алгоритмы:
https://youtube.com/playlist?list=PLIFGfLqvZ-yGHI2Fg0NCgi7FY0h1yh-af
#javascript #алгоритмы
Original post link: t.me/tproger_web/4732
Forwarded and filtered by @smartfeed_bot
Уверенное применение структур данных и алгоритмов имеет важное значение при создании программ. Изучить основы поможет серия коротких видеоуроков с примерами на JavaScript. Например, что такое BinarySearchTree, LinkedList, Stack, Queue, их применение, а также другие структуры и алгоритмы:
https://youtube.com/playlist?list=PLIFGfLqvZ-yGHI2Fg0NCgi7FY0h1yh-af
#javascript #алгоритмы
Original post link: t.me/tproger_web/4732
Forwarded and filtered by @smartfeed_bot
⚡Как работает фронтенд: от загрузки сайта до современных инструментов
Об этом расскажет Андрей Сухов, Frontend-разработчик Evocargo и эксперт Центра непрерывного образования ФКН НИУ ВШЭ.
Программа вебинара:
🔸Из каких частей состоит браузер
🔸Как происходит загрузка веб-страницы: клиент-серверное взаимодействие и рендеринг фронтенда в браузере
🔸Обзор базовых технологий: HTML, CSS и JavaScript
🔸Современные инструменты: обзор React, Vue и Angular
🔸Основные концепции React
Дата: 31 июля
Время: 18:30
🔗Участие бесплатное, требуется регистрация: по ссылке.
Original post link: t.me/senior_front/2139
Forwarded and filtered by @smartfeed_bot
Об этом расскажет Андрей Сухов, Frontend-разработчик Evocargo и эксперт Центра непрерывного образования ФКН НИУ ВШЭ.
Программа вебинара:
🔸Из каких частей состоит браузер
🔸Как происходит загрузка веб-страницы: клиент-серверное взаимодействие и рендеринг фронтенда в браузере
🔸Обзор базовых технологий: HTML, CSS и JavaScript
🔸Современные инструменты: обзор React, Vue и Angular
🔸Основные концепции React
Дата: 31 июля
Время: 18:30
🔗Участие бесплатное, требуется регистрация: по ссылке.
Original post link: t.me/senior_front/2139
Forwarded and filtered by @smartfeed_bot
👩💻 Разделение пользовательского интерфейса и логики в React: чистый код с безголовыми компонентами
Ознакомьтесь с headless-подходом в React-разработке. Он позволит создавать более удобный для сопровождения и многократного использования код, сокращая его избыточность и потенциальные ошибки.
Читать...
Original post link: t.me/frontendnoteschannel/3802
Forwarded and filtered by @smartfeed_bot
Ознакомьтесь с headless-подходом в React-разработке. Он позволит создавать более удобный для сопровождения и многократного использования код, сокращая его избыточность и потенциальные ошибки.
Читать...
Original post link: t.me/frontendnoteschannel/3802
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Разделение пользовательского интерфейса и логики в React: чистый код с безголовыми компонентами
Ознакомьтесь с headless-подходом в React-разработке. Он позволит создавать более удобный для сопровождения и многократного использования код, сокращая его избыточность и потенциальные ошибки.