Category: Frontend

25
Фев
2021

☕ 25 полезных плагинов и библиотек JavaScript, о которых вы можете не знать

На «ванильном» JavaScript сейчас почти никто не пишет, но кроме мощных фреймворков есть и небольшие библиотеки с интересными возможностями. В наш список попали наиболее полезные из них, часто применяемые веб-разработчиками.

18
Фев
2021

Изменить переменную в дочернем компоненте через родительский

В дочернем компоненте есть переменная которую нужно очищать через родительский компонент. К примеру чтобы при нажатии на кнопку в род. компоненте очищалась переменная в дочернем. Как можно это реализовать?
Вот пример:
Род. компонент
<te…

17
Фев
2021

Почему тормозит сайт в Safari?

У клиента на safari жутко тормозит сайт, долгий отклик при наведении/клике и т.д. Хотя в других браузерах всё ок. Даже у меня на стареньком андроиде не лагает, хотя я понимаю что много контента и я не лучший оптимизатор.
Сайт https://inlov…

14
Фев
2021

Консоль выдаёт ошибку после перехода по Link. Uncaught Could not find router reducer in state tree, it must be mounted under "router"

при роботе с react router dom по переходе по Link выскакивают две ошибки
Uncaught Could not find router reducer in state tree, it must be mounted under "router"
интересно, что в адресной строке адрес меняется, а контент не рендар…

13
Фев
2021

Перейти на другую страницу в React при нажатии на компоненту

такой вопрос. Я хочу что-бы при нажатии на компоненту открывалась новая страница, например википедия. Пробовал повесить на компоненту:
onClick={()=>{
return <Redirect to={link}/>
}}

но это что-то не то. Кто знает как можно сдел…

11
Фев
2021

Как получить погоду?

Делаю приложение по показу погоды(html, css, js) . Использую API openweathermap. Если задаю параметры показать на 24 часа, то показывает с настоящего времени и на период в течении 24 часов. т.е. если я отправляю запрос днем, то данные за у…

11
Фев
2021

Yii2 Advanced с нуля до профи

Начала изучать yii2 advanced. Но никак не могу найти подходящие курсы, уроки чтобы прям пошагово по урокам было показано рассказано, все с нуля. Я полный ноль в фреймворках. Подскажите где найти нормальные курсы или уроки.

10
Фев
2021

⚛ 6 лучших практик для React-разработчика

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

React дает разработчику большую свободу действий, но большая сила требует большой ответственности.

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

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

1. Тестирование

Большинство начинающих программистов боятся тестирования – и в результате тратят много времени на отладку и дебаггинг, вместо того, чтобы писать код.

Но возрадуйтесь – нет ничего проще, чем тестирование проектов React. Вот тест, который проверяет правильность отображения компонента заголовка:

        it('checks if the title component is in the document', () => {
    expect(screen.getByText('Title')).toBeInTheDocument()
})
    

Вам понадобится две минуты, чтобы написать его. А в перспективе он сэкономит вам часы разработки. Для тестирования React-проектов обычно используются библиотеки react-testing-library и jest.

Если вы используете утилиту create-react-app и не пишете тесты, то у вас нет ни малейшего оправдания. Ведь вся инфраструктура уже настроена за вас – нужно только взять и написать ваш первый тест.

Начните практиковать тестирование как можно раньше, в будущем вы будете очень рады этому.

2. Структура папок и файлов

Новичку в React непросто разобраться с большим количеством файлов.

Очень часто разработчики группируют файлы в соответствии с их типом – экшены с экшенами, редьюсеры с редьюсерами.

        |-store
  |--actions
    |---UserAction.js
    |---ProductAction.js
    |---OrderAction.js
  |--reducers
    |---UserReducer.js
    |---ProductReducer.js
    |---OrderReducer.js
    

Выглядит логично, но по мере роста проекта найти нужный файл будет все труднее.

Гораздо полезнее организовывать файлы по фичам: все, что относится к юзеру, в одну папку, к продуктам – в другую:

        |-store
  |--user
    |---UserAction.js
    |---UserReducer.js
  |--product    
    |---ProductAction.js
    |---ProductReducer.js
  |--order    
    |---OrderAction.js
    |---OrderReducer.js
    

Теперь намного проще перемещаться по дереву файлов в поиске нужной функциональности.

3. Styled-components

Существует много способов использовать стили в вашем веб-проекте: от нативного CSS до разнообразных препроцессоров вроде SASS, предлагающих удобный синтаксический «сахар». Однако все эти подходы предполагают отделение стилей от компонентов и затрудняют их повторное использование.

        // внутри jsx-файла
<button className="btn-submit">

<button/>


// внутри css-файла
.btn-submit {

}
    

Если вам не нравится засорение JSX-разметки атрибутами className и хочется более абстрактного взаимодействия со стилями, обратите внимание на библиотеку styled-components. Она позволяет объявлять стили как отдельные компоненты и поддерживать код более чистым.

Styled-components поддерживает пропсы, благодаря этому удобнее работать с условными стилями.

        const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;
    

4. Функциональные компоненты

