DEV Community: Heather Hill-Leider

Playing in the Vuetify Playground

Heather Hill-Leider — Fri, 22 May 2020 21:42:48 +0000

If there is one thing I can say about patience, it is NOT a virtue of mine. No matter how hard I try. John and the team are prepping for Vuetify version 2.3 and are super busy with that, so the book has taken a back seat. I can't just wait around. After my last post, I received many responses about resources that have helped others learn programming. So, I'm going that route for a little bit until I can jump back into the book. It's kind of taken me backwards a little bit.

One of the tutorials I chose started me at the very beginning of learning plain text HTML code which I learned in high school. I went through a large portion of it for the sake of review but I was honestly pretty bored. 🥱
Another one I took had an instructor with a thick accent that was a little difficult to understand, and he was extremely monotoned. I literally had to take a break to go take a nap after an hour of that one. 😴😂
Then there was another one someone recommended to me that seemed promising. The instructor seemed good and so did the lessons, but the content was out of
date.🤦‍♀️

John is pretty much ready to push me in the deep end and wants me to create a new page in the documentation.🤓 It's a page that I recommended (way to go Heather 🙄) so he thought I should create it.
He gave me access to the Vuetify repository on my computer, and in doing so found a lot of areas for improvement. It was a terrible process that he was embarrassingly unhappy about. We are going to fix this problem by creating a guide to walk through the process. And I believe there are bugs in the process that are getting fixed as well.
The beauty in all this is that John is seeing areas that need improvement that he wouldn't have seen otherwise! So this enforces the value of my learning to program even more from a beginners stand point. We have needed to make Vuetify more beginner friendly and the way to do that is by me being the beginner that finds the bugs and the frustrations and gets them fixed for all the beginners that are going to come after me.

After he gave me access to the Vuetify repository, he showed me the Playground I can work in. So I just played around in the Playground a little bit to see what I could do and get a feel for it.
The Vuetify playground starts as a blank slate. It's a bare land of development possibilities!

Here's what I did:
I added a carousal and a navigation drawer that I got from the docs.

*Hello World screenshot*

*Code example of screenshot*

Here's the gist on Github

I feel like the code seems a bit bloated for how simple the page is and it probably is. I'm still learning how to simplify my code and how to determine what is needed and what isn't.
What I did find helpful was going through the Vuetify docs and copying components from Codepen and seeing how I can customize them to make them into what I wanted.
That in itself is probably something I could teach to new beginners one day. How to properly customize Vuetify components! IDEA!💡 File that in the future ideas folder

This was fun to play around with! It took me a long time to figure out though unfortunately. I'm looking forward to when I can put some of these components together quickly! I guess I should try not to get ahead of myself and get through some of these tutorials first before trying to jump into the unknown.

I know one day I'm going to look back on some of these and probably be embarrassed by them, but oh well. This is my beginning. This is where I'm starting and everyone has to start somewhere!

Where did you start?
How long did it take for you to get from ground zero to a great project that you were proud of? And what did you do to get there?
I would love to hear your stories!

Study and code, etc.

Heather Hill-Leider — Thu, 14 May 2020 15:21:29 +0000

I know it's been a little bit since my last blog post. I've still been studying but it's been off and on.

After a stormy's night sleep after creating my first app, I was so excited I wanted to do it again! I strayed away from the book again and asked John to help me. We created my first Github repository called learning-vuetify so I can commit my work.
After that, I watched a Vue tutorial video and created a simple little "Hello World" app. I committed both of these tiny little starter projects to my learning-vuetify repository in Github at github.com/heatherleider. It's not much to look at but it's public and available if you're interested.

After that, we were busy with the kids for a few days, then John and I both were injured moving furniture around and cleaning out the garage; so I took a couple days off. 😥 We're fine, just clumsy 🤦‍♀️.
So onward and upward! Our core team and contributors are creating a beginners guide which I am SO excited about!! I had the privilege to look over parts of it to make sure it was readable from a beginners standpoint and in the process, learned a lot! I have also been getting some great advice on different resources to use alongside the book to that were helpful to others!

