I’ve been hearing a lot about the 100daysofcode challenge and decided to why not attempt it.
Day 1 - To Do list:
As part of my internship with Techlarious and Two of Us, I’ve been assigned to do list web site. It has the following features:
-Add tasks: The user can add tasks to the list
-Edit tasks: The user can edit tasks that are already on the list
-Check tasks: The user can check tasks that are done (the tasks will appear crossed out)
-Delete tasks: The user can delete tasks
-Show active tasks: The user can filter to show only tasks that have not been completed yet (tasks that are not crossed out)
-show completed tasks: The user can filter to show only tasks that are completed (tasks that are crossed out)
-show all tasks: The user can view all their tasks no matter the task’s status
firstly I would like to apologize for the title of the post, but my name is real long and the form just wouldn’t accept such a long name.
The projects I worked on today are 2 rather simple projects.
firstly is the animation web site. It’s a web page shows a little animation of a dog following a cat that is also following a mouse. What I like about the project is that it’s purely HTML and CSS. No Javascript needed. It uses the rather unique html tag which scrolls whatever in the tag across the container. You can even set the directions and speed.
Secondly is the Sign Up web page that works like any other. The User must submit all the required information correctly. The password field and the confirm password field need to match. If the user’s email is already in the database then they can’t be registered again.
During my internship at @TECHlarious and @Two Of Us L.L.C, our instructor has demonstrated how to create a sort of quiz game. So I decided to apply what I learned during the internship to create my own quiz web site.
My quiz is about my favorite comedy show friends. It has 3 difficulties (easy , medium and hard).Each difficulty has 10 questions. The user will be shown a bunch of answers to a certain question and has to answer correctly. If they picked the wrong answer, it will be colored red while the correct one will be colored green. They gain more score with every correct answer. The quiz game ends when the user have answered all the questions or the time limit has reached zero. The user wins if they have answered correctly at least 70% of the questions
For today, I did a web page game where the user has to click on moles as they sporadically appear from holes. There are 3 difficulties (easy , medium and hard). The harder the difficulty the faster the moles appear and disappear. The website is also responsive so it works well with mobile screens too. The user scores point every
To Sharpen my JavaScript skills ,I made a matching tile game. How it works is that the player has 9 unknown tiles in front of them. There are 4 pairs of animals to match (lion,dog,eagle,squirrel) and one bomb. The player must match the same animal picture. If the player miss-matched then their score will lose points. If they click on the bomb then they automatically lose. What’s really cool is that the tiles are organized randomly every game session.
Day 6 of #100DayOfCode challenge: learning about APIs
I would like to thank @TECHlarious and @Two Of Us L.L.C for hosting a brilliant workshop “API POWERHOUSE: Crafting Utility Wizards with Node.js and MongoDB”. Through this workshop I managed to learn more about APIs and MonogDB.
Lots of really interesting utility programs were being demonstrated Like a url shortner,an image resizer, a pdf combiner, a password generator and so much more. All of these great programs were created using creative API development.
Day 7 of 100daysofcode challenge: learning about Deep Learning
Thanks to Lara Wehbe’ AI course, I was able to learn so much about Deep Learning ,it’s history , it’s application and the mathematical foundations.
Deep Learning is part of AI umbrella. It’s different from Machine Learning in that ML requires algorithms that can learn from data and requires human intervention while DL uses artificial neural networks to reach conclusions without human intervention.
Artificial neural network attempt to mimic the human brain through a combination of data inputs, weights and bias.
Day 8 of 100daysofcode challenge: Customizing my github profile.
Github is an important website for programmers. We use it store our projects and to easily collaborate with one another. That is why I have taken the initiative to clean up and prettify my profile.
In order to do so, I must create a repository that is named after my github account (Ibrahim-abdulwahab). This is a special repository where if I add a README file that contains a markup language like html, I can then customize my profile just like how I customize my own hand made website.
I used badges to indicate my social media profiles like LinkedIn and the mongodb forums and to indicate the websites that I use to practice coding like HackerRank and LeetCode.
I also applied a bunch of icons to symbolize the skills and languages that I use as a programmer.
There are already a bunch of simple projects in my gitub and I plan to upload more!
For today, I decided to sharpen my JavaScript skills by creating another simple game.
The player is prompted to type in their name. If they don’t, their name will default to “player”. The goal of the game is for the player to navigate their mouse through the maze to reach the end. The player must start at the starting zone (the small cube S) and has to try and reach the ending zone (the small cube E). If the player touches the maze’s walls or tries to cheat by going around the maze, then they get a penalty and lose 10 points (The maze will also get a red color). There is also a time limit and if the player doesn’t reach the end when time is up then they lose. Each successful lap in the maze decreases the time limit more and more.
The player can also reset the game by double clicking the starting zone.
Day 10 of 100daysofcode challenge : Creating a simple menu
for day 10, I spent my mourning creating a classic restaurant menu website, The website has 5 buttons at the header , each belonging to a category of food. Clicking on a button will show you the food that belongs to this category.
During my internship at @Techlarious and @TwoOfUs, I was tasked to work with a team. Through this experience I learned the value of having clean code. It’s bad habit of mine to have long messy looking code which makes reading it very difficult for other people. Even I when I look back at my previous projects have a bit of difficulty when reading and understanding my own code.
After searching online, I found this great presentation on how to keep my code clean:
I suggest that every programmer ;whether they are a beginner or a veteran, to watch this video in full for it’s pearls of wisdom , but if you are pressed for time here is the summary of advice:
- No one makes clean code at first. However you should spend time making it cleaner. Just because your code works doesn’t mean your job is done yet.
- A function should do one thing. If your function is doing multiple things at a time, you can probably divide that massive function into lots of smaller ones.
- Function names should be verbs, never nouns.
- Every line of a function should be on the same level of abstraction, and should be one below the name of the function
- A function that returns void should have a side effect. A function that returns a value should have no side effects.
- A function that has a try/catch block should only have that block
- Don’t let your function have more than three arguments.
- Don’t pass Booleans into a function (for the most part)
As part of my internship at @TECHlarious and @TwoOfUs L.L.C, I am task to learn more about Node.js.
Node.js is an open-source and cross-platform JavaScript runtime environment. Node is often used to build backend services like APIs. Libraries in Node prevent blocking behavior.
Since I already have some experience with JavaScript, I don’t have to learn a new programming language to use Node.js.
React is a JavaScript library for building user interfaces. It’s used for creating UI components, which can easily be composed together to build complex interfaces.
Using React we don’t need to use code that query or manipulate the DOM or even attach event handlers to the DOM elements.
MLOps stands for Machine Learning Operations. It is a disciplinary field to ensure robust, efficient and reliable management and deployment of ML models. It extends on the principles of DevOps in that it harbors smooth collaborations and communication between different teams like ML engineers , data scientists and data engineers, software engineers, DevOps and the production team.
MLOps aims to automate and optimize development cycles of ML models, ensures faster time-to-market, improve model quality and reduce costs
Day 16 of 100daysofcode challenge: Recreating the to do list project but using MERN stack
Previously I did a to do list project that utilized Html, CSS and basic JavaScript. In order to improve my MERN skills, I redid this project but this using MongoDB, Express, React and Node.js
This project has similar features as the old to do list. Users can add, update and delete tasks. The tasks are saved in MongoDB database.
I wanted to focus on the importance of comments in coding. Comments can be both good and bad. To avoid making bad obscuring comments, I have researched the topic and came up with the following pitfalls when writing comments :
Good code should be able to explain itself, but when that isn’t the case, that’s where comments come in to play. Comments should be a last resort. A way to express ourselves when we can’t express by code.
Comments lie. Not intentionally of course, but by forgetting to maintain or updating the comment.
Don’t comment code. It’s fine if you are experimenting , but delete it when you are done.
If you have bad code, clean it. Don’t compensate with comments.
Meaningful variable and function names are better at expression than comments.
Don’t mumble or talk to yourself in the comments.
For more advice on comments, I suggest to watch this presentation hosted by Uncle Bob:
Day 18 of 100daysofcode challenge: Supervised learning and unsupervised learning.
Supervised learning needs labeled data (inputs that we already know the correct output). The model trains using this labeled data and learns to predict outputs for new unseen data.(For example classification and regression problems)
Meanwhile unsupervised learning groups and interpret the input data in order to figure out some kind of relation or pattern that distinguish the data (For example clustering)
It is a popular, lightweight and flexible Node.js web framework used for building web applications, APIs and microservices.
Express.js provides request and response object to handle HTTP requests and responses. It also supports route definition using HTTP methods (GET,Post…etc) enable the use of middleware functions to perform tasks.
Day 20 of 100daysofcode challenge: Regular Expression (Regex)
Regular expression is used to check whether a string follows a certain pattern. It can also be used to search a long string of text to see if any part of it matches the regular expression.
Here are some rules for Regex:
Character class: Matches any of the enclosed characters. You can use a hyphen to indicate range. For example [abc] is equivalent to [a-c] and both match the “b” in the string “boy”.
Digit character class escape : /\d/ match any digit. Equivalent to [0-9].
Non-digit character class escape: /\D/ matches any charcter that is not a digit. Equivalent to [^0-9]
Word character class escape: /\w/ matches any alphanumeric character. Equivalent to [A-Za-z0-9].
Non-word character class escape:/\W/ matches any character that is not alphanumeric. Equivalent to [^A-Za-z0-9]
,
Day 3 of 
Day 4 of 
Day 6 of 
- No one makes clean code at first. However you should spend time making it cleaner. Just because your code works doesn’t mean your job is done yet.
MySQL is a table based system while MongoDB is a document based system
What is React? 
