<![CDATA[Anthony's Techie Thoughts]]>https://blog.ananfito.devRSS for NodeTue, 21 Apr 2026 04:39:21 GMT60<![CDATA[Never Give Up]]>https://blog.ananfito.dev/never-give-uphttps://blog.ananfito.dev/never-give-upThu, 27 Feb 2025 23:31:18 GMTMy paternal grandfather often said, “never ever give up”. This sense of perseverance was instilled in me and is something I have carried throughout my life. Most recently, it has paid off in achieving my goal of transitioning out of education and into the field of data analytics.

Yesterday was my last day working in the education industry. I have wanted to be an educator since I was in middle school and I actively worked toward achieving that goal by first starting to tutor other students. After high school while studying mathematics at university, I also began taking education classes which included how to teach mathematics and other pedagogical strategies.

I participated in an internship where I taught a university-level course. I continued tutoring. I continued studying. After many years of perseverance, I completed my credential program and entered the workforce as a teacher. I taught full-time at the high school level for five years. Then I taught online and internationally for another five years.

In the final year and half of my education career, I had the distinct privilege of passing on my programming and pedagogical knowledge to other teachers. This enabled them to teach programming and robotics directly in their mathematics classroom. I’m so honored to have had this privilege and watch their excitement as they learned programming and their students learn how to program as well.

Yet, as grateful as I am to have worked in education internally I knew something was amiss. So I started to look for other things that peaked my interest. One of those things is computer programming. In December 2020, I started learning how to program in Python. This eventually led me to take some online certifications in programming, including a certification in web development and another in data analytics. For a while, I looked around for some sort of web development position, but unfortunately didn't find anything.

I came to the conclusion that while I enjoyed working on various web development projects it was really the combination of mathematics and programming that truly intrigued my interest. And so I continued to focus on developing my data analytics skills. Most recently I have enrolled in a graduate program at Sacramento State where I am deepening my knowledge of both programming and data science in the Masters of Science Business Analytics program.

Through this unwavering perseverance and continued dedication to my studies, I have finally achieved the goal I set for myself years ago, which was to transition into a technical oriented career. I am very happy to announce that I will soon begin my career as a research data analyst at the California Department of Healthcare Services.

I know the job market has been particularly rough and challenging to many people who are looking for jobs in the tech industry. To those people I just wanna say that I have been where you are. You send out countless applications and oftentimes hear nothing back. And on the rare occasion where you do hear something back it's usually a letter of rejection.

This is where the power of perseverance comes into play. If this is something that you truly desire, then you will find the inner strength to get there.

In the meantime, you need to focus on whatever day-to-day things you need to do to get by. Whether that's working a job with a toxic boss or working multiple jobs to pay the bills. Whatever it is, keep in mind it is just a stepping stone to whatever comes next. And sometimes – as difficult as it is – you have to let the path in front of you unfold on its own.

On this path it is better to focus on what you can control.

You can control your reaction to the world and events along the path.

You can control how often you study or put into practice your newfound skills.

You can control how many applications you send out.

You can control how many networking events you go to.

You can control how many authentic connections you make.

If you keep focusing on what you can control instead of what you cannot control, you will end up in a much happier place.

I say that both as someone who has done both. I know when I focus on what I can control I feel much better and I am much happier. As opposed to when I focus on the things I cannot control. When I do that, I am miserable. This is a lesson I have learned countless times and I hope I’m further along the way to internalizing it completely.

If you're reading this post and looking for any piece of advice, it would be that. Remember to focus on what you can control. And if it's something you truly want and truly believe you are capable of, then keep going. Don't stop. And never ever give up.

]]><![CDATA[Quick Start Guide to SQL Queries]]>https://blog.ananfito.dev/quick-start-guide-to-sql-querieshttps://blog.ananfito.dev/quick-start-guide-to-sql-queriesMon, 04 Sep 2023 21:14:34 GMTIntro

Recently, I took a deep dive into analytics to finish some case studies I started as part of my coursework for the Google Data Analytics Certificate. Part of that deep dive meant reviewing SQL queries, but it had been a while since I worked with them so I put together a cheat sheet of the basics.

In this post, you’ll find a list of the basic SQL queries, what they mean, and example code snippets. For these examples, I used Google’s BigQuery to practice. Depending on the SQL database you use the naming conventions of the columns and tables may be different, but the basic setup of the queries will be the same.

You can find the markdown version of this cheat sheet in my LearnInPublic repo on GitHub.

Reserved Words

SELECT

What it does:

  • Specifies or “selects” the column(s) you want to query

  • Can use the asterisk * if you want to select all the columns in the database

  • databaseName.columnName → for specifying which DB and column, useful when joining datasets

FROM

What it does:

  • Specifies which table to pull data from

  • At this stage, you can introduce an alias for column names by adding it to the end of the FROM clause. This is useful for making them easier to remember. For example, FROM Player_Attributes attributes

Example:

SELECT
  *
FROM
  `bigquery-public-data.usa_contagious_disease.project_tycho_reports`

Here we will get all of the columns from the table Project Tycho Reports of the USA Contagious Disease dataset.

As you can see there are 759,467 rows in the results. That’s a lot and this is where adding other clauses will help narrow down the results. Alternatively, we also have the option to export the data which then can be used with other analysis software or programming language (e.g., Python) to better understand it.

Instead of using the asterisk * to select all the columns we could also select a single column name (or multiple column names separated by commas ,):

SELECT
  disease
FROM
  `bigquery-public-data.usa_contagious_disease.project_tycho_reports`

WHERE

