Пара слов о тернарном операторе
Даже у самых известных и опытных разработчиков иногда происходят просветления в, казалось бы, базовых вещах. Так, один из главных разработчиков React и создатель Redux Даниил Абрамов — практически рок-звезда в своей сфере — написал в Twitter, что осознал, что тернарный оператор (от лат. ternaries — «тройной») называют так, потому что он обрабатывает ТРИ вещи. Пост уже собрал почти тысячу лайков.
Позже Абрамов добавил комментарий, в котором подчеркнул, что носители языка не понимают, с какими преимуществами начинают работу в мире IT. Один из пользователей поддержал разработчика, отметив, что иногда, когда мы сосредотачиваемся на чем-то большом, мелкие вещи теряются.
Увидеть оригинальный твит можно по ссылке:
https://twitter.com/dan_abramov/status/1365107258280071168
#reactjs #javascript
Даже у самых известных и опытных разработчиков иногда происходят просветления в, казалось бы, базовых вещах. Так, один из главных разработчиков React и создатель Redux Даниил Абрамов — практически рок-звезда в своей сфере — написал в Twitter, что осознал, что тернарный оператор (от лат. ternaries — «тройной») называют так, потому что он обрабатывает ТРИ вещи. Пост уже собрал почти тысячу лайков.
Позже Абрамов добавил комментарий, в котором подчеркнул, что носители языка не понимают, с какими преимуществами начинают работу в мире IT. Один из пользователей поддержал разработчика, отметив, что иногда, когда мы сосредотачиваемся на чем-то большом, мелкие вещи теряются.
Увидеть оригинальный твит можно по ссылке:
https://twitter.com/dan_abramov/status/1365107258280071168
#reactjs #javascript
Devbook: поисковая система для разработчиков
Продолжаем рассказывать об интересных, но малоизвестных проектах. Группа разработчиков из Чехии выпустила десктопное приложение, которое позволяет выполнять поиск в Stack Overflow, искать и читать документацию, а также общедоступный код на GitHub из одного места без рекламы, контент-маркетинга и SEO. Создатели назвали приложение Devbook. Оно выполнено в Electron на React.js с бэкендом на Node.js и управляется с помощью горячих клавиш.
В качестве примера авторы сравнили свое детище с приложением Spotlight на macOS. При нажатии на глобальный ярлык Devbook появляется как оверлей, что сокращает количество переключений контекста при поиске информации.
Создатели приложения работают над системой расширений и призывают аудиторию делиться идеями по этому поводу. По их словам, любой пользователь сможет написать на JavaScript расширение для поиска информации на любых других ресурсах.
Со страницей разработчиков на GitHub можно ознакомиться по ссылке:
https://github.com/DevbookHQ/
#reactjs #nodejs #github #stackoverflow #electronjs #devbook #javascript #desktop
Продолжаем рассказывать об интересных, но малоизвестных проектах. Группа разработчиков из Чехии выпустила десктопное приложение, которое позволяет выполнять поиск в Stack Overflow, искать и читать документацию, а также общедоступный код на GitHub из одного места без рекламы, контент-маркетинга и SEO. Создатели назвали приложение Devbook. Оно выполнено в Electron на React.js с бэкендом на Node.js и управляется с помощью горячих клавиш.
В качестве примера авторы сравнили свое детище с приложением Spotlight на macOS. При нажатии на глобальный ярлык Devbook появляется как оверлей, что сокращает количество переключений контекста при поиске информации.
Создатели приложения работают над системой расширений и призывают аудиторию делиться идеями по этому поводу. По их словам, любой пользователь сможет написать на JavaScript расширение для поиска информации на любых других ресурсах.
Со страницей разработчиков на GitHub можно ознакомиться по ссылке:
https://github.com/DevbookHQ/
#reactjs #nodejs #github #stackoverflow #electronjs #devbook #javascript #desktop
Обновление состояния компонента с помощью useState и useEffect
Сегодня разберем проблемы с обновлением состояния с помощью хуков на React. Иногда возникают сложности с пониманием как правильно обновлять состояние компонента с помощью хуков useState и useEffect. Если попробовать изменить состояния с помощью useState напрямую, никаких изменений не произойдет. Дело в том, что, подобно setState в классовых компонентах, обновление состояния с помощью useState также является асинхронным и не будет отражено немедленно.
Кроме того, основная проблема здесь не только в асинхронном характере, но и в том, что значения состояния используются функциями на основе их текущего значения, а обновления состояния будут отражаться в следующем повторном рендеринге, при котором существующие значения не будут затронуты, а будут созданы новые. Внутри хуков состояние все еще находится в начальном значении, и если происходит повторный рендеринг, состояния обновляются в зависимости от того, вызвана функция снова или нет.
Если вы хотите выполнить какие-либо действия для обновления состояния, вам нужно использовать хук useEffect, как и при использовании componentDidUpdate. Важно помнить, что внутри хука useEffect, состояние все еще не поменяется, а при вызове вернет прежнее значение.
Полный тред со всеми возможными решениями можно найти по ссылке: https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately
#javascript #reactjs #usestate #useeffect
Сегодня разберем проблемы с обновлением состояния с помощью хуков на React. Иногда возникают сложности с пониманием как правильно обновлять состояние компонента с помощью хуков useState и useEffect. Если попробовать изменить состояния с помощью useState напрямую, никаких изменений не произойдет. Дело в том, что, подобно setState в классовых компонентах, обновление состояния с помощью useState также является асинхронным и не будет отражено немедленно.
Кроме того, основная проблема здесь не только в асинхронном характере, но и в том, что значения состояния используются функциями на основе их текущего значения, а обновления состояния будут отражаться в следующем повторном рендеринге, при котором существующие значения не будут затронуты, а будут созданы новые. Внутри хуков состояние все еще находится в начальном значении, и если происходит повторный рендеринг, состояния обновляются в зависимости от того, вызвана функция снова или нет.
Если вы хотите выполнить какие-либо действия для обновления состояния, вам нужно использовать хук useEffect, как и при использовании componentDidUpdate. Важно помнить, что внутри хука useEffect, состояние все еще не поменяется, а при вызове вернет прежнее значение.
Полный тред со всеми возможными решениями можно найти по ссылке: https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately
#javascript #reactjs #usestate #useeffect
Как использовать Styled-Components в React
Styled-Components — библиотека, реализующая принцип CSS-in-JS для React.js. Преимущества ее использования: автоматическое добавление префиксов для разных браузеров, удаление неиспользованных стилей и независимость имен компонентов.
Установить библиотеку в проект очень просто. Например, с помощью команды менеджера пакетов Yarn: yarn add styled-components.
Импортируем библиотеку. Далее объявляем наш “стилизованный” компонент StyledButton. Присваиваем ему импортированный объект styled, после точки пишем нужный тег, в данном случае button, и в одинарных кавычках — обычные стили CSS.
Эти стили функциональны, их можно динамически менять. В примере по ссылке динамически меняется цвет кнопки с помощью тернарного оператора. Нужный цвет объявляется в атрибутах объявленного компонента уже внутри обычного React-компонента, у нас это Profile. Эти атрибуты записываются в специальную переменную props, которую можно использовать, в свою очередь, для динамического изменения стилей. Styled-Components рендерят обычные HTML-теги, а значит, они принимают стандартные атрибуты, такие как type="submit" для кнопки или события, например onClick.
Основано на статье: https://dev.to/paulmercieca/how-to-use-styled-components-in-react-54o5
#reactjs #styledcomponents #javascript
Styled-Components — библиотека, реализующая принцип CSS-in-JS для React.js. Преимущества ее использования: автоматическое добавление префиксов для разных браузеров, удаление неиспользованных стилей и независимость имен компонентов.
Установить библиотеку в проект очень просто. Например, с помощью команды менеджера пакетов Yarn: yarn add styled-components.
Импортируем библиотеку. Далее объявляем наш “стилизованный” компонент StyledButton. Присваиваем ему импортированный объект styled, после точки пишем нужный тег, в данном случае button, и в одинарных кавычках — обычные стили CSS.
Эти стили функциональны, их можно динамически менять. В примере по ссылке динамически меняется цвет кнопки с помощью тернарного оператора. Нужный цвет объявляется в атрибутах объявленного компонента уже внутри обычного React-компонента, у нас это Profile. Эти атрибуты записываются в специальную переменную props, которую можно использовать, в свою очередь, для динамического изменения стилей. Styled-Components рендерят обычные HTML-теги, а значит, они принимают стандартные атрибуты, такие как type="submit" для кнопки или события, например onClick.
Основано на статье: https://dev.to/paulmercieca/how-to-use-styled-components-in-react-54o5
#reactjs #styledcomponents #javascript
Вышел набор новых API для разработчиков Relay
Компания Facebook выпустила Relay Hooks. Это набор новых, более удобных для разработчиков Relay API, созданных на основе React Hooks. Новые интерфейсы полностью совместимы с существующими, поэтому авторы рекомендуют разработчикам писать любой новый код с помощью Relay Hooks.
Создатели добились улучшения существующих API на основе контейнеров. Relay Hooks способствуют повышению опыта разработчика, особенно при повторном получении данных и разбивке на страницы. Имеют повышенную безопасность типов с большим охватом. Позволяют воспользоваться преимуществами функций компилятора для автоматизации задач. Также новые API полностью совместимы с React Strict Mode.
Интерфейсы Relay Hooks используются в Facebook с середины 2019 года. На них полностью работает новая версия сайта.
Полный текст релиза доступен по ссылке:
https://developers.facebook.com/blog/post/2021/03/09/introducing-relay-hooks-improved-react-apis-relay/
#facebook #reactjs #relay #reacthooks
Компания Facebook выпустила Relay Hooks. Это набор новых, более удобных для разработчиков Relay API, созданных на основе React Hooks. Новые интерфейсы полностью совместимы с существующими, поэтому авторы рекомендуют разработчикам писать любой новый код с помощью Relay Hooks.
Создатели добились улучшения существующих API на основе контейнеров. Relay Hooks способствуют повышению опыта разработчика, особенно при повторном получении данных и разбивке на страницы. Имеют повышенную безопасность типов с большим охватом. Позволяют воспользоваться преимуществами функций компилятора для автоматизации задач. Также новые API полностью совместимы с React Strict Mode.
Интерфейсы Relay Hooks используются в Facebook с середины 2019 года. На них полностью работает новая версия сайта.
Полный текст релиза доступен по ссылке:
https://developers.facebook.com/blog/post/2021/03/09/introducing-relay-hooks-improved-react-apis-relay/
#facebook #reactjs #relay #reacthooks
Новый React-фреймворк в Deno
Для React.js вышел новый фреймворк с открытым исходным кодом под названием Aleph.js. Он вдохновлен популярным фреймворком Next.js и находится на стадии альфа-тестирования. В качестве среды выполнения Aleph.js использует Deno.
По словам создателей, Aleph.js имеет множество полезных функций, которые позволят разработчикам настраивать веб-страницы и развертывать их динамическими способами. Среди прочих особенностей можно отметить:
— Использование общей структуры маршрутизации для создания веб-страниц и точки доступа API. Адрес страницы или точки доступа API берется из имени файла данных. Файлы данных могут быть в нескольких форматах, включая .js, mjs, .jsx, .ts, .tsx, .md.
— Поддержку SSR и SSG. Платформа поддерживает как рендеринг на стороне сервера, так и создание статических сайтов. Aleph.js по умолчанию выполняет предварительную визуализацию страниц, поэтому клиентскому браузеру не нужно делать всю работу.
— Горячую замену модулей (HMR). Функция Hot Module Replacement позволяет перезагружать страницу в браузере, обновляя текущее состояние приложения.
— Легкую кастомизацию. Фреймворк предоставляет множество вариантов настройки как в приложении JavaScript, так и на страницах, которые оно генерирует. Настраивая приложение, React по умолчанию, можно контролировать способ инициализации страницы или вызова API.
Создатели Aleph.js заявляют, что фреймворк будет работать с последними версиями Google Chrome, Microsoft Edge, Mozilla Firefox, Safari и Opera. Платформа, по их словам, возможно, может работать и в других браузерах, но они еще не были протестированы на совместимость.
Полный текст релиза можно посмотреть по ссылке:
https://blog.logrocket.com/first-look-at-aleph-js-a-new-react-framework-in-deno/
#reactjs #deno #alephjs
Для React.js вышел новый фреймворк с открытым исходным кодом под названием Aleph.js. Он вдохновлен популярным фреймворком Next.js и находится на стадии альфа-тестирования. В качестве среды выполнения Aleph.js использует Deno.
По словам создателей, Aleph.js имеет множество полезных функций, которые позволят разработчикам настраивать веб-страницы и развертывать их динамическими способами. Среди прочих особенностей можно отметить:
— Использование общей структуры маршрутизации для создания веб-страниц и точки доступа API. Адрес страницы или точки доступа API берется из имени файла данных. Файлы данных могут быть в нескольких форматах, включая .js, mjs, .jsx, .ts, .tsx, .md.
— Поддержку SSR и SSG. Платформа поддерживает как рендеринг на стороне сервера, так и создание статических сайтов. Aleph.js по умолчанию выполняет предварительную визуализацию страниц, поэтому клиентскому браузеру не нужно делать всю работу.
— Горячую замену модулей (HMR). Функция Hot Module Replacement позволяет перезагружать страницу в браузере, обновляя текущее состояние приложения.
— Легкую кастомизацию. Фреймворк предоставляет множество вариантов настройки как в приложении JavaScript, так и на страницах, которые оно генерирует. Настраивая приложение, React по умолчанию, можно контролировать способ инициализации страницы или вызова API.
Создатели Aleph.js заявляют, что фреймворк будет работать с последними версиями Google Chrome, Microsoft Edge, Mozilla Firefox, Safari и Opera. Платформа, по их словам, возможно, может работать и в других браузерах, но они еще не были протестированы на совместимость.
Полный текст релиза можно посмотреть по ссылке:
https://blog.logrocket.com/first-look-at-aleph-js-a-new-react-framework-in-deno/
#reactjs #deno #alephjs
Тестирование фронтенда на примере React-приложения
Расскажем о том, как тестировать фронтенд (и почему это важно — для тех, кто сомневается).
https://highload.today/testirovanie-frontenda-na-primere-react-prilozheniya/
#frontend #javascript #reactjs #storybook #typescript
Расскажем о том, как тестировать фронтенд (и почему это важно — для тех, кто сомневается).
https://highload.today/testirovanie-frontenda-na-primere-react-prilozheniya/
#frontend #javascript #reactjs #storybook #typescript
Зависимости JavaScript: все, что вы хотели знать, но боялись спросить
Кажется, что многие хорошо знают два типа зависимостей, но не очень знакомы с остальными тремя. Готовы себя проверить?
https://highload.today/zavisimosti-javascript-vse-chto-vy-hoteli-znat-no-boyalis-sprosit/
#dependencies #javascript #nodejs #npm #reactjs
Кажется, что многие хорошо знают два типа зависимостей, но не очень знакомы с остальными тремя. Готовы себя проверить?
https://highload.today/zavisimosti-javascript-vse-chto-vy-hoteli-znat-no-boyalis-sprosit/
#dependencies #javascript #nodejs #npm #reactjs
My marks – сайт и приложение для электронного дневника и мониторинга оценок учащихся
Голосование за проекты на конкурсе продолжается! Хотим вам напомнить, что есть ограничение на голосование с каждого IP-адреса. Поэтому просите ваших друзей отключаться от общественных сетей и голосовать с мобильных телефонов. А еще мы перенастроили кеширование, так что те у кого не проходили голоса, теперь смогут проголосовать.
Продолжаем знакомить вас с проектами, и теперь у нас на очереди приложение для мониторинга оценок от Павла Скибы.
My marks появился по двум причинам. Его разработчик Павел Скиба решил избавить родителей, учителей и учеников «от постоянных мучений» с узнаванием домашних заданий и оценок, а заодно прокачать свои скиллы в фулл-стеке на новых для себя технологиях.
Цель проекта – минимизировать количество времени, которое классный руководитель будет затрачивать на ввод оценок в систему, до одного часа в неделю (для класса с 30 учениками и количеством оценок до 500 на класс в неделю).
Сначала Павел написал веб-приложение с десктопной и мобильной версткой, а затем и нативное мобильное приложение на iOS и Android. Для этого он использовал IDE phpStorm, СУБД mySQL, Laravel для бэкенда, ReactJS для фротенда и React-native для создания мобильного приложения. Еще пришлось подключать дизайнера, тестировщика/маркетолога и знакомых в США – чтобы разбираться с бюрократической машиной Apple для включения в App Store.
Проект уже используется в пилотном классе, правда, разработку пока пришлось заморозить из-за занятости на основной работе. Но «идей море», маркетинговый и бизнес-план уже есть, говорит Павло.
https://github.com/PaulNSkiba/M.M.React-Native-v2
https://www.mymarks.info
Проголосовать за этот проект можно на странице https://highload.today/top-30-pet-proektov-igry-memy-boty-baraholki-svetofor-i-alkotester/
#phpStorm #mySQL #Laravel #PHP #ReactJS #Reactnative
Голосование за проекты на конкурсе продолжается! Хотим вам напомнить, что есть ограничение на голосование с каждого IP-адреса. Поэтому просите ваших друзей отключаться от общественных сетей и голосовать с мобильных телефонов. А еще мы перенастроили кеширование, так что те у кого не проходили голоса, теперь смогут проголосовать.
Продолжаем знакомить вас с проектами, и теперь у нас на очереди приложение для мониторинга оценок от Павла Скибы.
My marks появился по двум причинам. Его разработчик Павел Скиба решил избавить родителей, учителей и учеников «от постоянных мучений» с узнаванием домашних заданий и оценок, а заодно прокачать свои скиллы в фулл-стеке на новых для себя технологиях.
Цель проекта – минимизировать количество времени, которое классный руководитель будет затрачивать на ввод оценок в систему, до одного часа в неделю (для класса с 30 учениками и количеством оценок до 500 на класс в неделю).
Сначала Павел написал веб-приложение с десктопной и мобильной версткой, а затем и нативное мобильное приложение на iOS и Android. Для этого он использовал IDE phpStorm, СУБД mySQL, Laravel для бэкенда, ReactJS для фротенда и React-native для создания мобильного приложения. Еще пришлось подключать дизайнера, тестировщика/маркетолога и знакомых в США – чтобы разбираться с бюрократической машиной Apple для включения в App Store.
Проект уже используется в пилотном классе, правда, разработку пока пришлось заморозить из-за занятости на основной работе. Но «идей море», маркетинговый и бизнес-план уже есть, говорит Павло.
https://github.com/PaulNSkiba/M.M.React-Native-v2
https://www.mymarks.info
Проголосовать за этот проект можно на странице https://highload.today/top-30-pet-proektov-igry-memy-boty-baraholki-svetofor-i-alkotester/
#phpStorm #mySQL #Laravel #PHP #ReactJS #Reactnative
Rate Them App – сайт для оценки качества собеседований
Автора проекта Владимир Бондарчук долгое время работал на фрилансе с иностранными заказчиками и проходил технические собеседования с ними. Впечатления от собеседований всегда оказывались позитивными, все было очень корректно и вежливо. Когда в 2020 году начался карантин, многие украинские компании перешли на удаленную работу и Владимир решил попробовать с ними работать. Здесь, по его словам, он столкнулся с «мягко говоря, некорректным отношением со стороны интервьюеров» – впечатления от собеседований были совсем другие.
Его приложение берет на себя миссию: а) изменить отношение компаний и интервьюеров к процессу проведения интервью в лучшую сторону; б) сэкономить время и нервы кандидатам, которые ищут работу и активно проходят собеседования, – они смогут заранее посмотреть, что говорят про компанию другие кандидаты, которые уже проходили в ней интервью.
Весь проект Владимир делает в одиночку, используя технологии, в которых у него уже есть опыт: React.js, REST API, Spring Boot, MySQL, AWS, GitHub. Параллельно работает на постоянной основе Java-разработчиком.
Ссылка на проект: http://technicalinterviewsinukrainemustbebetterpreparedandmorepleasant.com
Проголосовать за этот проект можно на странице https://highload.today/top-30-pet-proektov-igry-memy-boty-baraholki-svetofor-i-alkotester/
#Reactjs #REST #MySQL #AWS #GitHub
Автора проекта Владимир Бондарчук долгое время работал на фрилансе с иностранными заказчиками и проходил технические собеседования с ними. Впечатления от собеседований всегда оказывались позитивными, все было очень корректно и вежливо. Когда в 2020 году начался карантин, многие украинские компании перешли на удаленную работу и Владимир решил попробовать с ними работать. Здесь, по его словам, он столкнулся с «мягко говоря, некорректным отношением со стороны интервьюеров» – впечатления от собеседований были совсем другие.
Его приложение берет на себя миссию: а) изменить отношение компаний и интервьюеров к процессу проведения интервью в лучшую сторону; б) сэкономить время и нервы кандидатам, которые ищут работу и активно проходят собеседования, – они смогут заранее посмотреть, что говорят про компанию другие кандидаты, которые уже проходили в ней интервью.
Весь проект Владимир делает в одиночку, используя технологии, в которых у него уже есть опыт: React.js, REST API, Spring Boot, MySQL, AWS, GitHub. Параллельно работает на постоянной основе Java-разработчиком.
Ссылка на проект: http://technicalinterviewsinukrainemustbebetterpreparedandmorepleasant.com
Проголосовать за этот проект можно на странице https://highload.today/top-30-pet-proektov-igry-memy-boty-baraholki-svetofor-i-alkotester/
#Reactjs #REST #MySQL #AWS #GitHub
