DEV Community: Anthony Nanfito

One-Year of Learning Frontend Web Development

Anthony Nanfito — Sun, 20 Aug 2023 04:02:42 +0000

My top learning resources and why I like them

Introduction

I have spent most of the past two years learning to code. For the past year, I’ve primarily been focused on frontend web development.

In this post, I will share my top 5 resources (in no particular order) for learning web development and why I like them. I will also share a basic roadmap of what topics to learn as well as some thoughts on how to escape Tutorial Hell. Lastly, I’ve included some bonus resources — YouTube channels and websites — that have also helped me out along the way.

A quick note before we begin:

These are resources that worked for me. They may or may not work for you. So don’t take my word as “gospel” and think you have to follow only these resources. It’s a journey and we all take different paths to the same destination.

I hope that by sharing what’s worked for me, you can find something that works for you. Even if it means none of the resources on this list. By knowing what does not work for you you have a better idea of what does work for you.

This post is inspired by Swyx’s LearnInPublic and Open Source Knowledge approach to learning. You can find a condensed version of this list in my LearnInPublic repo.

What to learn first

When you’re learning something new it’s helpful to know where you need to go. In a traditional education setting, this is where curriculum and syllabi come in handy. However, as a self-taught learner, these are not always easily accessible.

Thankfully, in the age of the Internet and Open Source Knowledge, it’s quite easy to find a roadmap (i.e., syllabus) for what topics to study as a self-taught developer. Most of the time you can find these roadmaps with a quick Internet search (e.g., search for "roadmap for becoming a frontend developer").

You can also look at courses and use their outlines as a guide. Or you can also use job postings to see what the market wants, but this approach can be time-consuming and subject to change with time.

For myself, I eventually decided to invest in Scrimba’s Pro membership and gain access to the Frontend Career Path for two reasons:

They had the roadmap already figured out and it aligned with what I wanted to study
By putting my “money where my mouth is” I was more motivated to study and complete projects (whereas before I was kind of bouncing from one free resource to the next not learning or internalizing much)

Thus, the paid resource became my primary learning resource while the free ones I discovered became supplementary learning resources. This worked out well when I needed extra or deeper practice with a topic.

A basic roadmap

Learning frontend web development (or any programming language or framework) contains a lot of concepts. I won’t go into all of the details here because each person’s path will be unique to their situation. Some have the resources to go to a 5-day-a-week, 8 hours-a-day bootcamp while others need a slower, self-paced online learning environment.

Regardless of which option you choose, here’s a basic roadmap of the big ideas that your path should contain:

Understand the basics of HTML and CSS
BUILD SOMETHING
- A simple landing page will do
Learn JavaScript fundamentals
- OOP, data structures and algorithms, functions, etc.
BUILD SOMETHING
- A to-do list is the usual go to
Learn a framework (e.g., React, Vue, Angular, etc.)
BUILD SOMETHING
- At this point, you should be comfortable building a single-page app or maybe a multi-page website with an app

Again, this is a very rough, basic roadmap. I’ve intentionally left a lot of the finer details off the list. But you can think of this as “broad brush strokes” for what you need to study.

Escape tutorial hell by building something

In the above roadmap, I hope you noticed that I put “BUILD SOMETHING” in between each step. If you didn’t, I’m calling it out now because I think it’s important.

A lot of people talk about Tutorial Hell — being stuck going from tutorial to tutorial, course to course, without actually learning how to code. A lot of people talk about the best way to break out of Tutorial Hell is to build something. And I wholeheartedly agree. Let’s consider an analogy.

Learning to code by only watching videos is like learning to ride a bicycle by only watching videos. You won’t learn to ride until you put your feet on the pedals and you won’t learn to code until you put your fingers on the keyboard.

Let’s go a little deeper with this analogy. Let’s say you’re trying to learn to ride a bicycle. You buy a book that talks about the components of the bicycle and how they work. You watch a bunch of YouTube videos of people riding bicycles, watching what they do with their feet on the pedals.

Heck! Some of the videos even provide step-by-step instructions for riding the bicycle. You outline the steps in notes and rehearse them in your mind, but you haven’t set foot on a bicycle yet so you don’t know how to ride one yet. But you know humans can ride bicycles because you’ve seen them outside, in the real world.

However, you are not going to learn to ride a bicycle by only reading books and watching videos about it. Until you get on the bicycle, put your feet on the pedals and start pedaling, you’re not going to develop the muscle memory you need to balance and ride the bicycle.

The same is true for learning to code. You can read all the books and watch all the YouTube videos and take all the courses, but until you start to put your fingers on the keyboard and force your brain to figure out what goes where you won’t learn how to code.

This is why, I think, in addition to taking courses that have a “hands-on” approach you also need to build some things of your own. Now, you can build whatever you want. You create a clone of something or build from scratch. The choice is yours.

I do suggest starting small and building up from there. Build a single webpage first. Then build a multi-page website. (This is great practice for HTML and CSS).

Build a single-page web app with JavaScript (or with your preferred framework). Maybe it just counts the number of clicks each time the user clicks a button. Doesn’t need to be fancy or complicated, but in the process of building it you will learn, fortify your knowledge, and build your “muscle memory”.

Then move on to more complex projects. If you start something and realize you have some missing knowledge, great! You’re learning! Now, go out and find a resource (e.g., docs, tutorial, video, course) that will help you fill in the missing knowledge.

This is a slow and steady race. I know bootcamps and coding courses make promises about learning to code in a matter of months (or weeks!) — and maybe that’s true for a select few — but most humans need time to process to learn and do things well. That’s just how our brains work. It does not happen overnight.

Okay, I’ll get off the “soap box” and get to the list.

My top resources

These are the top resources that have made the most impact on my coding journey. I have included what they offer and why I like them. I have not listed them in any particular order of importance, but I will admit that Scrimba is probably my favorite from this list.

freeCodeCamp

Link: https://freecodecamp.org

What they offer:

Free verified certifications in frontend, backend, data analysis, machine learning, and more.
Full-length YouTube courses with industry experts and high-quality teachers
Self-paced hands-on exercises and projects

Why I like them:

To earn each certification you must complete and submit a series of projects
This hands-on approach forces you to get your hands on the keyboard and put your abilities to the test
Building projects is the best way to grow your skills and escape “tutorial hell”
Of all the free resources I’ve encountered, this is by far the best in terms of quality and quantity
They have a supportive learning community on Discord and in their website’s forums

Sololearn

Link: https://sololearn.com

What they offer:

More than 20 courses in Python, JavaScript, Web Development, Data, and more.
The lessons are “bite-sized” and can be completed in 5-10 mins.
Each lesson includes practice exercises and mini-project to test your skills
You get a certificate to validate your results
They have a free plan which offers bite-sized lessons and help from the community, but for as little as $6/month you can access unlimited practice, bonus exercises, and advanced goals and stats

Why I like them:

I took their JavaScript course and it was a great way for me to review and reinforce concepts like data structures and algorithms, OOP, etc.
Their free plan does limit how many times you can practice (it resets daily) which was fine for me because I was using them to review.
- However, if I were using this as my primary learning resource I probably would consider subscribing so I could unlock the unlimited practice.
- That said, I kind of liked the limited practice because it forced me to focus more since I only had a limited number of tries before I had to wait a day for it to reset.
- Also, when I did reach the max number of tries it forced me to walk away from the challenge and think about something else. When I came back to it, I usually had the solution sitting at the top of my mind. Funny how the mind works. Again, this is a slow and steady race — a marathon, not a sprint.

Scrimba

Link: https://scrimba.com

What they offer:

Hands-on project-based learning in their browser-based code editor
Free courses, but they also offer Pro and Bootcamp memberships
- Pro is self-paced and includes access to the online Discord Community
  - Priced at $18/month and billed every semester (6 months)
  - This level is significantly cheaper than most bootcamps
- Bootcamp includes everything in Pro PLUS weekly virtual bootcamp sessions with a cohort of fellow learners and a coach
  - Priced at $700 for 3 months
  - Gain access to study groups, mentors, code reviews, group projects
  - I haven’t used it, but I think it’s a great price for what they offer especially when compared to other “bootcamps” offering the same

Why I like them:

A*mazing in-browser editor that lets you directly edit whatever code the instructor is discussing. It’s amazing!*
- Much better than switching windows/tabs between a YouTube tutorial and a code editor
- It feels like you and the instructor are using the same computer. In a way, you’re pair programming together
Fantastic instructors that break down ideas and concepts into easily manageable pieces
- Most videos are around 5 minutes long but never longer than 8-10
They have an active and supportive community
- Weekly live sessions covering a variety of topics from practical coding skills to soft skills and everything in between
- Forums and channels to ask others for help
Strong “hands on the keyboard” approach to teaching
- Throughout each module, and indeed in most videos, the instructor gives you challenges to practice what you’re learning.
  - Sometimes this is extending something you’ve already learned. Other times it’s deleting all the coding and starting from scratch.
  - This is a great way to build “muscle memory” and learn to code
- Each module ends with a solo project where you get to put your skills to the test.
  - Projects are outlined with a set of requirements and a Figma file
  - Plus, when you finish you can share with the community and get feedback
  - You can also add them to your portfolio
A great weekly podcast where they alternate between interviewing newly hired devs and seasoned pros
- I love hearing about transitioning into tech from both sides: beginners and experts.

Frontend Mentor

Link: https://frontendmentor.io

What they offer:

Free and paid challenges to build your portfolio and test your skills
- I think there are over 100 free challenges
Challenges range from beginner (e.g., a preview card) to guru (e.g., full-scale website):
- Newbie
- Junior
- Intermediate
- Advanced
- Guru
Their Pro membership gives you access to:
- Professional designs for multi-page websites
- Sketch and Figma design files (these aren’t included in the free challenges so you have to do your best to “eyeball” the design)
- Mobile, tablet, and desktop layout designs
- Professional design system
Each challenge you complete earns you points, once you’ve earned enough points you can gain access to their hiring platform
- The more difficult the challenge the more points you can earn
- You can also earn points by giving feedback to others in the community
Feedback on challenge solutions
- An automated process gives you basic feedback on your challenge submission
- The community can see your solution and provide targeted feedback
- You can also see other solutions, give feedback, and learn from their approach

Why I like them:

Great opportunity to practice building things.
- I’ve only used their free challenges, but I love them nonetheless.
Great for when you just want to get your hands on the keyboard but don’t know what to build
- The design decision is already made for you so you just have to build. No need to worry about the following because it’s already decided:
  - What color scheme should be used?
  - Where should the button be placed?
  - What font family should be used?
Supportive and helpful community — both on the website and on Discord.

Tip:

If you’re not used to receiving feedback, I suggest first finding a way to separate yourself (i.e., your ego) from your work. I did not do this in the beginning and it stunted my growth a little bit (plus it didn’t make me want to use the platform).

It took me some time but I figured out that my work is not who I am. They are separate entities. So a critique of my work is not a critique of myself as an individual.

Moreover, programming is about iteration and getting better which means making revisions when you receive valuable and constructive feedback. The keywords there are “valuable” and “constructive”. If someone is being an @$$h0le, then ignore them.

That said, I’m still human and still struggle with putting the ego aside so, like all things, it’s a work-in-progress.

In addition to receiving feedback, you also have the opportunity to give feedback. This is a great way to articulate what you know and understand about programming and the web development process. And, of course, it gives you a chance to connect and help others.

Kevin Powell’s "Conquering Responsive Web Design" course

Link: https://courses.kevinpowell.co/conquering-responsive-layouts

What they offer:

Free 21-day course
Responsive layouts with a mobile-first approach to web design
Working with responsive units
Understanding flexbox
Mastering Media Queries

Why I like them:

The course is slowly delivered over 21 days
- Some days are intentional rest days so you have time to process the information and work on the projects
Practical examples and hands-on projects
Kevin is a great instructor
- He breaks things down into easy-to-understand pieces
- His passion for CSS shines through and it’s infectious
His mobile-first approach to responsive web design changed how I create webpages and websites
- He argues that since HTML is already responsive by default that it only takes a few “tweaks” to the CSS and media queries to make a site responsive to different screen sizes
- I’ve previously blogged about his approach on how HTML is responsive by default and how you can use 3 lines of CSS to create responsive websites
- And I expanded on his ideas from the course in this post about three methods for centering elements with CSS

TLDR;

If you want the speedy version of this list, here’s the condensed version of my favorite web dev resources:

freeCodeCamp.org - I completed their Responsive Web Design course. It was very hands-on and focused on building projects. This was a great way for me to get my “feet wet” but I found I wanted to go deeper.
Sololearn.com - I used this one to reinforce my knowledge of JavaScript, Object Oriented Programming, and Functional Programming
Scrimba.com - This was a game-changer for me. Their tutorials are entirely hands-on and with their in-browser code editor you can pause the video and work directly with the same code the instructor was working with. It’s very hands-on and has lots of great projects. They have lots of free courses to choose from but I signed up for their pro-membership ($18/month billed every semester) to access their Frontend Developer Career Path which takes you from HTML basics up to Advanced React and Getting Hired. They’ve also got a great online community for support.
Frontendmentor.io - Once you know a little bit, I recommend checking out the challenges here. It’s a great way to build projects, test your skills, and get feedback. They have a paid plan, but there are plenty of free challenges to choose from as well.

Other Resources

YouTube Channels

In addition to the above courses, I have also found the following YouTube channels helpful during my journey.

freeCodeCamp
- What they offer: Huge selection of free, full-length courses on a variety of programming topics
- Why I like them: A great companion to the challenges they offer on their website. I would consider the YouTube videos to be the “lecture” part of the course and the challenges on their website to be the “lab” part of the course where you put the ideas into action.
Kevin Powell
- What they offer: In addition to his free and paid courses, Kevin has some great YouTube videos and tutorials primarily focused on CSS.
- Why I like them: As noted above, I enjoy Kevin’s enthusiasm for CSS and responsive web design and he does a great job of breaking ideas down into smaller components.
WebDevSimplified
- What they offer: Kyle offers courses and tutorials on web development.
- Why I like them: Kyle’s teaching style is simple, approachable, and he does a great job of breaking concepts down into easy-to-digest chunks. I often watch his videos when I needed extra help with JavaScript or React.
Code with Ania Kubów
- What they offer: Ania offers courses and tutorials on a variety of coding subjects from frontend to backend.
- Why I like them: She emphasizes learning to code by building. A lot of her tutorials and projects are centered around game development so if you like games, she’s worth checking out. Because of this approach, it’s a great way to see how JavaScript concepts like for loops, map() method, forEach(), and others work in a real-world setting instead of an abstracted coding challenge you might see on a website like Codewars or LeetCode.

Websites

Internet Search Engines — DuckDuckGo, Ecosia, Google, etc.
- There’s lots of great, helpful content on the Internet — docs, blogs, tutorials — but you need a way to find it. That’s where search engines come in.
- If you’re not skilled at using one, you’ll want to learn all the ins and outs of performing searches. Here are some resources for learning how to refine your search engine technique. Note, these resources use Google as their example, but most of the techniques mentioned should work for other search engines as well. If not, you can always look it up! 🙂
  - Internet Basics - Using search engines (Tutorial by GCF Global featuring videos and images with examples)
  - Advanced Searching with Google Search Engine (9min YouTube tutorial by Loi Liang Yang)
  - Google Like a Pro – All Advanced Search Operators Tutorial [2023 Tips] (54min course by freeCodeCamp)
MDN Docs
- If a dictionary is where writers go to look up definitions, this is where programmers go to look up the meaning of code.
- It took a while for me to get used to reading the docs (and sometimes it’s still doesn’t make sense), but this is usually the first place I go when I’m trying to use a method or operator.
ChatGPT (or your preferred AI/ML chatbot)
- I use it like a “coding buddy” by asking it questions when I’m stuck, usually, I do this after doing an Internet search and it has yielded a helpful result
- Most of the time it’s spot on with its advice, but I almost always have to modify the code it provides to make it fit my situation which I think helps me understand it more deeply.

Conclusion

Those are the top resources I’ve used throughout my coding journey. Each person will have their unique challenges when learning to code so don’t take my word as “gospel”. What worked for me may or may not work for you. However, I hope by sharing these resources will lead your closer to finding something that works for you.

Thanks for reading

Thanks for reading this post. What is your favorite learning resource? Tell me what it is and why you like it in the comments below. Hearing your thoughts makes this more of a conversation and helps us both learn. Happy coding!

How-to: Three Methods for Centering with CSS

Anthony Nanfito — Sun, 06 Aug 2023 09:17:36 +0000

Introduction

In web development, knowing how to center things with CSS is an essential skills. Like many things in the programming world there is more than one way to do it. Some ways are better than others, but there’s not always a best way. It often depends on the context of the situation.

In this blog post, I’ll share my three favorite ways for centering elements using CSS. I first learned about these methods from Kevin Powell’s ‘Conquering Responsive Layouts’ course (and in fact, wrote a short blog post in December 2022 about it, but only covered the first method in that post). Here, I’d like to discuss all three methods: margin and max-width, flex, and grid.

I’ll be assuming you have some familiarity with CSS, flex, and grid. Also, for demonstration purposes I’ll be using the example of a blog website with a single-column layout. I will provide snippets of code throughout the post, but if you’d like to see the source code and live example for these methods, you can view the repo here and the live site here.

Method 1: Using `margin` and `max-width`

This is probably my favorite way to center elements in CSS. I like it because it’s quick and simple. However, because of its simple approach this also means it’s best used in simple situations. This method works best when you want to center something directly in a vertical column. More complex layouts will require a different or combination of techniques.

If you want to center the body (or any element within its parent container), a quick and easy way to do that is with margin and max-width:

/* METHOD 1: Using margin and max-width */
    .blog-post {
      margin: 0 auto;
      max-width: 600px;
    }

In the margin property, the first value sets the top and bottom margin are set to 0 so that they touch whatever is above and below them. In other words, there’s no gap between the elements but if you wanted to have some space you could set the first value to something other than 0.

The second value, auto, will automatically set the left and right margin to the same amount with whatever space is available. This ensures that the element is centered along the vertical axis of the page.

Then the max-width property ensures that the width of the element does not extend beyond the numerical value. In this case, the maximum width will be 600px but it can be set to whatever value is desired/needed.

It’s not used in this example, but you can also add width: 80% (or whatever percentage you desire) so that the element fills 80% of the available width. This will allow for a little bit of space on the left and right. This is ideal on mobile or tablet devices where you might want a little bit of space between the left and right edges of the content and the edge of the screen.

NOTE: When max-width is used in conjunction with width: 80% the element will fill 80% of the available width up to the maximum width.

If you’d like to see a demonstration of this in action, you can view a live example and the source code.