What it does:

  • Specifies the condition(s) for the data you want to see (e.g., all values greater than 100)

  • The percent symbol % can be used for searching strings

  • The greater than > and less than < symbols are used for looking for numerical values

  • The underscore _ is used for searching for characters

  • The in keyword performs an exact match while the like keyword performs a looser match

  • There is also between, and, or, is null, is not null

Example:

SELECT
  *
FROM
  `bigquery-public-data.usa_contagious_disease.project_tycho_reports`
WHERE
  disease="MUMPS"

Here we can select all of the columns from the table, but the WHERE clause specifies we only want the entries where the disease is MUMPS. This means other diseases are not included.

Here’s another example where we are looking for a numerical value. In this case, when the number of incidences of a disease per 100,000 people is greater than 1.

SELECT
  *
FROM
  `bigquery-public-data.usa_contagious_disease.project_tycho_reports`
WHERE
  incidence_per_100000>1

We can even combine these statements with the and keyword and look for the disease “MUMPS” where the incidence per 100,000 people is greater than 1.

SELECT
  *
FROM
  `bigquery-public-data.usa_contagious_disease.project_tycho_reports`
WHERE
  disease="MUMPS" and incidence_per_100000>1

GROUP BY

What it does:

  • We can use the fields or column names to group things together

Example:

SELECT
  disease,
  AVG(incidence_per_100000) as avg_incidence
FROM
  `bigquery-public-data.usa_contagious_disease.project_tycho_reports`
GROUP BY
  disease

Here we have a list of the average incidence per 100,000 people grouped by disease.

There are two things to note in this example:

  1. I used the keyword as to give an alias to the avg_incidence. This can be used when doing a calculation or with a column name that might be particularly long. This helps us make the column names more human-friendly.

  2. There is no ordering to this list, but we can fix that with our next example when we use the ORDER BY clause.

ORDER BY

What it does:

  • Here we can specify a column name to order the results by

  • By default, it’s in ascending order but we can add DESC to the end for descending order

Example:

SELECT
  disease,
  AVG(incidence_per_100000) as avg_incidence
FROM
  `bigquery-public-data.usa_contagious_disease.project_tycho_reports`
GROUP BY
  disease
ORDER BY 
  avg_incidence

Here we have a list of the average incidence per 100,000 people grouped by disease and ordered based on the incidence.

By default, it is listed from lowest to highest (ascending order). But we can also add the keyword desc to the ORDER BY clause in order to list it from highest to lowest (descending). See the second example below.

SELECT
  disease,
  AVG(incidence_per_100000) as avg_incidence
FROM
  `bigquery-public-data.usa_contagious_disease.project_tycho_reports`
GROUP BY
  disease
ORDER BY 
  avg_incidence desc

Conclusion

Those are the basic SQL queries you need to get started with querying a database. At the very least, you need to know how to use SELECT and WHERE so that you can pull data out. However, it’s helpful to know other clauses like GROUP BY and ORDER BY to narrow down or filter your data. This is particularly helpful with large datasets.

We also got a preview of how we can use functions, like AVG(), to perform calculations and return the results in a column. This helps us get a glance at the shape of the data which might lead us to areas for deeper exploration.

This is just a quick start guide. Like all things technology, there’s a lot more you can do with SQL and I’m not an expert by any means. But I do enjoy learning and sharing what I learn as I go. If you’d like to learn more about SQL, check out the ‘References & Resources’ section. I’ve included a list of resources that were helpful to me when learning SQL and writing this post. Happy coding!

References & Resources

If you want to take a deeper dive into SQL queries, I found the following resource helpful while writing this post.

Thanks for reading

Thanks for reading this post. I hope you found it useful. If you have a favorite resource for studying SQL, share it in the comments. Hearing your thoughts makes this more of a conversation and helps us all learn.

]]><![CDATA[One-Year of Learning Frontend Web Development]]>https://blog.ananfito.dev/one-year-of-learning-frontend-web-developmenthttps://blog.ananfito.dev/one-year-of-learning-frontend-web-developmentSun, 20 Aug 2023 03:59:27 GMTIntroduction

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:

  1. They had the roadmap already figured out and it aligned with what I wanted to study

  2. 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:

  • Amazing 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

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! 🙂

  • 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!

]]><![CDATA[How-to: Three Methods for Centering Elements with CSS]]>https://blog.ananfito.dev/how-to-three-methods-for-centering-elements-with-csshttps://blog.ananfito.dev/how-to-three-methods-for-centering-elements-with-cssSun, 06 Aug 2023 09:13:50 GMTIntroduction

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

References

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. 🚀

]]><![CDATA[Git Command Cheatsheet]]>https://blog.ananfito.dev/git-command-cheatsheethttps://blog.ananfito.dev/git-command-cheatsheetSun, 30 Jul 2023 14:34:32 GMTIntroduction

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

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. 😄

]]><![CDATA[Project Showcase: Tenzies Clone]]>https://blog.ananfito.dev/project-showcase-tenzies-clonehttps://blog.ananfito.dev/project-showcase-tenzies-cloneFri, 14 Jul 2023 08:48:28 GMTIntro

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, 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

Game title and instructions at the top. In the middle, ten dice laid out in two rows of five. Underneath the dice, the game stats: number of rolls, game time, and best time.

Game title and instructions at the top. In the middle, ten dice laid out in two rows of five with two dice selected, or held, and highlighted in green. Underneath the dice, the game stats: number of rolls, game time, and best time.

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.

]]><![CDATA[My Top 3 Tips for Staying Focused]]>https://blog.ananfito.dev/my-top-3-tips-for-staying-focusedhttps://blog.ananfito.dev/my-top-3-tips-for-staying-focusedTue, 20 Jun 2023 12:43:12 GMTIntro

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 🔕

Red and white neon sign with a heart and zero.

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 🎶

Close up shot of a record on a turntable with the needle resting on the record.

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