At this point, I have surpassed what John has written in the book so far (he's still writing it), so while I'm waiting for the next chapter to be written, I'm going to study other avenues and try to keep my knowledge fresh.
I have watched a video on how to navigate through VSCode and am now working through a video on Javascript fundamentals. This way, I'll have some foundational knowledge when going back into the book and learning about how Vue and Vuetify work. I have also been reading through the Vue and Vuetify documentation so that I can get a good feel for it. One thing I've noticed is that I'm getting better at reading code and knowing what it means and what it does.

I had wanted to talk about the resources I used outside of the book to learn but honestly, there are SO many resources out there I'm almost getting overwhelmed with all the choices. I've talked to other self-taught devs and they have shared which resources they used to learn. I also found out about code-as-you-go learning which sounded enticing. On one hand, I find it comforting that there are so many options for training videos and self-taught learning resources for new developers. That way, I know if I fail, it's my own fault. But on the other hand, there are so many options its overwhelming and I don't know which one's are vouched for and which ones are most reputable. Especially for beginners very little prior coding knowledge. If you are self taught, have been through this yourself and can relate, please tell me how you overcame it.
How did you learn?
What resources did you use?
Which resources are found most valuable in the industry?

Creating a new Vue app! Chapter two

Heather Hill-Leider — Wed, 29 Apr 2020 04:42:20 +0000

Before I dive in to chapter two, I just want to say thank you to everyone who has reached out and offered encouragement and advice during this journey! There was one person who commented on one of my posts who advised me to practice and study at least an hour per day. I made that a goal and I would like to say that I kept that goal, but it has been SO hard! While being in quarantine, our kids have been home with us and out of school and daycare.
So, my time has been limited because the kids demand a lot of attention. As well as continuing to run Vuetify's business operations, the Leider household, and trying to keep up with my self care and hobbies too. I've seen posts, tweets, and memes about being bored during quarantine and I'm honestly jealous! If you're reading this and you have found yourself bored during quarantine, my advice would be to use it as time of self reflection. Start a hobby, create some art. Find beauty in this ugly world 😊.

Well, lets jump in to chapter two! I'm ready to create a new Vue app!

I started by creating a directory which the book walked me through and then created a new application by running vue create my-app in the VS Code terminal.
I was then prompted to choose a preset, between Babel and ESlint or to manually select features. I chose the Manually select features option to follow the book. John also mentions that by using this feature, we can save the selections as a preset for projects in the future.

These are the options I chose above. He says VueCLI will gather all the packages for each of the options I chose and download them to the computer.

Walking through my steps:

I mainly chose the defaults for each prompt and then saved the settings as a preset and named it "Learning Vuetify" so I can continue to use these settings for future projects throughout the book.

So, full disclosure; I had a meltdown today. Getting through the beginning parts of this chapter were frustrating because there were things that I thought should be simple for me that just weren't working and I got so fed up when I couldn't find the Sites folder I created earlier that I threw off my computer glasses and stormed off crying thinking I'm not cut out for this. queue expletives.
John talked me through it (hours later) and gave me some encouragement. I got on to him for using too much jargon in the book, assuming the reader knows what he's talking about, and not giving an explanation in those areas. It's hard being the guinea pig and coming in with only basic html knowledge from a high school web development class 😣. Fortunately, he's taking my feedback to heart and making adjustments so other beginners don't have the same issues.

So, moving on to creating this app. After I saved my settings, I installed the Vuetify CLI plugin. That was refreshingly easy after the annoying day I had with little things not working for me here and there.

A simple vue add vuetify command and then choosing the Default preset did the trick.
.
.
.
Oops... another mistake... I was supposed to choose Configure for the sake of following the book but Default is the recommended default for a new Vuetify application. John helped me fix my mistake and is even adding a section to the book on how to "go backwards" in a sense. Basically, delete what you did and start over because I sure as heck didn't know.

John helped me delete Vuetify CLI and reinstall using the Configure preset this time and I continued through the options. After that I learned how to "start the development server" by running yarn serve. Easy peasy.
After that was done, my application was viewable!

I DID IT!!!! After a LONG, hard day of tears and being dramatic, I did it!! I even personalized it, as you can see! I even added the text field because John and I were going through the Vuetify docs getting super excited about all the stuff I'm going to be able to do now! After the application was created, I had fun playing around with the different features I found in the docs. I didn't end up taking a screenshot of the finished product after I was done playing, but it's nothing special. Just messing around 😆. OMG... today was an up and down day. But it was worth it in the end. 😊

And here it is after I added the text field, a banner, and an alert! All using the Vuetify docs. It seriously felt good to have some success at the end of a rough day. I can see how people have a love/hate relationship with coding 😂. It can be so frustrating and then fun within the same project and day!

DAY TWO/STILL IN CHAPTER ONE

Heather Hill-Leider — Sat, 25 Apr 2020 19:18:10 +0000

I am anxious to get in to the nitty gritty of development but I'm still in the early stages and need to get these little details nailed down before I can jump in the deep end of learning anything about coding. So I'm still preparing my computer for the inevitable.

Next, I installed VS Code Extensions. I kind of strayed away from the book for this one. John had written a blog post awhile back that was extremely helpful and had a list of all the extensions I needed in one place. <https://medium.com/vuetify/productivity-in-vue-part-1-de56e9c1d97d>

I just went down the list and installed each one.

In other news, I came across this really awesome VS Code cheat sheet for hotkeys and I'm absolutely obsessed with it! <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf> I told John to add it to the book somewhere if he hasn't already.

He can move around VSCode so fast it's insane. #DevGoals! Back in the day, when I was a bank teller at the beginning of my banking career, I was the fastest teller because I memorized all the hotkeys and would almost never touch my mouse. That's seriously my goal here!

Now, lets talk about snippets! I've heard the core team talk about snippets and I smiled and nodded, but today I learned and realized how awesome they are! 😆

Snippets: Blocks of code that are repeatedly used. A snippet is created to streamline blocks of code that are commonly used so that you don't have to repeat yourself and save time. There are apparently devs who have created plug-ins and extensions of snippets but I am going to be using snippets related specifically to Vuetify.

I started typing a code example into VS Code and John noticed that it defaulted to "Plain Text" at the bottom. By clicking the language at the bottom, I was able to change it to Vue, so now VS Code knows I'm writing a Vue file. Minor detail. 🙄 Other wise it thought it was just a text file. 🤷‍♀️

I typed out an example of a Vue Component's basic structure ^^^ Isn't it a beautiful block of code?? :heart eyes:

From what the book says, we will create countless component files that will look like some form of the code above. So, snippets are used to save time and then expand where the code is defined.

I think I'm really going to like using snippets!

Alrighty! Looks like I'm just about done with chapter one! Woohoo! I installed and configured VS Code, learned some awesome keyboard shortcuts, installed extensions, and learned about snippets! In chapter 2, I get to create a new application 😱

Sounds like Chapter 2 is where it starts to get fun! Or super challenging... I guess we'll see.

Day One/Chapter One

Heather Hill-Leider — Mon, 20 Apr 2020 20:55:58 +0000

Today is day one of my coding journey. I'll probably try to post updates on my progress weekly. If you didn't read my previous blog post, I am embarking on a journey to learn how to code by following John Leider's book Learn Vuetify (estimated release Qtr 1, 2021).

I started by downloading VS Code — Visual Studio Code . VS Code is where the coding adventures take place. I just went to code.visualstudio.com to download it. John also references Vetur and ESLint as extensions to VS Code to download. He says they help the users coding experience.

In Chapter 1, he takes the reader through building a new Vuetify project using Vue CLI. I will learn how to install and configure editor extensions, keyboard shortcuts (I love keyboard shortcuts!), and how to create reusable code snippets. Seems easy enough…:famous last words: 😬

A list of other programs I installed before starting anything…

Git

Node

Yarn

Now that everything is installed (I hope…) we can move on…

I opened VS Code and went to the Integrated Terminal from the Command Palette (Win/Linux: Ctrl+Shift+P; Mac: Cmd+Shift+P)

From there John had to help me switch my terminal to GitBash because he said it was much better.

I followed the prompts to install VueCLI plugins under Getting Started on cli.vuejs.org. I got this WARN message below about setting up a git account which John said he will help me do later. So, I’m skipping that for now.

I have now moved from Command Prompt to GitBash below (which I just learned is similar to command prompt but prettier) His book had these $-signs in the prompts I was trying to type in and I kept getting errors. I got frustrated and he told me that its just in GitBash and I don’t have to type it in at all. Ugh! So… first thing to make me feel completely clueless 😒

But here we go… we’re learning and making progress!

I think that's enough for today. I imagine the first few days will just be getting set up with installations, extensions, plug-ins, preferences, etc. Those are important for sure which is why it's Chapter ONE! So, stick with me guys. I'm taking baby steps here. If you're following my journey and you're new to coding too, then let's keep going and dive on in! :D

My Coding Journey

Heather Hill-Leider — Sat, 11 Apr 2020 21:41:16 +0000

I joined the wonderful world of technology not too long ago when I came on board Vuetify to help run the company with my wonderful and loving fiance’, John Leider, who created Vuetify. My background is in banking and finance and my degree path was in Business Management, so I told him I would gladly manage all the operations and finances of the business. What I didn’t realize was that I really needed to know some coding. Even a little bit to understand what him and our team members were talking about and even how the business run. That brings me to my goal.
John is writing a book for beginners like me learn called Learn Vuetify that takes the reader from the very beginning of not knowing much to an advanced level of coding knowledge. That’s my goal! I want to learn how to code and be able to talk the talk, walk the walk, and code the codes with the best of them!
I had mentioned this fun little initiative to some people we met at some VueConf’s we went to and there was one guy who said, “I would be very interested to follow your journey. You should blog about it.” I was flattered by that and wondered if anyone else felt the same way. I talked to a bunch of other people at the conference about it and they all said blogging my journey through Learning Vuetify would be a great read!
So there ya go! Here’s the beginning of my journey and the blog. I’m not going to go through how-to steps in this blog since John’s book, Learn Vuetify, will do that and this is my experience of how I went through his book.
You will get to see me struggle through learning to code and everything that goes along with it. I imagine there will be some embarrassment, some excitement, and some frustration. So please leave me feedback and encouragement when needed because I know I will need it! Stay tuned!

Blessings 💋
~Heather~

https://medium.com/@heather_3720/my-coding-journey-738f438a9d96