В это время в изоляции я действительно хотел воспользоваться этой возможностью, чтобы попробовать и развить свои навыки. Я хотел вернуться к JavaScript и улучшить свои навыки работы с CSS. Прошло так много времени с тех пор, как я прикасался к чему-то подобному во внешнем интерфейсе, и, по правде говоря, я боялся этого делать. Зная, как долго я не использовал javaScript, и зная, что я, вероятно, забыл все, я немного сопротивлялся, но это было то, что я действительно хотел сделать, потому что я действительно хочу развиваться как личность и улучшать свои навыки. Мне казалось, что это лучшее время, чтобы получить и создать новую рутину и вернуть изучение JavaScpript в мою жизнь. В том смысле, что я хотел бы заново выучить язык, и это не было бы слишком устрашающе или чем-то еще, что я не смог бы поддерживать.

Инструменты обучения, которые я использую

Я использовал бесплатный лагерь кода, чтобы начать изучение JavaScript, и я использовал Уэс Бос: курс JavaScript 30, чтобы вернуться к изучению JavaScript. Я хотел попробовать оба способа, чтобы увидеть, какой стиль обучения я предпочитаю, и сохранить вещи интересные, чтобы я не слишком скучал и избегал продолжения. Мне очень понравилась идея Курса Javascript 30. Я чувствовал, что это то, что я хотел сделать, он полон крутых и веселых упражнений, и вы буквально можете создать 30 вещей за 30 дней. Мне нравится этот вызов, и я захотел выполнить его за 30 дней.

Одним из упражнений, которые мы построили во время сделай 30 вещей за 30 дней, было набросок. Честно говоря, я просто взорвался, я уже был настолько впечатлен этим моментом, но мне нравится дизайн, и это было так весело. Я должен признать, что в первый раз многое вышло у меня из головы, но я знал, что хочу вернуться к этому и потратить на него больше времени. Я купил несколько курсов Уэса Боса во время распродажи, которую проводил Уэс Бос. Одним из которых является курс JavaScript для начинающих. Я хотел начать заново с самого начала, мне казалось, что я так давно ничего не писал на JavaScript, и вся ситуация с JavaScript просто вызывала у меня беспокойство, и я знал, что мне нужно сделать что-то упреждающее, чтобы решить эту проблему. Я знал, что лучше всего начать с самого начала, так как обратная связь будет положительной, пока я обновляю уже известные мне навыки. Одним из первых упражнений, которые мы построили после изучения некоторых основ, было набросок! Это немного отличалось от того, что я делал в сборке 30 вещей за 30 дней, но было одинаково весело. Пройдя это упражнение еще раз, я понял, что это то, над чем я хотел бы поработать сам и, возможно, попытаться каким-то образом добавить к нему небольшую функцию.

Новая функция

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

Я решил, что просто хочу поработать над простой функцией, которая может использовать некоторые концепции, которые я уже изучил, и просто сделать ее очень простой. Я подумал, что было бы неплохо увеличить и уменьшить размер кисти etch-a-sketch (я не слишком уверен, является ли это одной из оригинальных функций etch-a-sketch, но именно это я и собирался сделать). с 😅).

Как я создал эту новую функцию

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

Первое, что я сделал, это записал несколько заметок о шагах, которые, по моему мнению, мне нужно было предпринять, чтобы создать эту функцию. Я начал с написания примечаний к функциям, чтобы знать, какие функции мне нужно написать, чтобы создать эту функцию. Для этого мне понадобилась функция увеличения размера кисти для рисования, а также функция для уменьшения размера кисти для рисования.

Мне также нужно было прикрепить эти функции к чему-то, чтобы пользователь мог щелкнуть «что-то» в интерфейсе (на веб-сайте), чтобы иметь возможность увеличивать и уменьшать размер кисти. Я решил использовать для этого кнопки, поэтому мне понадобилось две кнопки, одна для увеличения и одна для уменьшения. Я подключил их с помощью прослушивателей событий к функциям, о которых упоминал выше.

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

Я создал функцию, которая создала новую переменную для новой ширины линии (размера кисти), чтобы увеличить ее на единицу для сохранения.

let newvalue = MOVE_AMOUNT++;

Затем я присвоил толщину линии (размер кисти) новому значению переменной увеличенной линии (которая хранится в переменной, которую мы создали выше) — newvalue

ctx.lineWidth = newvalue;

В совокупности это означает, что когда пользователь нажимает кнопку увеличения, он запускает эту функцию, которая создает новую переменную для увеличения ширины кисти на единицу, а затем назначается ширине линии, которая увеличивает размер линии (размер кисти). ). 😅 Затем я сделал то же самое для кнопки уменьшения. Я добавил свой код для этой функциональности ниже, если вы хотите увидеть, как все это выглядит. Внизу этого поста также есть ссылка на репозиторий, если вы хотите увидеть весь код.

Функции увеличения и уменьшения с прослушивателями событий