Tomatoes lined up on a window shelf in front of a blurred background

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.

]]><![CDATA[Experimenting with Linux]]>https://blog.ananfito.dev/experimenting-with-linuxhttps://blog.ananfito.dev/experimenting-with-linuxSun, 23 Apr 2023 06:16:40 GMTIntro

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.

]]><![CDATA[Using ChatGPT as a Coding Buddy]]>https://blog.ananfito.dev/using-chatgpt-as-a-coding-buddyhttps://blog.ananfito.dev/using-chatgpt-as-a-coding-buddyMon, 10 Apr 2023 00:59:52 GMTIntro

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:

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:

Image of chat conversation with ChatGPT. QUERY: write a function in javascript that will return the first three elements from an array. RESPONSE: You can write a function in JavaScript that returns the first three elements from an array using the slice() method. Here's an example: javascript function getFirstThreeElements(arr) { return arr.slice(0, 3); } This function takes an array arr as an argument and returns a new array containing the first three elements of arr. Here's an example of how to use this function: javascript const myArray = [1, 2, 3, 4, 5, 6]; const firstThreeElements = getFirstThreeElements(myArray); console.log(firstThreeElements); // Output: [1, 2, 3] In this example, the getFirstThreeElements() function is called with the myArray array as an argument. The function returns a new array containing the first three elements of myArray, which are then printed to the console.

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:

Image of chat conversation with ChatGPT. QUERY: Is it possible to write return the first three elements of an array using the filter() method in JavaScript? RESPONSE: The filter() method in JavaScript is not suitable for returning the first three elements of an array because it is designed to filter an array based on some condition and returns a new array containing only the elements that pass that condition. It does not provide a way to select a specific number of elements from the beginning of an array. Instead, you can use the slice() method to return the first three elements of an array, as shown in the previous example: javascript function getFirstThreeElements(arr) { return arr.slice(0, 3); } const myArray = [1, 2, 3, 4, 5, 6]; const firstThreeElements = getFirstThreeElements(myArray); console.log(firstThreeElements); // Output: [1, 2, 3] The slice() method can be used to select a range of elements from an array, starting from the first element and ending at the specified index. In this example, we used slice(0, 3) to select the first three elements of the myArray array.

(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.

]]><![CDATA[Using Python to Make my Teaching Job Easier]]>https://blog.ananfito.dev/using-python-to-make-my-teaching-job-easierhttps://blog.ananfito.dev/using-python-to-make-my-teaching-job-easierThu, 06 Apr 2023 06:25:40 GMTIntro

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:

  1. Answering the question “What’s my grade?”

  2. 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:

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!

]]><![CDATA[MathemaQuizzo: My First Web App]]>https://blog.ananfito.dev/mathemaquizzo-my-first-web-apphttps://blog.ananfito.dev/mathemaquizzo-my-first-web-appWed, 14 Dec 2022 09:44:06 GMTIntro

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.

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

screenshot of the app with the title "MathemaQuizzo" at the top, a description of the rules, and a button to start the game.

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.

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!

]]><![CDATA[Responsive Web Design with 3 Lines of CSS]]>https://blog.ananfito.dev/responsive-web-design-with-3-lines-of-csshttps://blog.ananfito.dev/responsive-web-design-with-3-lines-of-cssMon, 05 Dec 2022 07:58:05 GMTIntro

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

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.

]]><![CDATA[I’ve Been Designing Websites All Wrong]]>https://blog.ananfito.dev/ive-been-designing-websites-all-wronghttps://blog.ananfito.dev/ive-been-designing-websites-all-wrongSun, 27 Nov 2022 08:31:35 GMTIntro

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 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

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.

]]><![CDATA[R2D6: Sololearn, Scrimba, and Frontend Mentor]]>https://blog.ananfito.dev/r2d6-sololearn-scrimba-and-frontend-mentorhttps://blog.ananfito.dev/r2d6-sololearn-scrimba-and-frontend-mentorSun, 20 Nov 2022 10:00:16 GMTIntro

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:

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:

Link to work:

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:

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 us all learn. See you next time.

]]><![CDATA[Day 100: Lessons Learned from #100DaysOfCode]]>https://blog.ananfito.dev/day-100-lessons-learned-from-100daysofcodehttps://blog.ananfito.dev/day-100-lessons-learned-from-100daysofcodeMon, 14 Nov 2022 09:22:32 GMT100 Day Challenge Reflection

November 12, 2022 marked the 100th day of my journey on the #100DaysOfCode Challenge. In this post, I look back on what I learned from the challenge and what I want to gain as I move forward to the next 100 days.

Where I've Been

I joined freeCodeCamp in Oct of 2020. I started with the Python course and really enjoyed it (though I didn't complete the certification projects ... yet). Unfortunately, some life events got in the way and I stopped studying programming in the toward the end of 2021.

At the beginning of 2022, I got back into studying programming which led me to explore data analytics. I took a detour into the topic by completing the Google Data Analytics Certificate via Coursera. I really enjoyed putting my mathematical knowledge and skills to work, but I felt something was missing. I wasn't thrilled about sitting at a desk manipulating spreadsheets and analyzing data. To be clear I love reading about the outcomes of such practices, but I wasn't enthralled with doing them myself.

I took another short break on my programming journey before starting freeCodeCamp's Responsive Web Design certification. This was a game changer for me! I was enthralled with being able to manipulate HTML/CSS code and channel my creative energy into creating something that then could be shared. For example, checkout the portfolio website I made as part of the certification. It's simple and not super flashy, but it gets the job done and it's something I made with my own two hands.

After earning my certificate for that program in July of this year, I continued my journey by starting freeCodeCamp's JavaScript certification. Shortly after starting the course I started the #100DaysOfCode Challenge on August 5 and on November 12 I completed the 100th day of that challenge.

Seventeen of those 100 days were rest days (because life gets in the way sometimes), but overall I'm really happy I started and completed this challenge. The challenge helped me get into the habit of coding, get connected with others, and build my confidence. I still have more work to do, but I feel like I've got a firmer foundation to stand on than I did six months ago.

What I Accomplished

Looking back on my 100 days of coding there have been plenty of lessons learned (both at and beyond the keyboard). The following is what I like to think of as my "Did It" list: a list of all the things I accomplished during this 100 day challenge. I keep it as a reminder of what I was able to accomplish just by dedicating a small amount of time (30-60 mins) each day.

This is especially important for someone like me who is a beginner but also as someone who is switching industries entirely. It's quite easy to feel like I don't know enough or don't have the skills to enter into a new industry (i.e., imposter syndrome), but this list is evidence that shows I do have skills and that they will continue to grow as long as I continue to put in that little bit of effort each day.

If you're a beginner coder or a career changer like me, I strongly encourage you to keep a "Did It" list too so you can remind yourself of what you've accomplished. And, if you feel like it, share your list so we can all celebrate together.

My "Did It" List

All of these projects and coursework have let me improve my understanding of various web development concepts and skills. In particular I've increased my knowledge of the following areas:

  • Basic HTML/CSS
  • Basic JavaScript
  • ES6
  • Regular Expressions
  • Debugging
  • Basic Data Structures
  • Basic Algorithm Scripting
  • Object Oriented Programming
  • Functional Programming
  • Intermediate Algorithm Scripting
  • Git & GitHub

Where I Want to go

I've got my "Did It" list, but what about my "To-Do" list. While I'm proud of the above listed accomplishments I'm keenly aware of the fact that I still have more to learn. Right now, my goal is to make my career transition in the summer of 2023. Which means I need to have a plan in place for how I will continue to improve my skills. Moving forward I'll continue to put in the daily practice but with a more focused effort in the following areas.

Double Down on JavaScript

I'm nearly done with freeCodeCamp's JavaScript certification -- and I do want to move on to their frontend libraries certification -- but I also want to spend more time learning JavaScript in more detail. I have a basic understanding of it, but I want to go deeper because I know that a lot of the frontend libraries (e.g., React, Vue, etc.) make frontend development easier but I believe that's only true if you have a solid foundation of JavaScript to stand on.

In other words, I believe that if I have strong, firm understanding of JavaScript it will making learning new libraries or frameworks easier. It's kind of like using a calculator to do math. It's only useful if you know how addition, subtraction, multiplication, and division work. Otherwise you're just pushing random buttons hoping for an outcome that works.

In particular, I want to go back to my "Identified Weaknesses" list (which I established in my Day 50 Reflection) and continue working on the following concepts:

  • Callback functions; I've seen more examples of how these are used in practiced but I'm still not very confident in how and when to use them.
  • Arrow functions; again, here I've seen more practical examples but haven't quite solidified the concept in my head yet.

More Frontend Mentor Challenges

So far I've only completed one challenge on Frontend Mentor -- mostly just to try it out -- but I definitely want to complete more. First, it lets me continue to practice and improve my frontend skills. Second, I really like the ability to share my solution and get feedback from others (as well as to give feedback too). This is incredibly valuable and I'm deeply grateful that a site such as Frontend Mentor exists to help facilitate that, especially as a self-taught programmer who doesn't always have the opportunity to connect with other learners in person.

Set a Study Schedule

This challenge taught me the importance of doing something regularly (or rather retaught it to me) and how big things are build as a series of small things first. To that end, I would like to be more structured with my study schedule. Specifically, I want to try setting specific tasks for specific days. During the challenge I found that more often than not I would have breakthroughs in learning or solving a problem after taking a break and working on something else.

To keep things simple I think I want to try focusing on freeCodeCamp's coursework on odd numbered days and focusing on projects (i.e., Frontend Mentor challenges) on even numbered days. I think it will provide a nature structure for walking away from certain tasks/problems to allow my subconscious to think about the problem while I work on something else and then return to it at another time. Further, I think it will provide some focus for what I need to work on and what resources to incorporate.

It's no secret that there are a plethora of learning resources out there to teach yourself how to code, but this can be overwhelming and lead you to jump from resource to resource without actually learning anything. Some like to call this "tutorial hell" but regardless of what you call it I think it's something that can be avoided by having a structure and roadmap for how you study. This is why I'm grateful for resources like freeCodeCamp or The Odin Project because they give an outline or roadmap to follow for those of us who might not know which direction to head.

Blog More

The habit of coding everyday helped increase my skills and keep them active, but I also really enjoyed the aspect of reflecting on my study session. For the challenge, I wrote my reflections in markdown files and published them on GitHub in a repo. This worked well enough, but moving forward I want to publish them elsewhere in a more social capacity. I think I'd like to start blogging about my journey on platforms like Hashnode and DEV.to where other developers are so I can connect and learn from them.

Connect with Others

In addition to blogging and sharing my knowledge on the Internet, I also want to start being more active in the developer communities on Slack and Discord. I have already connected with a few people and I have found value in learning from what people post to these places, but I have not put in a lot of time into being active there on a regular basis. And with the future of Twitter in some major uncertainty, it feels like the right time to explore other places to connect with beginners and developers.

Things to Remember

At the halfway point of this challenge I took some time to reflect in a blog post on how far I had gone and where I wanted to go. Re-reading it there a few things I didn't get to complete in the second half of the challenge which is okay because it gives me something to work toward in another round of this challenge. But in my re-read of the post I did notice the list I made of things I wanted to remember. In this post, I'll repeat the short version of that list because these are things that I still want to remember going forward.

Ultimately, learning is a process and not a destination and part of the process means going back and reminding myself of important ideas such as the following:

  • Be Patient
  • Ask for Help
  • Coding isn't everything

Conclusion

When I started this challenge I wasn't sure where it would lead or what I would gain along the way. And while this 100th day is milestone in this journey it's also an arbitrary marker because the journey doesn't stop here. There's still more to come and I look forward to seeing what I'm able to accomplish in the next 100 days, 500 days, 1000 days!

Thanks for reading. If you'd like to continue sharing this journey with me, consider connecting with me:

]]><![CDATA[Regular Expressions: A Basic Explanation]]>https://blog.ananfito.dev/regular-expressions-a-basic-explanationhttps://blog.ananfito.dev/regular-expressions-a-basic-explanationMon, 03 Oct 2022 06:54:27 GMTIntro

In an effort to be intentional with my weekly reflections on the #100DaysOfCode Challenge, I want to focus this post on regular expressions. While completing the scripting challenges on freeCodeCamp I struggled and felt very frustrated with the challenges that involved regular expressions. Which means ... I needed to learn more about them and on a deeper level. So here goes!

In this article, I'll give a basic overview of what regular expression are and how to get started using them. This by no means will be a comprehensive overview of them, but an introduction to regular expressions from one beginner to another.

What are Regular Expressions?

Regular expressions are patterns that are used to match strings. We place them inside a set of forward slashes / /. In JavaScript, they are also objects and can be used with a variety of methods such as match(), replace(), split(), and more.

Basically, you're telling the computer to look for this pattern of characters within a string. That pattern could be letters, numbers, whitespace, special characters, etc. When a match is found it will be recorded or returned to you (depending on what method you're using).

