📌🧐3 самых распространённых ошибок среди React разработчиков.
Нижеперечисленные ошибки - результат давления с целью уложится в дедлайны, недосмотров, и конечно отсутствия опыта работы с React, которое, тоже даёт о себе знать.
1. Не создают достаточно компонентов. Разработчики React часто допускают одну ошибку: они не создают достаточно компонентов. Как правило, есть два способа написания приложений: собрать все в одном месте (монолит) или разбить все на более мелкие части (микросервисы). По замыслу приложения React должны быть составными. Таким образом, мы можем создавать различные наборы компонентов, которые — вместе взятые — составляют всю страницу. Этот метод не только экономит ваше время, но и избавляет от стресса при отладке, поскольку вы сразу определяете, какой компонент связан с каждой ошибкой.
2. Написание логики в компонентах. При поиске правильного способа создания компонентов для повторного использования шаблон создания компонентов представления и контейнера часто является одним из первых. Компоненты представления связаны с тем, как все выглядит, в то время как компоненты контейнера связаны с тем, как все работает. Распространенная ошибка в приложениях React заключается в том, что разметка презентации и логика приложения объединены в один компонент. Недостатком этого подхода является то, что вы не можете легко повторно использовать любые компоненты или логику без копирования и вставки.
3. Не используют абсолютные пути Если вы когда-либо работали над приложением React, содержащим много компонентов, изображений, CSS-файлов и других файлов, вы согласитесь, что импорт файлов из разных каталогов может быть утомительным. Много раз мы будем импортировать файлы следующим образом: ../../../importone.js ../../../importtwo.js Мы уже можем видеть, что это не аккуратно, и изменение каталога файла приведет к сбою импорта. С выходом Create React App 3 теперь мы можем использовать абсолютные пути импорта. Для этого создайте в корневом каталоге файл jsconfig.json со следующим содержимым: // jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } Теперь вы можете импортировать файлы следующим образом: import React from 'react'; import { LINKS } from 'helpers/constants'; import Button from 'components/Button/Button';
Заметьте что это всего лишь малая часть ошибок, но эти являются самыми распрастранёнными среди Reactразработчиков.
Какой язык выбрать тестировщику для автотестов и почему это JavaScript?
Во-первых, развитые инструменты JavaScript позволяют быстро и эффективно запускать QA-процессы. Во-вторых, спрос на таких специалистов растет, а хорошо подготовленные профи — в дефиците. Хотите быть одним из тех тестировщиков, за кем охотятся HR-ы? Занимайте место на единственном в рунете онлайн-курсе «JavaScript QA Engineer». За 4 месяца практики вы освоите все необходимые инструменты и соберете портфолио решенных задач и проектов.
Программа рассчитана на специалистов с опытом ручного тестирования. Проходите вступительный тест, чтобы присоединиться к группе по спец.цене https://otus.pw/USoA/
1. Написание тестов. ✅Задача: написать модульные тесты (программируемые тесты небольших кусков кода, проверяющие их правильное функционирование). Эти тесты помогают выявить баги на ранних стадиях разработки, а в будущем упрощают регрессионное тестирование. В некоторых методологиях разработки модульные тесты пишутся до разработки самого кода.
Проблема: Сам процесс выбора тестов для написания и собственно их написание — очень кропотливый, прибавляющий значительную долю работы к основным задачам.
2. Работа над деталями, которые вам не нравятся. ✅Задача: реализовывать опции, которые вам по каким-то причинам не по душе или попросту не имеют смысла, но на них настаивает заказчик.
Проблема: отложить в сторону свои личные предпочтения и приступить к работе.
3. Работа с чужим кодом. ✅Задача: содержать, отлаживать или улучшать существующее приложение или кусок кода, написанные другим разработчиком.
Проблема: попытаться понять, как работает устаревший код и определить намерения предыдущего разработчика. Задача усложняется, когда разработчик уже далеко, а код плохо написан, почти не имеет комментариев и документации.
4. Нехватка времени. ✅Задача: успеть к дедлайну сделать всё и главное качественно.
Проблема: непридвиденные баги и ошибки в поисках решения которого, можно потерять день эффективной работы.
5. Погоня за технологиями: ✅Задача: делать проекты заказчика следуя их требованиям использовать "последние технологии".
Проблема: Мир IT развивается чуть ли не ежеминутно и разработчики сталкиваются с дилеммой - гоняться за новыми технологиями не возвращаясь к старым, или , наоборот, постоянно севршенствоваться в проверенных но уже постаревших технологиях.
📌👨🏻💻Разновидности методов объекта console в JavaScript.
Большинство из наших подписчиков, в основном новички, веб-разработке используют console.log() для печати значений в браузере.
Объект console в JavaScript предоставляет доступ к консолью отладки браузера, где вы можете вывести на экран значения переменных, которые вы использовали в своем коде.
log() - это всего лишь один из методов объекта console.
1. console.error() - Этот метод полезен при тестировании кода. Он используется для регистрации ошибок в консоли браузера. По умолчанию цвет сообщения этого метода - красный.
2. console.warn() - Этот метод также используется при тестировании кода. Выводит на экран предупреждения. По умолчанию цвет сообщения этого метода - желтый.
3. console.table() - Этот метод создает таблицу внутри консоли для лучшей читаемости. Таблица будет автоматически сгенерирована для массива объеков.
4. console.group() & console.groupEnd() - Эти методы позволяют группировать данные в отдельные блоки, которые будут иметь отступы. Вы также можете разворачивать и сворачивать эти группы.
5. console.count() - Этот метод используется для нумерования выводимых в консоль значений. Чаще всего этот метод используется в циклах для "визуализации" итераций.
1.Не повторяйся (DRY – Don’t repeat yourself)- сделайте общее решение - используйте много раз.
2.Документирование -организация процесса и собственных мыслей, исключающий потери времени и важных данных, очень важная првычка для хорошего программиста .
3.Считайте время - считая время вашей работы, вы сможете грамотно распределить свои силы для задач.
4.Разделяй и властвуй - многим знакома эта фраза. Эта фраза прекрасно описывает стратегию решения больших задач - разбивая их на более мелкие подзадачи.
5.Думайте о бизнес части - многие программисты склонны фокусироваться на изучении технической стороны своей работы и считают, что бизнес не имеет к ним отношения. "Главное – дайте хорошее ТЗ, а дальше я все сделаю в лучшем виде". Только для того, чтобы стать действительно мастером своего дела, вы должны понять, зачем то, что вы делаете, потребовалось бизнесу.
6.Никогда не прекращать учиться - в программировании, развивающиемся ежедневно семимильными шагами, не учится даже день-два - потеря огромного объёма информации. Вывод: Учитесь всегда.
- А как работает анимация загрузки этого сайта🤔?
⚠️Наверное все из наших подписчиков заходя на различные сайты когда-то задавались, с первого взгляда наивным, но на самом деле часто задаваемым вопросом среди новичков: - А как работает анимация загрузки этого сайта?
В этой статье мы попробуем дать основные понятия для понимания данной темы и раскрыть непонятные детали...Приступим.
👉🏻в HTML коде всё предельно ясно на интуитивном уровне. Подробно расскажем только про CSS - часть, где и таится вся красота веб разработки.
✅ про CSS Слой layer1 является слоем для анимации, а слой layer2 для фона. строка background: linear-gradient(0deg, rgba(0,54,255,0.2)5%, rgba(0,54,255,1)100%); ставит как цвет линейный градиент.
Более интересна строка animation: var 1.5s cubic-bezier(.17,.67,.83,.67) infinite;. В нём есть var как тип анимации, которая определена строкой ниже. 1.5s - интервал выполнения анимации (периодичность).
animation: var 1.5s cubic-bezier (.17, .67, .83, .67) - Функция cubic-bezier () определяет кубическую кривую Безье. Кубичиская кривая Безье определяется четырьмя точками P0, P1, P2 и P3. P0 и P3 - это начало и конец кривой, и в CSS эти точки фиксированы, поскольку координаты являются отношениями. P0 равен (0, 0) и представляет начальное время и начальное состояние, P3 равен (1, 1) и представляет конечное время и конечное состояние.
infinite - ключевое слово, которое определяет бесконечность анимации.
✅Как сделать красивый и современный индикатор выполнения(Progress Bar) для веб-сайтов, используя HTML, CSS и JavaScript? 🔴Примечание для новичков. Данный пример реализован в одном файле.
👉🏻Cтрока var id = setInterval(frame, 80); многим новичкам может показаться незнакомым и странным , но его определение предельно простое: Метод setInterval () вызывает функцию или оценивает выражение через определенные интервалы (в миллисекундах).
👉🏻function frame(), переданная методу setInterval в виде параметра, является "движущей" функцией для индикатора выполнения,которая будет выполняться каждые 80 миллисекунд (2-й параметр) , именно в этой функции есть строка, которая отвечает за прибавление значения индикатора (строка ниже): elem.style.width = width + '%';
👉🏻Метод clearInterval () ,вызванный после вызова метода setInterval () , очищает таймер, установленный с помощью того же метода setInterval ().
Что объединяет фотохостинг Pinterest и приложение для планирования Trello? Оба они написаны на JavaScript. Если английский — это основной язык современного мира, то JS — это основной язык современного интернета, ведь на нем написано большинство сайтов, которые вы посещаете каждый день.
Для тех, кто хочет погрузиться в разработку сайтов и веб-приложений SkillFactory запустили курс «Frontend-разработчик». За 6 месяцев обучения вы освоите HTML, CSS и Flexbox, кроссбраузерную и адаптивную верстку, JavaScript и React и добавите в своё портфолио 5 проектов; дополнительный модуль про soft skills поможет подготовиться к собеседованиям.
За время обучения вы создадите собственный сайт-визитку, разработаете аналог канбан-доски Trello и немного погрузитесь в backend.
🚀Узнайте, как получить скидку на обучение: https://clc.am/vpgdOw Нужно просто ввести промокод FRONT и получится 55%
Ты тоже сможешь сверстать собственный WildBerries, если выполнишь все задания.
Нас часто просят помочь начинающим разработчикам в освоении вёрстки. Поэтому мы решили запустить движуху, на которой за 4 дня можно сделать полноценный проект в портфолио.
Не банальный лендинг, а интернет-магазин.
Программа интенсива для тех, кто любит больше подробностей:
✅ День 1 — Достаем из макета изображения, цвета и шрифты — Создаем проект и нужные файлы сайта — Пишем HTML-разметку страницы
✅ День 2 — Пишем стили CSS для карточки товара — Продолжаем создавать каркас HTML-документа — Завершаем верстку страницы
Про React марафон в Телеграме. Что это? Формат обучения, который мотивирует вас смотреть короткие уроки 3 раза в неделю, сразу применять знания на практике, вовремя сдавать домашки и получать ревью кода от ментора как в реальном проекте.
В результате соберете веб-приложение на React за неделю, бесплатно.
Начало в понедельник, 25 января. Чтобы зарегистрироваться, запустите бота.