function strokeIncreaser() {
let newvalue = MOVE_AMOUNT++;
ctx.lineWidth = newvalue;
console.log('i am increasing' + newvalue);
}
function strokeDecreaser() {
let newvalue = MOVE_AMOUNT--;
ctx.lineWidth = newvalue;
console.log('i am decreasing' + newvalue);
}
increaseStroke.addEventListener('click', strokeIncreaser);
decreaseStroke.addEventListener('click', strokeDecreaser);

Ошибся в первый раз

Я чувствую, что вы должны приступить к созданию этой функции, зная, что вы можете потерпеть неудачу, по крайней мере, в первый раз? Но не пессимистично! Просто непредвзято, чтобы вы не потеряли мотивацию и не разочаровались в продолжении. Знайте, что у вас может не получиться с первого раза, но это нормально! Потому что это то, что вы ожидали. Это может быть странным взглядом на это. Это только то, что я нашел работы для меня в последнее время. Обычно мысль о том, чтобы сделать что-то подобное, ошеломляла меня, и я уже решал в своей голове, что не могу выполнить какую бы задачу я ни поставил. Но это новое мышление, позволяющее себе не делать все правильно с первого раза, было моим новым подходом к этим вещам в тот момент, когда я снова учусь.

Сделать перерыв

Одна вещь, которую я не думаю, получает достаточно внимания, это перерывы. Я нашел это таким полезным. Часто, когда я обнаруживал, что чувствую себя истощенным и будто теряю волю, я находил, что лучше сделать перерыв, позволить своему мозгу обработать все, что ты только что делал, и дать отдохнуть глазам. Вы обнаружите, как только вы сделали это, а затем вернетесь к этому, свежий взгляд и ясный ум меняют правила игры. Может быть так трудно уйти от проблемы, и я полностью это понимаю, я всегда думаю: «О, я просто попробую это в последний раз, а затем сделаю перерыв», но, честно говоря, вы поймете, когда вам нужно перерыв, ваше тело и разум скажут вам.

Действительно ломая проблему в моей голове

Так что действительно сломайте проблему. В прошлом я всегда как бы говорил себе, что разбиваю проблему на части. Но теперь я действительно думаю об этом, я не разбивал проблемы на достаточно маленькие куски, и я думаю, что это было потому, что я не совсем понял, что мне нужно, чтобы разбить проблему и понять, как далеко мне нужно разбить проблема начать работать над этим.

Не думать о том, как легко это может показаться другим людям

Одна вещь, которую мне пришлось действительно отпустить, — это не думать ни о ком другом, ни о том, насколько легко или трудно кому-то еще будет найти это. Мне просто нужно было сосредоточиться на собственном обучении и развитии. В прошлом все, что я когда-либо делал, это смотрело, как быстро другие люди приобретают навыки и функции, и действительно переутомлялись из-за того, что не могли работать или учиться так же быстро. Это создало у меня очень неприятное чувство, поскольку я пришел к выводу, что, возможно, эти навыки просто не для меня, что, поразмыслив, я думаю, действительно довольно грустно.

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

Как я применил новый подход, основанный на том, что я узнал во второй раз

Когда я снова попытался создать эту функцию после того, как сделал небольшой перерыв в кодовой базе (за это время я работал над этим каждое утро от 30 минут до часа). Когда я вернулся к нему, я вернулся со свежим умом. Я перечитал кодовую базу и снова попытался понять, что делает то, что происходит. Я действительно пытался разбить это на простые термины в своей голове, чтобы попытаться понять. Я думаю, что только на этот раз я добился прогресса. Поэтому, когда я понял некоторые детали и подумал, нужен ли мне этот фрагмент кода, я начал писать фрагменты этого кода и тестировать небольшие фрагменты, чтобы проверить, работает ли то, что я хотел сделать. Я работал с этим подходом, пока не сформировал завершенную функцию.

Вывод

Я так рада, что сделала это! Я чувствовал себя таким счастливым после того, как это было сделано, и я был действительно переполнен чувством достижения и стремлением создать больше. Несмотря на то, что это была одна функция, для меня это был большой шаг, поскольку это была одна функция, которую я никогда раньше не делал, я не знал, как я собираюсь это сделать, и я смог понять и реализовать ее. все самостоятельно. Это действительно помогло мне показать, что я учусь и совершенствуюсь, побуждая меня хотеть учиться больше и продолжать расти.

Ниже я перечислил некоторые полезные ссылки, которые я использовал, чтобы помочь мне создать эту функцию. Плюс несколько полезных ссылок, связанных с этим постом, например, множество крутых CSS-трюков! Я также включил ссылку на репозиторий git, если вы хотите взглянуть. Плюс изображения некоторых моих дизайнерских вдохновений и скриншоты моей работы.

Репозиторий Github

Я также включил несколько найденных изображений, которые вдохновили меня на создание кнопок для аркады.