How do you use Regular Expressions?

In JavaScript we can make use of regular expression by declaring a variable or place them directly inside a function. Before we look at those two use cases, let's start with an example.

Example

Let's say I have the string of text 'For us, we like to take the dogs on a walk far from home.' and I want to match all words that start with f and end with r. I can use the regular expression /f[aeiou]r/gi to match the words For and far in my sentence. But what does this goop of /f[aeiou]r/gi mean? Let's break it down.

The Expression (Inside the Slashes)

First, we already know the expression falls between the slashes so let's focus in it: f[aeiou]r. I'm looking for three-letter words that start with f and end with r, but have a vowel (a, e, i, o, or u) in between them. The square brackets [] are used for matching character sets. Since I have the possibility of any vowel in between the f and the r I want to indicate that the brackets. In other words, it will match any word that starts with f and ends with r regardless of what vowel is in the center so it would match far, fer, fir, for, or fur.

The Flags (Outside the Slashes)

Second, let's break down the gi that appears outside the slashes. These are expression flags and change how the expression is interpreted. Here, g stands for global meaning I want to search the entire string. If I remove the g, then it will only provide the first match in the string.

The letter i stands for case insensitive meaning it ignores the case of the letter. This allows us to match the word For at the beginning of the sentence. Without the i it would only match the word far in the sentence.

Variable Declaration

There are two ways to implement this in your script so let's start with the variable declaration. Consider the following:

let string = `For us, we like to take the dogs on a walk far from home`
let regex = /f[aeiou]r/gi

console.log(string.search(regex));
// expected output: 0, 42

Here I've got variables for my string and the regular expression, and I'm using the search() method which provides the index of any matches. In this example, the method will search the string (the sentence) and return the indexes for any matches of word that starts with an f and ends with an r.

The advantage of using a variable declaration is that if we need to change the string or the regular expression, we can easily do that with out having to modify the rest of our script. In this case, we're only making use of our regular expression in the line console.log(), but other cases might be more complex or lengthly.

In particular if we end up searching multiple strings it's easier just to have to type the regular expression once (when we declare the variable) than each time we need to use it. This is especially helpful as regular expressions can get very complicated depending on what you're looking for.

Inside the Function

Alternatively, we could have also done the following and returned the same result:

let string = `For us, we like to take the dogs on a walk far from home`

console.log(string.search(/f[aeiou]r/gi));
// expected output: 0, 42

Notice in this case I've placed the regular expression as parameter directly into the search() function.

Resources

When I wasn't banging my head against the keyboard trying to figure out how regular expressions work, I cruised around the internet to find out what resources I could use to help understand them better.

My first go-to resource with any problem I have is to consult the documentation. The Mozilla Developer Network (MDN) is my preferred place for this. Most times I figured out what I need from reading through their guides.

When the documentation doesn't help or it's still not clear to me, I move on to YouTube and find a tutorial (because having a person explain it to me usually does the trick). For regular expressions, I found the tutorial "Learn Regular Expressions In 20 Minutes" by Web Dev Simplified to most helpful. It includes several examples and pointed me to my next suggested resource: RegExr.

RegExr allows you to input the text you want to search and write your regular expressions to search the text. What I like about it (especially as a beginner) is it will highlight the characters that are being matched based on your expression and (my favorite part) it also provides description of what each part of your expression is doing in the match. I'm sure there are other tools out there like this, but this is the one I stumbled upon. Feel free to use what works best for you.

Conclusion

I've kept the above example simple because I'm writing this article for beginners who are just getting started. As a beginner myself, reading through the documentation can be overwhelming, particularly when we look at the Character Class, Assertions, Groups and Backreferences, Quantifers, and Unique property escapes that make up the special character in regular expressions. However, that doesn't mean it's impossible to get better at using regular expressions.