Классовые компоненты в React постепенно умирают, все активное сообщество перешло на компоненты-функции. Если вы еще не приняли на вооружение эту хорошую практику, то давно пора сделать это.

Хуки React – это возможно самое лучшее, что есть в библиотеке, так что используйте их на всю катушку.

5. Библиотеки для обработки форм

Обработка форм, вероятно, самая распространенная функция большинства веб-приложений. И самая нудная и болезненная. Если вы используете ванильный метод onChange, то прекрасно понимаете это.

К счастью, для React создано много хороших утилитарных библиотек, в том числе и для обработки и валидации форм. Например, Formik и react-hook-form. Нет никаких причин не использовать их. Простая декларативная обработка форм – мечта любого веб-разработчика.

6. Линтер и форматирование кода

Этот пункт относится не только к React, но и к программированию в целом.

Чтобы ваш код был чистым и аккуратным, используйте инструменты автоматического форматирования и проверки – ESlint и Prettier. Они могут не только выровнять все отступы, но и обнаружить распространенные ошибки и опечатки, которые вы могли не заметить, и в целом экономят много времени и нервов.

***

Итак, самые лучшие практики разработки на React:

  • тестирование;
  • грамотная файловая структура проекта;
  • использование функциональных компонентов;
  • и перекладывание всех рутинных задач на автоматизированные инструменты.
09
Фев
2021

Импорт и экспорт

Есть главный файл script.js и я хочу разбить код внутри на другие файлы, а в главном файле просто их импортировать, как можно это реализовать?
Моя попытка:
<script src="js/script.js" type="module" defer></scrip…

08
Фев
2021

Vaddin, необязательный параметр в url-ле,

Например,
Если параметра в урле нет, то должны отобразиться все заказы всех клиентов менеджера(https://…./orders),

если параметр есть, все заказы клиента(https://…./orders/{clientId}).
например,
Есть класс ManagerView отрисовывется…

05
Фев
2021

Скорость загрузки сайта

я начинающий в web’e,написал простенький сайт, проверил его в PageSpeed,для телефонов показывает 88, для десктопов 98.
У меня есть пару вопросов:
1)Возможно глупый, но все же:
Есть ли разница в скорости, если подключить .css отдельным файл…

04
Фев
2021

JavaScript или питон (django) [закрыт]

Вопрос таков: я новичок в программировании начал с того что не плохо было бы выучить вёрстку а потом ещё JavaScript (сейчас только html и учу css), но первым языком программирования стал пайтон/питон/python и сейчас выучил основу, а теперь…

04
Фев
2021

☕ Альтернативные фреймворки JavaScript: есть ли жизнь за пределами большой тройки?

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

03
Фев
2021

Чтобы пропс изменяемый в род. компоненте изменялся и в дочерней компоненте Vue js

Есть переменная которая изменяется в родительской компоненте, я передаю эту переменную в дочернюю компоненту и нужно сделать так чтобы эта переменная при изменении в род. компоненте сразу же менялась и в дочернем:
<template>
<di…

03
Фев
2021

Что нужно знать React-разработчику в 2021 году

Инструменты и ключевые навыки, которыми нужно владеть React-разработчику в 2021 году, чтобы быть востребованным специалистом.
— Читать дальше «Что нужно знать React-разработчику в 2021 году»

01
Фев
2021

Адаптивная вёрстка: что это и как использовать

Адаптивная вёрстка позволяет правильно отображать содержимое веб-сайта на любых устройствах. Рассказываем, как это сделать.
— Читать дальше «Адаптивная вёрстка: что это и как использовать»

31
Янв
2021

Есть ли официальные рекомендации. о том, сколько максимально kB JavaScript должно быть на странице?

Подскажите, пожалуйста, есть ли какие нибудь общие официальные рекомендации, о том, сколько максимально килобит JavaScript может быть на странице, что бы страницу можно было бы считать быстрой и удобной для пользователя, с точки зрения отр…

29
Янв
2021

Сравнить два массива и добавить класс Vue js

Есть два массива, нужно их сравнить и при каждом совпадении добавлять определенному элементу класс:
Первый массив
skills: [‘Validator’, ‘Pitch trainer’, ‘Organizer’, ‘Coach’, ‘Facilitator’, ‘LCA expert’],

Второй массив
annotations: [‘Vali…

29
Янв
2021

🕸 Из джунов в мидлы: зачем фронтенд-разработчику информационная безопасность?

Совместно с Яндекс.Практикумом рассказываем о популярных уязвимостях во фронтенде, о которых должен знать мидл или тот, кто хочет им стать. Также: лекции, курсы, XSS- SQL-сканеры и awesome-списки.

29
Янв
2021

Как отследить поведение на пользователя на сайте?

Мне нужно чтобы когда человек вышел с моего сайта, который сделан на Flask( python ), удалить фотографии из бд. Могу ли я сделать это на python? Если да напишите пж как, если нет, то напишите пж на каком языке это возможно и прикрепите пжл…

29
Янв
2021

Обращение к объекту в массиве

b и a это объекты и мне нужно в название их свойств вставлять название свойства другого объекта, вот функция:
sortBy(index) {
this.columns.forEach((col) => {
this.data.sort((a, b) => {
return b[col[index].fiel…