Method 2: Using `flex`

Another common method for centering elements is to use flex with justify-content and align-items. Continuing with the same example let’s look at how we would use this to center items within a single-vertical column:

/* Method 2: Using flex */
.blog-post-container {
  display: flex;
  flex-direction: column; /* REMINDER: with `column`, the main axis is horizonal and cross axis is vertical */
    align-items: center; /* `align-items` still affects the cross axis, but with column it works vertically */
}

Here we’ve set the .blog-post-container class to have a display of flex and centered its children elements using align-items. Since the flex-direction is set to column the align-items affects the cross axis which the vertical axis. This is what places the elements within the center of the flex container.

If you’d like to see a demonstration of this in action, you can view a live example and the source code.

Method 3: Using `grid`

Lastly, we can use grid to center things too. Using our same blog website example, let’s look at how we would do this:

/* Method 3: Using grid */
.blog-post-container {
     display: grid;
 }
.blog-post {
  justify-self: center; /* this places the div in the center of the grid-column */
    max-width: 600px; /* this prevents the div from filling the entire space */
}

Here we have a little bit of a different set up. We have to set the container (in this case .blog-post-container) to use grid while at the same time setting the properties for the blog post itself.

Since we’re only working with a single column layout we don’t need to worry about grid-template-columns or grid-template-rows or grid-template-areas. Instead, we can focus our attention on the .blog-post class.

In this above snippet, we can use the justify-self property to center this class within the grid container. And just like with Method 1 we want to set the max-width property so that the content doesn’t span the entire width of the column or window.

If you’d like to see a demonstration of this in action, you can view a live example and the source code.

Conclusion

Those are my three favorite techniques for centering elements. These work best within a single-column layout, but can also be used within more complex layouts (if you want to center something within a section).

I mostly lean toward using Method 1, but what’s great about all of these is they don’t take up more than a few lines of code. This makes them great in a pinch when you want to center something quickly without worrying too much about the layout.

If you’re looking to learn more about these techniques and other ways of designing responsive web design, check out the resources listed below. Note, these are NOT affiliate links. These are just the resources I found useful in learning about these concepts. You can also check out the References section for the documentation I referenced in writing this post. Happy coding!

Resources

CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet (freeCodeCamp) - In-depth tutorial on how to use CSS flex including flex-direction, justify-content, align-content, align-items, align-self, and more. Plus, there’s a video tutorial linked in the post.
Complete CSS Grid Tutorial with Cheat Sheet (freeCodeCamp) - In-depth tutorial on how to use CSS grid including grid-template-columns, grid-template-rows, grid-template-areas, and more. Plus, there’s a video tutorial linked in the post.
Kevin Powell’s ‘Conquering Responsive Layouts’ course - Free 21-day course which gradually guides you through designing mobile-first websites using flexbox and other great tools
Scrimba’s Learn CSS Grid - Free interactive tutorial spread out over 18 tutorials building a website, an image grid, and an article. Plus, you’ll learn how to combine CSS grid with flexbox.

References

Aligning Items in a Flex Container (MDN Docs)
CSS grid layout (MDN Docs)
CSS Grid Module (w3schools)

Thanks for reading

Thanks for reading. I hope you found it useful. What are you favorite techniques for centering content with CSS? Let me know in the comments. Hearing your thoughts makes this more of a conversation and helps us both learn. 🚀

Git Command Cheatsheet: My Top 7 Git Commands

Anthony Nanfito — Sun, 30 Jul 2023 14:35:43 +0000

Introduction

This week I took a deep dive into Swyx's philosophy of Learn in Public. I first heard about this idea on Episode 125 of The Scrimba Podcast. This episode focused on the topic of developing a personal brand and featured clips from previous episodes. Including Episode 18 which featured an in-depth interview with Swyx and his book, The Coding Career Handbook.

I listened to both episodes and was so inspired that I purchased the book, joined the community, and (re)started my dailyDevLog journal (a personal journal I use to track my daily progress on projects and what I’m learning).

As a former educator, I fully understand how beneficial writing-to-learn can be. As the quote often attributed to Albert Einstein — but more likely came from Lord Rutherford of Nelson — says, “if you can’t explain it simply, then you don’t understand it well enough”.

That’s always been my goal with writing (both online and offline), but I haven’t been good about writing regularly since I completed my first round of the #100DaysOfCode challenge. My blog posts have been sporadic and I know that regular reflection is what helps our brains process and retain information.

I hope that the resources and inspiration I’ve found in these podcast episodes and in Swyx’s book will help me pursue that goal with renewed energy and commitment.

So, without further ado …

I present to you my latest installment toward that goal. Here is a quick list of the most common git commands I use when working on a project. In addition to this blog post, I’ve also made a GitHub repo, aptly titled LearnInPublic, in hopes of building a collection of things I’ve found useful along my programming journey.

`git init`

git init

What it does:

Initializes git repo in from CLI

Useful when:

You start your project! Git will track changes within your repo, but first you've got to initialize it.

`git clone <URL>`

git clone <URL>

What it does:

Clones a remote repo (i.e., creates a copy on your local machine)

Useful when:

Cloning an open-source repo to your local machine so you can make contributions
Cloning your own remote repo to your local machine

`git status`

git status

What it does:

Checks the status of the repo
- Are there any unstaged files?
- Are files staged and ready to commit?

Useful when:

You can't remember if you're last set of changes were committed or not

`git remote add origin <URL>`

git remote add origin <URL>

What it does:

Adds a remote origin to a local repo

Useful when:

You've created a local repo and need to connect it to a remote repo
- In other words, this tells git where to send the files when you use the git push command

`git add <FILENAME>`

git add <FILENAME>

What it does:

Adds untracked changes in file to staging (i.e., they're ready to commit to the repo)

Useful when:

You've made changes to a project and need to stage those changes before you commit the changes to the repo
- In other words, you're happy with the changes and ready to "store" them

Variant

git add .

What it does:

Adds all files with untracked changes to staging

Useful when:

You've made mutliple changes to multiple changes. With git add you need to list individual file names after the command so this is useful when you've made lots changes.

CAUTION: Including all files may also include hidden files (e.g., .DS_Store) within the directory where your repo is located. These kinds of files often contain system metadata, however you may not want them in your repo repository, especially if it's a public one.

Further, you may be working on a project that contains access keys. If you add these files and commit them, then push them to a public repo they become available to the public. This could be bad news if these keys give access to a private database.

To solve this, you can either move these files to another directory or add them to a .gitignore file. This file contains a list of files and directories that git will ignore (i.e., it won't track any changes, stage them for commits, or push them to remote repos).

`git commit -m "<COMMIT MSG GOES HERE>"`

git commit -m "<COMMIT MSG GOES HERE>"

What it does:

Commits the file changes to the repo along with a message about the changes made (e.g., "fix broken link")

Useful when:

You're satisfied with the changes you made and want to "save" them

Variant

git commit -am "<COMMIT MSG GOES HERE>"

What it does:

Adds all untrack files to staging, then commits them (it's a 2-for-1 command)
- Here the -am tag is for adding the untracked files to staging (the a part) and attaching the message (m) for the commit

Useful when:

You've made a lot of changes and don't want to have to type two separate commands for add and commit (i.e., ~~you're feeling lazy~~ you're a productive programmer and want to save time)

`git push`

git push

What it does:

Pushes commits to remote repo

Useful when:

You've made your changes and its time to share them with the world!

Variant

git push --all --set-upstream origin

What it does:

This sets the upstream of the repo to the remote repo so it will push future commits to the remote repo

Useful when:

You've created a repo on your local machine and you want to push the files to a remote repo

Note: Unless you decide to change the upstream, you only need to this once. I usually do it on my first push.

Other commands

git branch <NAME>: Creates a new branch with desired name (e.g., "add-feature")
git checkout <NAME>: Moves to specified branch (e.g., from main to add-feature)
git checkout -b <NAME>: Creates new branch and moves to that branch
git branch -d <NAME>: Deletes specified branch
git fetch: Fetches new changes from remote repo
git merge <NAME>: Merges changes from the named branch into the current branch

Resources

Git Documentation - Docs are always a good starting place when you want to learn how to use a tool
Learn Git Branching - Fun interactive resource for beginners to learn how git branching works

References

What is a .DS_Store file?

Thanks for reading

Thanks for reading. I hope you found it useful.

What git commands to you use the most? Did I leave any out?

Let me know in the comments. Hearing your thoughts makes this more of a conversation and helps us both learn. 😄

Project Showcase: Tenzies Clone

Anthony Nanfito — Fri, 14 Jul 2023 08:49:11 +0000

Intro

In my blog posts, I reflect on my journey and share things I’m learning along the way. You can find me on Mastodon, Twitter, GitHub, and LinkedIn.

In this blog post, I’ll be sharing some thoughts on a recent project I completed: a clone of the Tenzies dice game. Thanks for stopping by and happy coding!

Tenzies Clone

Overview

This project was introduced in Module 11 "React Basics" of the Scrimba Frontend Career Path. It is a clone of the popular dice game, Tenzies, and is played the same way.

The goal of the game is to roll the 10 dice until they are the same. During gameplay, players can set aside the number they are trying to reach -- this means these dice will not be rolled during the next roll. They then continue rolling and holding dice until all are the same number.

The bulk of this project was completed during follow-along tutorials, however, the following features were completed independently:

Ability to track time
Store the player's best time in local storage
Track the number of rolls
Use CSS to add dice dots

Built with

HTML
CSS
JavaScript
React JS

Screenshots

My big takeaway: How to use CSS Grid

This project packed a lot into it! It was a great opportunity to review key practices with React, such as useState and useEffect, but I think my biggest takeaway from this project was learning how to use CSS grid to create the dice dots.

As I learned from this DEV.to blog post by Edwin, the trick here is to use CSS grid with grid-template-areas and the nth-child() pseudo-selector to specify where the dots (or pips) will appear. This is because the dots on an actual dice fall into a 3x3 grid which makes CSS grid a great choice for displaying the dots.

Here's an excerpt of the CSS:

.die-face {
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); 
  padding: .20em;
  width: 45px;
  height: 45px;
  border-radius: 5px;
  cursor: pointer;
  display: grid;
    /* each area (or letter) will be taken by a dot */
  grid-template-areas: 
      "a . c"
      "e g f"
      "d . b";
  flex: 0 0 auto;
}

.pip {
  display: block;
  align-self: center;
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0;
  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}

/* these assign the dots to the appropriate grid areas */
.pip:nth-child(2) {
  grid-area: b;
}

.pip:nth-child(3) {
  grid-area: c;
}

.pip:nth-child(4) {
  grid-area: d;
}

.pip:nth-child(5) {
  grid-area: e;
}

.pip:nth-child(6) {
  grid-area: f;
}

/* this places the dot of the 3 and 5 die in the center */
.pip:nth-child(odd):last-child {
grid-area: g;
}

I found this solution to be particularly clever and helpful in completing the independent portions of the project. For a full explanation, I strongly encourage you to read Edwin's post and check out the sandbox he provided at the end of the post.

Closing thoughts

I was excited to work on this project because Tenzies is a game that I’ve played with my family many times. It’s so simple, yet so addictive! The hallmark qualities of a great game. Creating a clone of the game helped me to practice my programming skills and also see the connection between real-world activities and software. And this excites me!

One of the things I love and find fascinating about developing software like this is seeing how activities (like rolling dice) can be broken down into smaller and smaller actions which then can be written as code and executed by a computer. And the best part is when you learn this skill and put it into practice like I have in this project, it’s such an exhilarating moment.

Granted, it takes a lot of hard work, trial and error (maybe lots of errors?), and refactoring to get to that point, but I think that makes it all the more joyous. You get to see the results of how your hard work paid off. And then you get to do it again! These are the two parts of programming I enjoy the most: the process and the results. Which means it’s time to start another project!

Thanks for reading

Thanks so much for reading this post. I hope you found it helpful. I’d love to know: what are your favorite parts of programming? Share your thoughts in the comments below. Hearing your thoughts makes this more of a conversation and helps us all learn. See you next time.

My Top 3 Tips for Staying Focused

Anthony Nanfito — Tue, 20 Jun 2023 12:45:46 +0000

What I learned from three rounds of #100DaysOfCode

Intro

Hello and welcome to another blog post for Anthony’s Techie Thoughts! If you’re new here, my name is Anthony and I’m studying programming to make a career change from mathematics teacher to frontend web developer. In my blog posts, I reflect on my journey and share things I’m learning along the way. You can find me on Mastodon, GitHub, LinkedIn, Hashnode, DEV.to, and CodeNewbie.

In this blog post, I’ll share my top three tips for staying focused while studying or coding. These came out of a reflection after completing a third round of the #100DaysOfCode challenge. These techniques worked for me and they might work for you. Feel free to take what vibes with you and toss the rest. Alright, let’s get to the tips!

Tips for Staying Focused

Tip #1: Turn off notifications 🔕

Image Credit: Prateek Katyal

If you’re looking to stay focused and, perhaps, get into a state of flow, then you’ve got to eliminate distractions. Apart from choosing a quiet working environment, this means turning off notifications on your devices (e.g., phone, tablet, computer) for the duration of your work session. The last thing you want is to hear a ‘ding’ and then get pulled down a virtual rabbit hole and lose valuable work time. Your future self will thank you.

Turn off the notifications and, if you can, put your phone out of arm’s reach. I’ve found that even if I pick up my phone, even when it’s on silent, I can still get sucked into something distracting. So I’ve started following the motto of “out of sight, out of mind” by placing my phone out of arms reach, but still where I can hear my interval timer go off (more on that in Tip #3).

Tip #2: Listen to relaxing music 🎶

Image Credit: Adrian Korte

Jazz, Classical, Lo-Fi, whatever floats your boat or, in this case, wiggles your eardrums. Choose some music that puts you at ease and helps you focus. I prefer music without any words otherwise I find it distracting. Any else perform tiny desk karaoke? No, just me. Okay, moving on!

Bonus music-listening tips:

Use headphones to block out surrounding noise
- This is especially helpful if you’re somewhere like a cafe or a busy office environment.
- I’ve also found that when others see me with headphones on it signals to them that I’m focusing on important work and don’t want to be disturbed.
Listen to the same song on repeat
- This might sound a little whacky, but having it on repeat lets your brain worry less about the patterns in the music and more about the task you’re trying to complete (because yes, your brain is using energy to analyze the patterns in music even if you’re not conscious of it)

Tip #3: Use an interval timer ⏲️ to practice the Pomodoro 🍅 Technique

Image Credit: Slejven Djurakovic

In case you’re not familiar with the Pomodoro Technique, here’s a quick overview:

Set a timer for 25 minutes and work until the timer goes off
Take a quick break before setting the timer again and continuing your work
Repeat 3-4 times or until your task is complete

There’s plenty of room for variation within this technique to tweak so it fits your needs. I use an app called Interval Timer on my iPhone where I’ve set up three different Pomodoro timers. This is an app designed for HIIT workout timers, but I found it useful in this situation as well. I like this better than using the standard timer that came with my phone because I can customize both the time spent working on a task and the time spent taking a break.

Here are my three Pomodoro timers:

Short Session: Two 20-minute work sessions with a 3-minute break in between each session (46 minutes total).
Medium Session: Three 20-minute work sessions with a 3-minute break in between each session (1hr 9m total).
Long Session: Five 25-minute work sessions with a 5-minute break in between (2hr 30m total).

I’ll select one of these timers based on how much time I have to study. This helps me use my time effectively and stay focused. When the timer starts, I get to work and when the session ends I take a quick break. During the break between work sessions, I like to get up and move around. I will either stretch or do bodyweight exercises (e.g., push-ups) to stay active and not be seated at a computer for too long. I found this also helps with eye strain too. During the break when I get up and move, I also make a point to go look out a window.

Thanks for reading

Thanks so much for reading this post. I hope you found it useful.

These are the top three techniques I’ve used over the past three rounds of the #100DaysOfCode challenge. They’ve helped me stay focused and get into a flow state which has allowed me to learn many new skills for my career change.

What techniques do you use to stay focused while you code 👨‍💻 or study 📖? Leave your suggestions in the comments below 👇🏼. Hearing your thoughts 💭 makes this more of a conversation and helps us learn together.

Experimenting with Linux

Anthony Nanfito — Sun, 23 Apr 2023 06:17:27 +0000

Impressions after installing Ubuntu on an external hard drive

Intro

Hello and welcome to another blog post for Anthony’s Techie Thoughts! If you’re new here, my name is Anthony and I’m studying programming to make a career change from mathematics teacher to a frontend web developer. In my blog posts, I reflect on my journey and share things I’m learning along the way. You can find me on Mastodon, GitHub, LinkedIn, Hashnode, DEV.to, and CodeNewbie.

In this blog post, I share my experience with installing Ubuntu on an external hard drive. This article is more of a reflection of my experience and impressions of Ubuntu and not so much a “how-to” guide, but I will include links to the resources I used for learning about Linux and how to install Ubuntu. Alright, let’s get to it!

Free time to explore

During the weeks of March 27 to April 16, I had the good fortune to be on a mid-term break from my teaching job. One of those weeks was spent on a (much-needed) vacation, but the remainder were (mostly) dedicated to studying. Along with continuing the interactive videos and projects on Scrimba.com, I started exploring other tutorials within the realm of computers, programming, etc.

Before I dive too deeply into the Linux crash course I completed and how I installed Ubuntu on an external hard drive, let’s take a quick look at what Linux is and how it got started.

What is Linux

Disclaimer: I am by no means an expert on Linux and its various distributions (or distros), but here’s a basic overview based on my limited experience with the OS. Please forgive if I make any errors and if you know more about Linux, feel free to correct my misunderstandings or misinterpretations. Thank you.

Linux is a family of free and open-source operating systems based on the Unix operating system. These are based on the Linux kernel first released by Linus Torvalds on September 17, 1991.

There are a huge variety of Linux distributions (or distros) but the most popular include Debian, Fedora, Linux, and Ubuntu. The advantage of these operating systems is that they are open-source. This means that their source code is freely available for anyone to inspect and improve. This makes them very secure and reliable to use.

You can learn more about Linux at linux.org or on the Linux Wikipedia page (both of which were helpful to me in writing this section)

Taking a crash course and using Ubuntu

During my break, one of the tutorials I stumbled across (or perhaps saved — I can’t remember) was freeCodeCamp’s “Linux Operating System - Crash Course for Beginners” taught by KeepItTechie. I enjoyed the course and found it very accessible. Josh (KeepItTechie) does a great job of guiding beginners through the installation and basic usage of the operating system.

I will note that the installation instructions on the video did not work for me. I think it’s simply a matter of the video was record a year or so ago and the Virtual Machine software has since been updated. I found these instructions from Ubuntu to run desktop on a virtual machine very helpful.

The course covers the following topics:

Terminal commands
Working with directories
Working with files
Working with file content
Linux file structure
System information
Networking
Package manager
Text editors

Overall, it was a great introduction to Linux/Ubuntu. It helped me get some exposure to the operating system and it helped boost my confidence in using the command line interface. However, I was curious to know more about Linux and what you could do with it. So I started searching the Internet and YouTube. That’s when I discovered you could install and run Linux on a USB drive or an external hard drive.

Installing Ubuntu on an external hard drive

One of the valuable resources I found after doing those Internet and YouTube searches was the Switch to Linux YouTube channel. I found the tutorials here very helpful in getting a better understanding of the process of installing Linux to a USB flash drive or an external hard drive.

First I created a bootable USB stick with Ubuntu 22.04 installed on it. This allowed me to “try out” the OS without having to do a complete install. I have MacOS so I used this installation tutorial for MacOS from Ubuntu.com, but they also have an installation tutorial for Windows users.

However, having a bootable USB stick only allows you to test drive the OS or install it on a machine. I wanted to have it installed and operational on an external hard drive so that I could have persistence (more on that in this YouTube video by Switch to Linux).

After doing some sleuthing on the Internet, I found this installation guide on UbuntuHandbook.com which helped me install Ubuntu 22.04 onto an external hard drive, including how to encrypt the drive.

Once I had Ubuntu installed on the hard drive, I was ready to get a deeper feel for the OS. I decided to complete my solo project, Tindog, for Module 7 of Scrimba.com ’s Frontend Developer Career path.

Impressions

Overall, this was a great experience and I look forward to exploring more of Ubuntu and Linux. I’ve used MacOS for close to 7 years now and Ubuntu, in terms of looks, wasn’t too dissimilar so there wasn’t a big adjustment there. I have used Windows in the past (and still use it at my place of employment) so I could see Ubuntu being a harder adjustment for a Windows user who’s not used to using different operating systems. However, I do know there are Windows-like Linux distros for Windows users looking to try Linux but don’t want too big of a change.

As of right now, I’m not sure if I’m interested in going into back-end development or working with operating systems. I’m still very early in my career change, but I did appreciate that this experience of installing Ubuntu onto an external hard drive taught me a little bit about how computer drives are partitioned. I won’t claim to have a full and deep understanding of it, but I am grateful I know a little bit more than I did before this experience.

I’m also grateful that I am now no longer using GitHub Desktop to manage my repositories. Instead, I am now working directly in the command line interface. I purposefully did not install GitHub Desktop onto the Ubuntu “computer” I created with the external hard drive. I have been studying how to use Git within the command line interface, but having GitHub Desktop installed on my computer made it a bit of a crutch. Why open up a terminal window and manually type commands when you can just click to update that repo on GitHub, right?

Well, I wanted to put add another layer of learning to the project I was working on so I decided to use the command line interface and directly update my repo using the Git commands. This helped me gain a deeper understanding of how these commands are used and create a habit ofw using them. I have now uninstalled GitHub Desktop and use the terminal for updating my remote repos, but I will say that using GitHub Desktop as a beginner was a great stepping stone to getting where I’m at now with using the Git commands.

Lastly, I like the spirit and philosophy that comes with using Linux and other open-source software. One of the key advantages of using a Linux distro is that oftentimes you can install it on older hardware and runs great.

This helps bring old computers back to life and extends their usage. I like this idea because it helps reduce tech waste as well as gives me (us) an option for getting off the consumerism treadmill of always “needing” the latest and greatest device.

Further, there are privacy concerns with using proprietary software such as MacOS or Windows, but I think that discussion is outside the scope of this post.

Ultimately, I love the idea of being able to extend my current computer’s lifespan with a Linux distro because that means I can save the money I would have spent on a new computer for other things like life experiences (e.g., travel).

Thanks for reading

Thanks so much for reading this post. I hope you found it helpful and enlightening.

Have you tried a Linux distribution like Ubuntu before? How did you feel about it? Leave your thoughts in the comments below.

Hearing your thoughts makes this more of a conversation and helps us all learn. See you next time.

Using ChatGPT as a Coding Buddy

Anthony Nanfito — Mon, 10 Apr 2023 01:00:49 +0000

Intro

Hello, world! Welcome to another blog post for Anthony’s Techie Thoughts! If you’re new here, my name is Anthony and I’m studying programming to make a career change from mathematics teacher to a frontend web developer. In my blog posts, I reflect on my journey and share things I’m learning along the way. You can find me on GitHub, LinkedIn, Hashnode, DEV.to, and CodeNewbie.

In this blog post, I’ll offer a quick reflection on my progress this week and share some thoughts on how I used ChatGPT as a coding buddy.

Weekly Reflection

This past week has been productive for me. This is mostly because I’m currently on a mid-term break from work and I have extra time I can dedicate to my studies. Which I am thoroughly enjoying. Here’s a quick list of my accomplishments this week:

Completed the solo project for Module 6 of Scrimba’s Frontend Career Path
- GitHub Link: https://github.com/ananfito/learning-journal
- Live link: https://ananfito.github.io/learning-journal/
Started Module 7 of Scrimba’s Frontend Career Path
Published a blog post on how I used a Python script to automate a part of my teaching job
- This might seem small, but I had written this post weeks ago and just never published it so I’m glad I got it out there.
I played around with using ChatGPT as a coding buddy and it helped me figure out a problem I was having with the code for my Learning Journal project (more thoughts on that below)

Using ChatGPT as a ‘coding buddy’

On a whim, I decided to make use of ChatGPT as a ‘coding buddy’ by asking it questions when I got stuck or needed a sounding board. As a self-taught dev, this is one of the things I’ve struggled with the most. Sometimes I wish I could just tap someone on the shoulder and say, “Hey, what do I need to make this work?” Or “This is what I’m thinking for this problem. Is that the right approach?” However, this isn’t always an easy option so this week I tried something different: I asked ChatGPT.

For example, I was working on a function earlier this week for my Learning Journal project where I needed it to return the first three elements of an array, but I couldn’t figure out what method I needed to use. Initially, I thought I could use the .filter() method, but further down you’ll see how ChatGPT corrected me on that idea. First I asked it, “How do I write a function in JavaScript to return the first 3 items in an array?” Here is the response I received:

When I asked my ‘coding buddy’ this question the first thing it mentions is the .slice() method and I was like, “Oh! duh! Of course, why didn’t I think of that?” As requested, it did write an entire function for returning the first 3 elements of an array, but I didn’t need the entire function. I just needed that little hint to use .slice() instead of .filter(). When I asked it if I could use the .filter() method it explained why it wasn’t possible and why I should use the .slice() method instead:

(NOTE: While writing this blog post, I noticed that my initial question here has a typo in the first part of the question. I’m not sure why my brain decided to write “Is it possible to write return …” but ChatGPT seems to have correctly interpreted this to mean “Is it possible to write a function that returns the first …” This is interesting, but could also just be a random occurrence. In the big picture, I’m not sure if ChatGPT is always good at interpreting human miscommunication.)

This second explanation helped me realize the error in my initial approach and redirect toward a solution that worked. Of course, this is information could have obtained from someone in a Discord community, a forum, or even through reading through webpages and documentation, but those come with a longer time commitment. Here, in a few minutes, I got some advice on the direction I needed to go as well as some examples to reference. In fact, in this case, I just needed a nudge in the right direction. As a self-taught dev, this is particularly useful because I can’t just lean over to the next cubicle and ask a coworker quick questions like these. But, for now, I can ask ChatGPT and it (might) give me an answer to ‘nudge’ me in the right direction.

Closing thoughts on ChatGPT

As impressive as it ChatGPT is (and other AI software like it), we’ve already seen examples of where it will hallucinate and present incorrect information. With that in mind, I do not think it is a good idea to ask it to do a specific task for you.

For example, I’m sure I could have given it more information and context about how and why I needed a function to return the first three elements of an array, but that would have defeated the purpose of studying. To me, that is the equivalent of having someone else do your work for you. Which doesn’t help you become a better developer.

I tell my students, “the person who holds the pencil learns the math.” Meaning, the person who is sitting there going through the steps (and perhaps struggling a bit) to solve the problem is the one who will learn and remember it. In this case, the person who types on the keyboard learns to code.

All that said, I do think this could become another tool within our developer toolbox. We have a plethora of resources already at our deposal: freeCodeCamp, Stackoverflow, W3 Schools, YouTube, Discord Communities, and more! This is an addition to that and perhaps it might fill in some gaps that the others don’t provide or don’t meet the needs of the learner. I think this is how I’ll use it moving forward (and continue to use it as long as it proves useful). It’s one tool in a vast toolbox of tools to help me learn how to code and get better at achieving my goal of making a career switch.

Thanks for reading

Thanks so much for reading this post. Have you used ChatGPT in your studies? If so, how have you been using it? Has it been helpful? Leave your thoughts in the comments below. Hearing your thoughts makes this more of a conversation and helps everyone learn.

Using Python to Make my Teaching Job Easier

Anthony Nanfito — Thu, 06 Apr 2023 06:27:29 +0000

How I used a Python script to create individual grade reports for my students

Intro

Hello and welcome to another blog post for Anthony’s Techie Thoughts! It's been a few months since my last post, but I've kept busy studying and progressing toward my goal of making a career transition from mathematics teacher to front-end web developer. If you're new here, in my blog posts I reflect on my journey and share things I'm learning along the way. You can find me GitHub, Hashnode, DEV.to, and CodeNewbie.

In this blog post, I want to share how I used a Python script to make my day job a little easier. Specifically, I used the script to create individual .CSV files with students' assignments and grades. Throughout the post, I will share snippets of the code, but if you'd like to see the script in its entirety, you can view it in this GitHub repo.

The Problem

At the school I work at we use an online database management software to manage things such as attendance, grades, etc. For the most part, it gets the job done but there’s one feature (a vital one in my opinion) that’s missing: the ability to generate individualized reports for students. Having the ability to do this helps solve two problems:

Answering the question “What’s my grade?”
Improving student’s ability to complete missing assignments

In my experience, when students can receive regular updates on their progress their overall learning and understanding of the content improve. However, the software we currently use does not provide this feature (or at least I haven’t been able to find it). The result is that come progress reports or end-of-semester reports students (and parents) are sometimes surprised about what their overall grade is.

To avoid this shock and surprise at report time I put in the effort to export my grade book as an Excel spreadsheet, then import it into Google Sheets (we use Google’s Education tools at my school), and then create a separate Google Sheet for each student which is then shared to that student’s individual school email account.

This process is both tedious, repetitive, and time-consuming. In particular, it was something that a computer could do and give me back time that could be spent doing more productive things like planning lessons, helping struggling students (before they receive their final grade report and it’s too late), or simply just spending less time staring at a screen. So I sent out on a quest to find out how to automate this process with a Python script.

My Python Script Solution

Exporting the Spreadsheet

The first thing I needed to do was to export the grade book as an Excel spreadsheet and do some data cleaning. In particular, I needed to remove duplicate columns and unnecessary rows. Then save the document as a CSV.

This part took some trial and error. At first, I attempted to use the .read_excel() method from the Pandas library directly on the exported Excel file, but the way the grade book software exports the Excel file made it unreadable using this method. As such, it was easier to modify the file and export it as a CSV file. Then use the .read_csv() pandas method.

Importing pandas and creating a dataframe

Once I had the properly cleaned and formatted CSV file it was time to import the Pandas library and create a dataframe:

import pandas as pd
data = pd.read_csv("data.csv")

Once I had the dataframe set up the next part was to set up a loop to iterate through the rows in the dataframe and then save them as an individual CSV file. In this case, each row of the dataframe represents a student and their corresponding assignment grades.

This is the first time I have worked with Python in while — for the past few months I’ve been studying JavaScript. So in my first attempt to write the for loop it didn’t work out because for loops are used differently in Python than in JavaScript. Instead, in Python, I had to make use of the while loop. Here’s a quick tangent on the difference between a for loop and a while loop in Python.

`for` vs. `while` loop in Python

In Python, “a for loop is used for iterating over a sequence (that is either a list, a tuple, a dictionary, a set, or a string)”. In other words, it won’t work for iterating over the dataframe so instead,n I had to make use of a while loop:

# separates rows of data frame into individual CSV files
i = 0
while i < len(data):
    # isolate each row of data and save it as CSV based on the Name
    data.iloc[i].to_csv(str(today) + '_' + str(data.iloc[i]["Name"]) +'.csv') 
    i+=1

Here the loop goes through each row in the dataframe and then saves that row as it’s own CSV file which includes the current date (more on that in the next section) and the student’s name.

Importing `date` from `datetime`

Initially, when I saved the split files I had manually typed in the current date as part of the file’s name, but then I realized that the whole point of writing this script was to be able to automate the process and having to type in the current date each time I used the script kind of defeated the overall purpose.

So instead I figured out how to import the current date and have it written into the file name automatically using the following set of code:

from datetime import date
today = date.today()

Then the variable today can be used within the naming scheme for the file name inside the while loop (see the previous snippet above).

Sharing the files

Once I had the files created the next step was to upload them to Google Drive and share them with the students. This part I had to do this manually but I suspect there is a way to automate it which leads me to the ideas for improving the script.

Features to Add

Here’s the short list I’ve come up with for features to add to the script:

Export as a PDF instead of a CSV
- My students are familiar with using Google Sheets to read CSV files, but I can envision use cases where it might help to have a PDF version instead. Maybe even have the ability for the user to choose.
Highlight only missing assignments
- This is another feature that’s missing from the grade book software the school uses. There’s no way to run a report of just the missing assignments. This is something I’ve found valuable in the past because it acts as a checklist for students on what work they need to complete and improve their grades. (Assuming the student’s low grade is due to lack of completed assignments and not conceptual misunderstandings)
Email students directly
- I had to do this part manually, but I know it’s possible to use Gmail’s API to send emails via a Python script so this would something I would like to add because it would cut out the steps of uploading the files to Google Drive and sharing them with each student.
Continue working on seeing if I can work directly from the exported Excel spreadsheet
- As stated previously, I initially tried to read the Excel file and convert it to a dataframe but struggled with getting it to work. This is something I’d like to possibly explore because it would eliminate another step in the process. This would especially be useful if I could also automate the data cleaning step of removing the unneeded rows and columns that come with the exported spreadsheet.

Conclusion

These are a few of the ideas I have for improving the script. However, at a certain point, this begins to develop into a full-fledged database management software system — something the school is already paying for even though it lacks, in my opinion, some critical and helpful features.

For now, I’m happy with my simple script because it saves me time and I was able to put into practice my programming skills in a real-world setting. Python completed this task in seconds whereas it took me over than hour to manually separate each spreadsheet row and save them to an individual file that could be shared with 80+ students.

Resources

Along with copious amounts of Internet searching, I found the following resources useful in learning how to create this script:

Automate with Python (Beginner’s Course): https://youtu.be/PXMJ6FS7llk
Automate the Boring Stuff: https://automatetheboringstuff.com/

Thanks for reading

Thanks so much for reading this post. I hope you found it useful.

How do you use automation to save yourself time? Share your thoughts in the comments. Hearing your thoughts makes this more of a conversation and helps us all learn.

Thanks for stopping by and happy coding!

MathemaQuizzo: My First Web App

Anthony Nanfito — Wed, 14 Dec 2022 09:46:15 +0000

Intro

This will likely be my final post of 2022 and while I'm only reflecting on my coding journey of the past week it also represents the progress I've made in the past six (and indeed the last twelve) months. If you had told me in July (before I even learned any javascript) that I would be creating a web app from scratch by the end of the year, I would have thought you were crazy. But that's exactly what I did this past week.

In this post I'll share my reflections on the app I created, some general reflections about my coding journey thus far, and my goals for next year.

Background

I started studying javascript back in August of this year. It has been a rollercoaster of a journey with lots of ups and downs. There have been plenty of frustrating moments where I felt like giving up. However, I'm grateful I did not give up because I wouldn't have gotten to where I am now.

How it started

My day job is working as a middle school mathematics teacher and right now we're nearing the end of our first semester. Grades are finalized and submitted but there are still a few weeks left in the semester. At times like these, I like to step away from the textbook, the curriculum, and other resources and have my students work independently on creating something of their own. This time I chose to assign a self-study project where students are to create their own mathematically-themed game. It must have at least three levels and have two math problems to solve per level. Some students are choosing to create a video game of sorts while others are opting to create a tabletop game. Students are working in groups to compete for the best game and win a prize.

At first, I hadn't planned on creating something myself and I hadn't thought about it all until a student asked me what I would be making for the project (usually I like to create something alongside my students). My initial response was "nothing" but after giving it some thought I decided to this would be a good opportunity to put my javascript skills to the test and create some sort of web application. And that's how the idea of MathemaQuizzo was born.

MathemaQuizzo

The app I created isn't revolutionary or ground-breaking in any way. Compared to most other web applications on the Internet it's quite simple. But it's something I made entirely on my own. And that's what makes it a truly exciting and proud moment for me. It represents the act of persevering and, perhaps most importantly, it gives me the courage and confidence to keep going.

Given that my skills are still at a novice level, I knew that I wasn't going to build a mega-game app like Angry Birds or Candy Crush. So I settled on creating a simple quiz-like app that met the same requirements as the project I assigned to my students. And like any great millennial entrepreneur, I gave it the name "MathemaQuizzo" because it sounded cool and it had double letters.

My process

I started with a basic HTML layout on a single page with some simple CSS styling. The elements are centered on the page with buttons to activate/render the game and provide interactivity during gameplay. After finalizing the layout and styles, I started working on the javascript for the app's functionality. I knew I needed to have the app have a 'start game' button, as well as the ability to move on to the next question, receive a hint (if needed), and keep track of points for correct answers, incorrect answers, and hints. This is the part where I was surprised at how much of my learning I was able to produce. Most of the functions for these buttons I completed on my own, however, there were a few times when I needed to consult the MDN documentation or a previously made app for reference.

Tribulations

Most of my points of struggle came with the CSS styling. This is a skill I'm continuing to develop, but thanks to the coursework by Kevin Powell and Scrimba, I am getting better at this. In particular, it mostly came down to knowing how to space things out on the page so that it's visible and responsive. As for the javascript, most of this felt like I was testing my knowledge and seeing if all that time I spent studying paid off. Which, thankfully, it did because writing most of the functions for this was not only doable but relatively easy for me. Plus, it helped me to practice these concepts in a lifelike setting.

Feedback

The repo and live links for this project can be found below. I am open to hearing thoughts and constructive criticism. I built this entirely on my own so I'm sure there's some room for improvement. If you'd like to share your thoughts, feel free to reach out to me via the GitHub Issues for the project, LinkedIn, or Email.

Repo: https://github.com/ananfito/mathemaquizzo/
Live Version: https://ananfito.github.io/mathemaquizzo/

Looking Ahead

The next app

I've already started working on a similar app, currently called Mathapalooza 2000, that provides the user with random questions instead of progressing through a series of levels. So far this is proving to be a bit more challenging but I'm enjoying it because it's pushing me to grow my skills. In particular, I'm still trying to figure out how to generate a series of random numbers and not have them repeat. I've got a few ideas I haven't tested yet, but once I'm back in study mode I'll be ready to test them out. More on that in a future blog post.

What to study next

Now that I'm feeling more confident about my javascript skills I think I'm ready to start learning some frameworks and libraries. When I started this second round of the #100DaysOfCode challenge, I wanted to focus more on the vanilla javascript but now I'm feeling ready for some more powerful tools. This is exciting because it means I will be able to do and create more sophisticated applications and websites, but also because it means I will be more job-ready.

Getting job-ready

Since this is a reflection post and my last post of 2022, I can't help be think about what my goals will be for 2023. I'm very proud of the progress I've made these past six months, but there's still more work to be done. Specifically, I want to start getting ready for the job application process. My current teaching contract ends in June and I'd like to have a frontend web developer job lined up at that time to make my career switch.

This means getting my profiles on GitHub and LinkedIn polished up and adding more projects to my portfolio. It also means preparing for the infamous tech interviews. After the new year, I plan to start dedicating some of my study time to these efforts. Based on what I've already researched about the job application process (and the job market) it will likely take anywhere from three to six months to find a job. This means I can't start looking in June when my teaching contract ends, but sooner than that.

Thanks for reading

Thanks so much for ready this post. I hope you found it useful or inspiring.

What's one goal you have for yourself in 2023? Share what you want to achieve in the comments. Hearing your thoughts makes this more of a conversation and I can't wait to hear what you're goals are for 2023. Happy coding!

Responsive Web Design with 3 Lines of CSS

Anthony Nanfito — Mon, 05 Dec 2022 07:59:02 +0000

Intro

Hello world! Welcome to another blog post for Anthony’s Techie Thoughts! If you’re new here, my name is Anthony and I’m studying programming to make a career change from mathematics teacher to frontend web developer. In my blog posts I reflect on my journey and share things I’m learning along the way. You can find me on GitHub, LinkedIn, Hashnode, DEV.to, and CodeNewbie.

This week I continued working my way through the curriculum on Scrimba.com, Sololearn.com, and Kevin Powell’s ‘Conquering Responsive Layouts’ course. In this blog post I’ll share the 3 lines of CSS I learned to keep page elements centered and responsive.

Weekly Reflection

My progress was slow and steady this week due to some extra responsibilities at work. I would have liked to had made more progress, especially with the ideas I’m learning in Kevin’s course, but sometimes life gets in the way and you just gotta roll with it. Throughout this week one idea from Kevin Powell’s course has stuck with me: using width, max-width, and margin to center elements on a page.

His approach is simple and uses a minimal amount of code. This is something I (as a novice) can appreciate because it lessens the burden of entry to building responsive websites. For example, the following is the minimal amount of CSS code needed to center a container on a page, ensure that it fills 80% of the body width, and sets a limit on how wide it will stretch (this is particularly helpful for really wide screens, the text when spread all the way across):

.container { 
    width: 80%;
    max-width: 1100px;
    margin: 0 auto;
 }

The max-width property will change depending on what is in the container and the design of the page — as could the width: 80% if you didn’t want it to fill 80% of the page’s width — but these are the core properties needed to center the .container on the page. As an example, this CodePen features my solution to a challenge from Kevin Powell’s course that makes use of this idea in practice. The goal is to create a responsive webpage that uses flexbox to create columns and rows of content while implementing these 3 lines of CSS to keep the elements centered and responsive.

Previously, I had been using any and all properties to get things to center on the page (e.g., height, width, display, etc.) — most of it unnecessary. With these three lines of code things are centered and responsive. Granted, this isn’t the end of the line but the start. There may be more styling properties required based on the design specifications of the page, but this comes later and in other places.

I’ve only completed up to Day 9 of his 21-day course, but ideas such as this one have already triggered thoughts like, “oh, that would’ve been helpful for project X, instead of using gliff, glaff, and gluff to do the same thing”. But this is the nature of learning. You crawl (and stumble) before you learn to walk and run. After I’m done with his course, I’d like to go back to previous Frontend Mentor projects and apply what I’ve learned (and, of course, carry these ideas into new projects).

Projects from the Week

Scrimba Project
- Basic Blackjack App
  - Repo: https://github.com/ananfito/basic-blackjack
  - Live: https://ananfito.github.io/basic-blackjack/

Thanks for reading

Thanks so much for reading this post. I hope you found it useful and inspiring. What’s a big idea you learned this week that’s stuck with you? Feel free to share your thoughts in the comments below. Hearing your thoughts makes this more of a conversation and helps everyone learn.

I’ve Been Designing Websites All Wrong

Anthony Nanfito — Sun, 27 Nov 2022 08:32:21 +0000

How Kevin Powell’s mobile-first mindset is changing my approach to web dev

Intro

This week I continued to review the fundamentals of JavaScript via Sololearn and Scrimba, but my biggest triumph was starting Kevin Powell’s course “Conquering Responsive Layouts". In this blog post I share my initial thoughts on his course and how his mobile-first mindset to web development is changing my approach to creating websites.

Weekly Reflection

On Tuesday of this week I completed the Frontend Mentor challenge “Product Preview Card”. While I’m happy I was able to complete the challenge and meet the project specifications, I definitely took the “long way” to get there. And based on the (amazing) feedback I got from users on Frontend Mentor there’s definitely a lot of room for improvement. In particular, my approach to the challenge used a lot of extra (and unnecessary) code to get the project to meet the specifications.

At first, all of the feedback was initially overwhelming but once I sorted through it I found the most useful suggestion to be exploring Kevin Powell’s YouTube Channel. Kevin is CSS guru and takes a mobile-first mindset to his web development. My exploration of some of the videos on his channel led me to his (free) 21-day course “Conquering Responsive Layouts”.

In the course he teaches you how to use his mobile-first mindset by leveraging HTML and CSS to your advantage without having to add countless media queries. So far I’m really enjoying his course. The first few videos have been an eye opener on responsive web design and I’m starting to see the advantages of the mobile-first design mindset he espouses.

Kevin argues (and I agree) that instead of starting with the desktop version of the site it’s better to start with the mobile version first and use CSS to your advantage when you want to make it responsive. I’m surprised (and happy) to learn things like removing the height property and using units like em and rem make this really easy to do.

This works because HTML is already responsive by default and we (developers) can often easily mess it up by adding in extra and unnecessary CSS properties to make it “mobile-friendly”. It’s better to start with the mobile design first then build outward to the desktop version of the site. As opposed to layering on media query after media query to making your site mobile friendly for all the various mobile devices out there.

I’m eager to learn more, but I also like his “drip” style of pacing for this course. He has designed the course so that you only have access to the lessons on a specified date. That is, you can only access Day 2 Lessons on Day 2, not before. This is different from the typical “binge” approach that other courses (and tutorials) usually take — which some students might prefer — but having a day (or two) between lessons is definitely beneficial for processing the information. It’s important to absorb the information and give yourself time to process it.

I still have 19 more days of the course to complete before I finish, but I already have some ideas for how I could improve my solution to the Frontend Mentor challenge “Product Preview Card”. I’m eager to implement these ideas but mindful that I need to wait until I’ve had some time to fully “digest” the ideas from the course.

Looking ahead to next week, I plan to continue my studies and following my even/odd day approach (even days for HTML/CSS and odd days for JS). Like Kevin’s course, I find having some time between concepts helps me think about them more deeply.

Projects from the Week

Scrimba Solo Projects
- Personal website: https://startling-starlight-cc84f0.netlify.app/
- Basketball Scoreboard: https://github.com/ananfito/basketball-scoreboard
Frontend Mentor Challenges
- Product Preview Card: https://github.com/ananfito/product-preview-card

Thanks for reading

Thanks so much for reading this post. If you found it helpful or have a suggestion for something I can improve upon, please let me know in the comments below. Hearing your thoughts makes this more of a conversation and helps everyone learn.

R2D6: Sololearn, Scrimba, and Frontend Mentor

Anthony Nanfito — Sun, 20 Nov 2022 10:07:06 +0000

How these resources are making me a better dev

Intro

Hello and welcome to another blog post for Anthony’s Techie Thoughts! If you’re new here, my name is Anthony and I’m studying programming to make a career change from mathematics teacher to frontend web developer. In my blog posts I reflect on my journey and share things I’m learning along the way. You can find me on GitHub, Hashnode, DEV.to, and CodeNewbie.

This week, on Tuesday November 15, I started my second round of the #100DaysOfCode challenge. In this blog post, I’ll share my reflection on my progress including my dailyDevLog with notes reflections, references, and links to my work. Thanks for stopping by and happy coding!

Weekly Reflection

I’m five days into the second round of the #100DaysOfCode challenge. I wrote about my reflections after the first challenge and I’m looking forward to another 100 days of learning. This week has been a very productive week. I found two fantastic resources (Sololearn and Scrimba) to continue to improve my JavaScript coding skills.

I’ve been enjoying the quick, short lessons on Sololearn to review JS concepts, especially since I can practice both on the computer and on my phone. This is really useful when I’m at work and only have 15-30 minutes to time to study. It’s perfect for squeezing micro lessons.

I’ve fallen in love with how Scrimba uses scrims to teach and engage learners. If you haven’t checked it out, I recommend it. It’s worth looking into. I really love how you can pause the video and interact directly with the code that’s being discussed in the video without having to clone a repository or switch to a code editor. This makes learning more efficient and practical — it’s really great learn the concepts but be able to practice before seeing a solution.

I’m currently working my way through the Frontend Developer Career Path (which is part of the Pro subscription package) with the end goal of being hirable upon completion. Hopefully, I’ll be done with the program by May 2023 (if not, sooner) and ready to start looking for jobs. I also really like how Scrimba charges in 6-month increments with the mindset that six months you’ll be job-ready. This is both motivating to me and flexible for my finances.

I’m still working on finalizing the “product preview card” for the Frontend Mentor Challenge. This has been another excellent resource for both putting my skills into action and reviewing concepts like HTML and CSS which I study back in May/June of this year. This project in particular has helped me review CSS and I’m looking forward to finishing the challenge with a mobile-friendly design. This is something that I’m continue to struggle with but with practice I know I’ll get better.

Looking ahead to next week, I want to continue with the even/odd study days where I on even numbered days I focus on Frontend Mentor Challenges and on odd numbered days I focus on learning JavaScript via Sololearn, freeCodeCamp, and/or Scrimba. This was an idea that occurred to me after reflecting on my first round of #100DaysOfCode. So far it’s working really well because (1) I always know what I need to focus on (I don’t waste time trying figure out what to learn) and (2) alternating days gives a break from topics which lets my subconscious work “behind-the-scenes” to better understanding them.

TLDR;

Triumphs

Completed the first 3 modules on Sololearn’s JavaScript Course
8% complete with Module 3 of Scrimba’s The Frontend Developer Career Path
Created a simple passenger counter app (inspired by the one in Scrimba curriculum) for my partner, who’s a flight attendant, to use

Tribulations

Designing the passenger counter app to be mobile-friendly

Goals for next week

Continue with even/odd study days
- Even Days: Frontend Mentor Challenges
- Odd Days: JS, fCC, and/or Scrimba curriculum

dailyDevLog

Here are my daily reflections for the #100DaysOfCode challenge from this week.

Tue Nov 15

Today's Progress:

Completed the last 3 intermediate scripting algorithms on fCC (now onto the certification projects!)
Play around with some introductory Node.js

Thoughts:

I’m really happy I completed the final few scripting challenges on freeCodeCamp’s JavaScript course. I took a break from the challenges to use some other resources but I came back to them today and it was a good review of functions, this, some, and map(). It was also helpful to learn about some new things like currying and delete.

Moving ahead, I’d like to review the JavaScript concepts. Even though I completed all the challenges on fCC and I feel (mostly) confident in going to work on the certification projects, I still want a stronger JavaScript foundation to stand on before I move on the frameworks and libraries. I’ve already downloaded the Sololearn app to my phone to start reviewing and I think I’ll complete the video courses for JavaScript that are on the fCC YouTube channel.

I’ve also got some other tutorial videos for building projects (like games) saved in a playlist on YouTube so I think I’ll start going through those too. I really enjoy the “learning by doing” approach. Sometimes the challenges on fCC (or elsewhere) are a little too abstract for me.

References:

Link to work:

https://freecodecamp.org/ananfito

Wed Nov 16

Today's Progress:

Completed 2 JavaScript lessons on Sololearn about if, else, and else if.
Added styling for the “product preview card” challenge for frontend mentor

Thoughts:

Really satisfied with today’s session. Sololearn is turning out to be a good resource for me to review my knowledge of JavaScript and I’m liking how the Frontend Mentor challenge helps me review/practice my HTMS/CSS skills.

References:

Link to work:

Thu Nov 17

Today's Progress:

Completed two lessons on Sololearn: the switch statement and the for loop
Joined Scrimba & Completed Sections 1-12 of Module 1 of the Learn JavaScript course

Notes & Quotes:

swtich:

When using a switch statement if there is a case where there is no match you can use the keyword default at the end of the statement

for loops:

Statement 1 in a for loop is optional if the variable is defined before the start of the for loop
- Also within in Statement 1 you can initiate more than one variable by separating them with commas. e.g., for (i = 1, text=""; i < 5; i++)
Statement 2 of a for loop is optional if and only if you put a break statement in the lop
Optionally Statement 3 can be included inside of the for loop at the end

Thoughts:

I felt a little lost at the start of today’s study session. Today was an odd so I my focus is “set” to work on freeCodeCamp projects, but I’m just not feeling confident about my JavaScript skills. Yeah I completed the course work but it still feels jumbled and “soft” in my brain. I know I need to start building up the skills with projects, but I’m also not sure where to start. So I started looking for some resources and stumbled upon Scrimba which is a really cool learning resource and I wish I had known about it earlier.

For now, I think I’ll continue to study the coursework during the week and save the projects for the Saturdays, when I have more time to focus. Right now, it’s hard to get started on the projects when I only have 10-15 mins here and there to study while at work.

M - F
- Odd Days: JS, fCC, and/or Scrimba curriculum
- Even Days: Frontend Mentor Challenges
Sat
- fCC Project Work Day (have an extended study session)
Sun (no code, rest & reflect)
- Weekly reflection blog post
  - Triumphs
  - Tribulations
  - Goals for next week

Link to work:

Fri Nov 18

Today's Progress:

Added styling to “product preview card” (frontend mentor challenge)
- Need to figure out how to properly style SVG graphic

Thoughts:

Today’s session was short because I went on a field trip for work and came home tired (and with a headache) so I didn’t get much done beside some simple styling.

References:

SVG Tutorial (MDN)

Link to work:

https://github.com/ananfito/frontend-mentor/tree/main/product-preview-card

Sat Nov 19

Today's Progress:

Completed 2 lessons on Sololearn about the do...while loop
Continued working through the JS course on Scrimba
Created my own version of the ‘passenger counting app’ based on the one featured in the Scrimba coursework

Notes & Quotes:

“The while loop repeats through a block of code, but only as long as a specified condition is true.”
- “If a condition is always true, the loop will run forever”
- “Make sure that the condition in a while loop eventually becomes false.”
  - This can be done by remember to increase/decrease the value of the variable (e.g., i++ or i--).
The do...while loop differs from the while loop in that it “will execute the code block once, before checking if the condition is true, and then it will repeat the loop as long as the condition is true.”
- The do...while loop must end with a semicolon ;
- “The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested.”

Thoughts:

Really satisfied with today’s study session. I feel like things are starting to come together. I’m really enjoying using a Sololearn as a quick-study tool to review JS concepts. I’m also really enjoying Scrimba — so much so that I’m considering signing up for their Pro account in order to get access to their Frontend Developer Path and full access to their community.

References:

Link to work:

DEV Community: Anthony Nanfito

One-Year of Learning Frontend Web Development

My top learning resources and why I like them

Introduction

What to learn first

A basic roadmap

Escape tutorial hell by building something

My top resources

freeCodeCamp

Sololearn

Scrimba

Frontend Mentor

Kevin Powell’s "Conquering Responsive Web Design" course

TLDR;

Other Resources

YouTube Channels

Websites

Conclusion

Thanks for reading

How-to: Three Methods for Centering with CSS

Introduction

Method 1: Using margin and max-width

Method 2: Using flex

Method 3: Using grid

Conclusion

Resources

References

Thanks for reading

Git Command Cheatsheet: My Top 7 Git Commands

Introduction

git init

git clone <URL>

git status

git remote add origin <URL>

git add <FILENAME>

Variant

git commit -m "<COMMIT MSG GOES HERE>"

Variant

git push

Variant

Other commands

Resources

References

Thanks for reading

Project Showcase: Tenzies Clone

Intro

Tenzies Clone

Overview

Built with

Screenshots

Links

My big takeaway: How to use CSS Grid

Closing thoughts

Thanks for reading

My Top 3 Tips for Staying Focused

What I learned from three rounds of #100DaysOfCode

Intro

Tips for Staying Focused

Tip #1: Turn off notifications 🔕

Tip #2: Listen to relaxing music 🎶

Tip #3: Use an interval timer ⏲️ to practice the Pomodoro 🍅 Technique

Thanks for reading

Experimenting with Linux

Impressions after installing Ubuntu on an external hard drive

Intro

Free time to explore

What is Linux

Taking a crash course and using Ubuntu

Installing Ubuntu on an external hard drive

Impressions

Thanks for reading

Using ChatGPT as a Coding Buddy

Intro

Weekly Reflection

Using ChatGPT as a ‘coding buddy’

Closing thoughts on ChatGPT

Thanks for reading

Using Python to Make my Teaching Job Easier

How I used a Python script to create individual grade reports for my students

Intro

Method 1: Using `margin` and `max-width`

Method 2: Using `flex`

Method 3: Using `grid`

`git init`

`git clone <URL>`

`git status`

`git remote add origin <URL>`

`git add <FILENAME>`

`git commit -m "<COMMIT MSG GOES HERE>"`

`git push`

`for` vs. `while` loop in Python

Importing `date` from `datetime`