I've still got more to learn when it comes to regular expressions, but my confidence is growing. Resources like RegExr and writing this blog post are helping me learn them. What are some resources you have found helpful in learning regular expressions?

]]><![CDATA[Day 50: Reflecting at the Halfway Point]]>https://blog.ananfito.dev/day-50-reflecting-at-the-halfway-pointhttps://blog.ananfito.dev/day-50-reflecting-at-the-halfway-pointSat, 24 Sep 2022 13:41:19 GMTI started the #100DaysOfCode Challenge on August 5, 2022. Today is Day 50 of that challenge - well, technically it's the 51st day because I started my first entry as Day 0. As this marks the halfway point of the challenge I'm taking this opportunity to reflect on where I've been and where I want to go for the rest of the challenge.

Triumphs

freeCodeCamp Coursework

When I started this challenge I was just beginning my foray into the world of JavaScript (previously I had worked with python, R, SQL, HTML, and CSS). Now, I'm nearly finished with freeCodeCamp's JavaScript Data Structures and Algorithms course. And soon I'll begin the certification projects, once I complete the final set of algorithm scripting challenges.

Tetris App

In addition to working my way through fCC's coursework, I've also been exploring other resources and tutorials. One such tutorial - taught by Ania Kubow - helped me design and build a basic Tetris app using HTML, CSS, and JavaScript. This was fun and frustrating at the same time - a great combo in my opinion. Working through constructing this app helped me grasp things I had been struggling with - like writing functions - and it gave me an opportunity to see practical uses of the concepts I had been studying. More precisely, it gave me a clearly defined goal to work towards.

GitHub

I've also been able to get more comfortable with GitHub. I've been creating and updating repositories with files from this challenge and projects - like my Tetris app. I still need to learn Git, but the GitHub desktop app has made syncing with GitHub a breeze. Moreover, it's helped to lower the bar for entry and given me an opportunity to see how GitHub works and the benefits to using it. Prior to this, GitHub felt like nebulous place programmers go to share their work. Now I'm not sure how I'd get along with it out.

Portfolio Site

I've also been continuing to design and build out my portfolio website. I originally built it as part of freeCodeCamp's Responsive Web Design course, but throughout this challenge I've been able to tinker with the site. This has kept my HTML/CSS skills active, but also has allowed me to expand on other web design skills, like accessibility.

Tribulations

Of course even with these triumphs there have certainly been tribulations that have tested both my coding skills and my commitment to the challenge (and to learning programming in general). Considering I've made it to Day 50 and I'm still 'alive' is a testament to my perseverance.

I'm still struggling with some concepts and methods like callback functions, arrow => functions, and how to properly use methods like filter or map, but I'm confident my skills in these areas will grow with time and practice.

Ultimately, the biggest thing I struggle with is knowing what to use and when. This is especially true when it comes to algorithm scripting. Again, I think this will come with practice (which I definitely need more of), but also with patience. There have been more than one occasion where I've gotten frustrated and felt like giving up (I'm grateful I didn't though).

To help deal with these tribulations I have started a list called "Identified Weaknesses" where I list out things I struggle with or don't fully understand. Then I carve out some time each week to have a dedicated practice session toward understanding those weaknesses and (hopefully) turn them into a strength.

Looking Ahead

Complete fCC Coursework

Obviously, in the next 50 days of this challenge I want to complete my freeCodeCamp coursework and obtain another certification. I'd also like to progress to the next freeCodeCamp course - which focuses on front-end libraries - round out my skills as a front-end developer.

Fix the Tetris App Glitch

My Tetris app still has a glitch that I'd like to fix and I want to make it so that it's mobile friendly (currently it's only desktop compatible). I know this will require reworking some of the event listeners in the JavaScript file and updating the CSS to support mobile browsers.

Build More Projects

Once the Tetris app is complete, I want to start working on other projects to add to my portfolio. Specifically, I want to put my JavaScript skills to the test and build an app that requires a user login and allows the user to perform certain tasks. For example, maybe design a clone of a website like YouTube or Twitter. I'd also like to design an app that makes use of API. Both of these types of projects seem like they'd involve practical skills that would help make me job-ready.

Be Intentional with Rest Days

Lastly, I'd like to plan out my rest days in advance and with the intention to step away from coding. So far I've only taken rest days when I've felt like it or when my body forced me to. This stratagem seems both ill-advised and unsustainable. From now on, I think I'll plan to take a weekend off everyone two weeks and work on non-coding projects and hobbies.

In addition to these breaks, I want to be more intentional with how I study by setting clearer goals for my study sessions. For example, being more strict about completing challenges within a time frame (e.g., one hour) - especially during the work week. Sometimes I've stayed up too late or neglected other tasks because I was too dedicated to studying. I'd like for my sessions to be more balanced. I already know I can make use of a timer to employ the Pomodoro technique when I study, now I just have to be better about not extending the study session longer than needed.

Things to Remember

As I complete the second half of this 100-day challenge these are the things I want to remember:

Be Patient

I'm more than eager to switch careers, but I need to remember that learning takes time. Ironically, as a teacher, you'd think I'd know this, but the experience of being a teacher is different than that of a learner. This journey has been humbling, if nothing else.

Ask for Help

I'm getting better at this, but in the beginning I was shy about asking for help. I wanted to solve everything on my own, but that's not how the world works. The world - all of human civilization - is built upon collaboration. That means asking for helping when I need. Using the fCC Discord has been helpful here; I've already gotten help on previous problems and made a few friends.

Coding isn't everything

It's not the end of the world if I don't code. I know I need to continue to practice my skills, but I can't act like the world is going to explode if I don't code. There are other priorities that require my attention too.

Conclusion

Those are the triumphs, tribulations, and lessons I've learned from my first 50 days of the #100DaysOfCode Challenge. I'm looking forward to what comes next in the second half of the challenge and writing this post has helped me identify the direction I need to work toward. If you'd like to see my log entry for Day 50's study session, you can find in my GitHub repository for the #100DaysOfCode challenge.

Thanks for reading. If you'd like to continue sharing this journey with me, consider connecting with me:

Happy coding!

]]><![CDATA[What Does Accessibility Mean for Developers?]]>https://blog.ananfito.dev/what-does-accessibility-mean-for-developershttps://blog.ananfito.dev/what-does-accessibility-mean-for-developersSun, 18 Sep 2022 07:56:59 GMTIntroduction

Hello readers! Have you ever used a website or application and didn't work the way it was supposed to? Do you remember the feeling of frustration you had when it happened? Well, as web developers this is the kind of experience we don't want to provide to users of the websites and applications we create. In this blog post I'll discuss what is accessibility and some accessibility tools I used to make my portfolio site more accessible for everyone.

My Background

I've worked as an educator for nearly ten years now. I have taught mathematics at the high school and middle school level (US Grades 6-12) and I have taught English as a Second Language. Thinking about accessibility is not a foreign concept to me in my current job, but I am learning about it in new ways as I continue to learn about web development.

In general, I tend to think of education and accessibility as trying to accomplish the following task: changing a light bulb. Everyone has to do it, but not everyone will do it in the same way. As someone who is 6 foot 2 inches (187 cm) this kind of task is generally not too difficult - I might need a step stool but little else. However, for others who are not as tall as I am or perhaps those who don't have full use of their limbs this task can become much more difficult (even risky) without the proper accommodations such as a ladder or perhaps a reach extender.

What is accessibility?

At its core making things accessible in education means giving access to learning. This can be done through accommodations or modifications such as shortening the length of assignments, providing information in multiple formats (e.g., written, audio, visual, braille), or use of various assistive tools.

Similarly, in web development, the goal is to allow any user to use all of the features and content on your site, "regardless of how the user accesses the web — even and especially users with physical or mental impairments", according to MDN Web Docs for Accessibility.

Specifically, this means your site should be accessible to tools such as the keyboard, mouse, and touch screen users, but is also means making applications "understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities."

Accessibility Tools: How do you test your site?

Thankfully, by default, HTML is accessible - if used correctly - so there's no extra tool or language web developers need to use or learn, but it does require a subtle shift in habits and practice. Also, there are a number of different tools available help make this easier for us - even a beginner such as myself.

These tools includes things like AccessibleWeb.com which has a free Website Accessibility Checker - this is the tool I used to check my portfolio site (see further details below). Web browsers, such as Firefox, also come with tools in the Inspector to check the Accessibility Tree. You can learn more about Firefox's accessibility tool in this YouTube video from Mozilla.

Further Reading

Before moving on to how I tested my portfolio site and increased the accessibility, here is a list of articles I found useful for this task and are recommended to you as you learn more about making your projects accessible.

Testing My Portfolio Site

When I first setup my portfolio site (as part of freeCodeCamp's Responsive Web Design course) I initially picked the colors to match one of the GitHub pages themes (Cayman). It featured the colors blue and green which initially reminded me of the ocean or water. However, it wasn't until after I had gone through all the work of setting up the site did I remember that there are people who have blue-yellow color blindness. In this particular form of color blinded, people have trouble distinguishing between blue and green, and yellow and red.

I knew this was something I would have to update - especially since it's part of my outward facing presentation of my work I'd hate for a blue-green color blind recruiter to see it - however, like so many things it got pushed to the end of my to-do list. That is, until earlier this week when I had some extra time to tinker with my site.

Before

Going in I knew I wanted to change the color scheme to something other than blue-green, but I also wanted to know if there were other areas that needed improvement. I did some searching on the web and I found the Free Web Accessibility Checker. This tool will scan your webpage (or entire site), give you an overall accessibility score, and suggestions for improvements. My initial score was 77/100 or a C+ in the jargon of education. Average, but not great.

Looking at the list of suggestions I needed to make adjustments to the following:

  • Update the HTML tags so they're there's a unique ID for each elements (as I understand it these tags are used in assembling the accessibility tree which is used as a reference by assistive devices)

  • Improve the color contrast for the text elements (this is both for color blindness as well as other visual impairments or for anyone who just wants something easy to read)

  • Add alternative text for the images (something else used by assistive devices for those with visual impairments)

After

With my checklist in hand, I set to work on updating my HTML and CSS files. The task itself wasn't too challenging, but it was tedious to re-read each file and make the necessary changes. In the future, I'll make a better habit of doing this as I build.

After making the necessary changes, I ran the URL for my site through the accessibility checker and received a score of 100/100! Hooray!

Screen Shot of my accessibility score after I made changes

Here's a video featuring with before and after images of my portfolio site. The latest version can be viewed at https://ananfito.github.io.

https://youtu.be/hjr6otX1J9Q

Conclusion

I know I still have more to learn when it comes to web development and accessibility, but this was a really great learning experience. My biggest takeaway from this is to build better habits as I build. Going back through my site wasn't a terribly painful experience, but it's certainly something that can be avoided with foresight.

Next, I know I have a few projects on my site that need to be made accessible on mobile web browsers. Understanding and using media queries is something I've already identified as a weakness of mine so this sounds like a great opportunity to take a deep dive and figure them out.

Thanks for reading! This is what I learned from making my portfolio site more accessible. I hope you found it useful and I'd love to hear from you in the comments.

What tools do you use to help make sure your sites/apps are accessible?

]]><![CDATA[Day 43: Functional Programming, JavaScript DOM, and the Pomodoro Technique]]>https://blog.ananfito.dev/day-43-functional-programming-javascript-dom-and-the-pomodoro-techniquehttps://blog.ananfito.dev/day-43-functional-programming-javascript-dom-and-the-pomodoro-techniqueSat, 17 Sep 2022 09:29:38 GMTToday's Progress:

I completed the Functional Programming section of freeCodeCamp's JS course.

Next up is Intermediate Algorithm Scripting, then I'll start the certification projects.

I also read through a tutorial on how JavaScript DOM works and I read through some of MDN's accessibility guides for upcoming blog post on how improved the accessiblity of my portfolio site.

Quotes & Key Ideas:

  • DOM = Document Object Model
    • "The DOM is a Web API that allows developers to use programming logic to make changes to their HTML code. It's a reliable way to make changes that turn static websites into dynamic ones."
    • "querySelector is a method which accepts the exact CSS selector in a string and returns one element. ... If you wanted to use this approach to select and return more than one element, you can use querySelectorAll instead."
      • Similarly, we can use getElementByClassName, getElementById, getElementsByTagName to select elements. However, these are more restrictve than querySelector and querySelectorAll which are more general
  • Manipulation is the main purpose of DOM. It allows you to select the elements you want to work with to be able to add interactivity to your website.
  • There are two key concepts for understanding DOM manipulation: events and handlers:
    • events: An action performed by the user (e.g., click, swipe)
    • handlers: The triggered response to when an event is read
    • Responses are tied to each event and are monitored by event listeners such as the method addEventListener which takes two arguments (event, event handler)
      • Anatomy of an event: element.eventListenerMethod(event, eventHandler)
  • "The split method splits a string into an array of strings. It takes an argument for the delimiter, which can be a character to use to break up the string or a regular expression."
    • "Since strings are immutable, the split method makes it easier to work with them."
  • "The join method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string"
  • "The every method works with arrays to check if every element passes a particular test. It returns a Boolean value - true if all values meet the criteria, false if not."
  • "The some method works with arrays to check if any element passes a particular test. It returns a Boolean value - true if any of the values meet the criteria, false if not." (This is another one I encountered while building the Tetris app - admittedly at the time I was a little confused at what it was, but today I'm glad I got another, clearer look at it)
  • "The arity of a function is the number of arguments it requires. Currying a function means to convert a function of N arity into N functions of arity 1."
    • "In other words, it restructures a function so it takes one argument, then returns another function that takes the next argument, and so on."
    • "This is useful in your program if you can't supply all the arguments to a function at one time."
  • "partial application can be described as applying a few arguments to a function at a time and returning another function that is applied to more arguments."

Thoughts:

I had a great study session today. I used the Pomodoro Technique to stay focus as well as to stay active - during each break I made sure to stand up, stretch, and walk around. I listened to the Battlestar Galactica song Prelude to War on repeat while I studied and then switched to Fight Night or Allegro during the breaks.

This was a new strategy I implemented today. I've noticed previously sometimes I don't always take a long enough break so by listening to a different (shorter) song on the break I made sure I was staying active for a sufficient amount of time.

Today's freeCodeCamp challenges on Functional Programming were at just the right level of difficulty (or perhaps things are starting to make sense). I was having fun working my way through the challenges; they were like little puzzles that needed to be solved.

Also, now that I've completed this section there's only one more section to complete until it's time to work on the certification projects. I'm really excited about this because while I find the challenges helpful, working on projects is where I think I learn the most.

References:

https://www.freecodecamp.org/ananfito

You can read my full journal for #100DaysOfCode on GitHub

]]><![CDATA[Day 42: A Breakthrough While Using the reduce Method]]>https://blog.ananfito.dev/day-42-a-breakthrough-while-using-the-reduce-methodhttps://blog.ananfito.dev/day-42-a-breakthrough-while-using-the-reduce-methodFri, 16 Sep 2022 14:36:22 GMTToday's Progress:

I had a breakthrough while writing a function using the reduce method and I'm 75% done with 'Functional Programming' section of freeCodeCamp's JavaScript Algoothms and Data Structure course.

Quotes & Key Ideas:

  • "The reduce method iterates over each item in an array and returns a single value (i.e. string, number, object, array). This is achieved via a callback function that is called on each iteration."
    • The callback function takes four arguments: (1) the accumulator; which gets assigned the return value of the return value of the callback function from the previous iteration, (2) the current element being processed, (3) the index of that element, and (4) the array upon which reduce is called
    • In addition to the callback function, reduce also takes an initial value for the accumulator. "If this second parameter is not used, then the first iteration is skipped and the second iteration gets passed the first element of the array as the accumulator."
    • The MDN documentation a helpful example of reduce to calculate a sum
  • The sort method sorts elements of an array in ascending order (by default) BUT this based on converting the elements into strings and comparing the Unicode point value. However, this can return unexpected results. Thus, it's best practice to provide a callback function (usually called compareFunction) to define how you want the elements sorted. More details here.
    • NOTE: The sort method mutates the array it's called upon. One way to avoid this is to first concatenate an empty array to the one being sorted, then run the sort method

Thoughts:

I had a breakthrough in today's session: I managed to write an entire function without having to consult a "bazzillion" different sources. Lately I've had to refer to several different resources (e.g., documentation, forum posts, videos) to get through challenges. But today was different and it felt great!

While working on the challenge, I read the instructions carefully, broke the task into pieces, and only needed to refer to the MDN documentation once - and that was just for clarification on how syntax works for the reduce method. That's it!

It might not sound like a lot, but I almost screamed, "F*ck yeah!" when I saw the 'Tests passed' pop-up, but restrained myself since I was studying late and didn't want to disturb my partner (who was sleeping in the other room).

Feeling good about today's session and looking forward to more studying this weekend. (-:

References:

The following documentation was useful into today's challenges:

https://www.freecodecamp.org/ananfito

You can read my full #100DaysOfCode journal on GitHub

]]>