On September 22, 2020 I committed to #100DaysOfFrontEnd where I’ll be sharing everything I’m working on related to frontend development. Personal projects, courses I'm taking, tech reads, researching, testing, and many more!
Today's Progress: Started working on the Random Quote Machine generator in React.
Today's Learning: Finished the React JS course from freeCodeCamp.
Thoughts: This is the first time when I try to build an application in React. For this app, I've decided to use create-react-app. I've tried a couple of APIs to fetch data but, eventually, I decided to stick to Forismatic API. In the beginning, I've decided just to try slowly to use React, components, props, fetch and display data.
Link to GitHub: Inspirational Quote Generator
Today's Progress: Worked on Inspirational Quote Generator project.
Today's Learning: I reviewed my notes from the FCC React course and I've also read through React docs. I'm planning on continuing to do so the next days as well.
Thoughts: Spent some time thinking more on the HTML structure since before I had a bunch of <div> tags. I refactored a bit the code since at the beginning I didn't know where to start with React. I decided to keep saving in the state only the information I needed. Made the "New Quote" button to generate a new random quote by making every time a new request to the API. Made the "Twitter" link work and now I am able to post the quote on Twitter.
Link to GitHub: Inspirational Quote Generator
Today's Progress: Worked on Inspirational Quote Generator project.
Thoughts: Spent some time trying out different styles for the app and implementing it. Decided to try out styled components for the very first time. Deployed the app to Netlify
I’ve created in Trello a card with all the things I have to add/change to the app (eg. add loader, remove comments and unnecessary files).
Today's Learning: I’ve learned that styled components are a css-in-js tool and their goal is to give a flexible way to style components. It makes more sense for me when I’ve read the sentence: “When you create a styled component, you are creating a React component with styles” (source Smashing Magazine). I’ve learned about the “createGlobalStyle” function used to style the global elements like html and body. I’ve also set up a shortcut in VS Code in order to make the css style be sorted ascending.
I've read:
- Useful article about styled components: https://www.smashingmagazine.com/2020/07/styled-components-react/
- Docs styled components: https://styled-components.com/docs/basics
Link to GitHub: Inspirational Quote Generator
Link to Netlify: Inspirational Quote Generator
Today's Progress: Worked on Inspirational Quote Generator project.
Thoughts: Today I had only 1 h to code so I decided to spend it continuing to work on the “Inspirational Quote Generator” in React. I’ve managed to configure Airbnb Style Guide and ESLint and improved the code based on the feedback received from ESLint. I’ve also removed unnecessary code and files, added meta tags, updated the title and added favicons. I still have a few things to work on and improve the app, but I’ll do it in the next period.
Link to GitHub: Inspirational Quote Generator
Live example: Inspirational Quote Generator
Today's Progress: Worked on Inspirational Quote Generator project.
Thoughts:
Today I've worked on fixing the error “SyntaxError Unexpected Token in JSON”. I've seen that from time to time, the response received from the API was a string.
As an example, whenever inside of the quoteText was a backslash, the response received from the API was a string.
{
"quoteText": "I can't imagine a person becoming a success who doesn't give this game of life everything hes got.",
"quoteAuthor": "Walter Cronkite",
"senderName": "",
"senderLink": "",
"quoteLink": "http://forismatic.com/en/342c3061d1/"
}As a result of that, I've switched from the fetch API in using the Axios library and integrated additional logic in order to handle the "string" response received from the API.
I've spent a lot of time figuring out how to fix this issue, mainly in the console, the network tab and researching online.
- Learned how to animate the octo arm path
- Learned that we can use
cssAPI which allows us to construct reusable CSS blocks (I’ve created a separate file called “mixins.js” repeated styles are added. - Learned that styled-components can incorporate animations by using the
keyframeshelper which generates a UNIQUE instance. - Learned how to target another styled component on hover
- Learned that we can interpolate other styled-components to refer to their automatically generated class names
- I officially registered for Hacktoberfest 2020, I’m super excited and scared at the same time.
- Used
git reflogandgit reset --softfor the very first time. I accidentally merged master into develop (What can I say? I will not code after 10 PM in the evening).
Useful Link: Adding CSS Animations with Styled Components
Link to GitHub: Inspirational Quote Generator
Live example: Inspirational Quote Generator
Today's Progress: Worked on my website.
Thoughts: Today I've worked on my website: added relevant information for each project, improved the overall layout, removed a couple of projects and reorganized the content.
Link to GitHub: - (private repository)
Live example: My Website
Today's Progress: Worked on Inspirational Quote Generator project.
Thoughts: Today I've implemented a loader for the “Inspirational Quote Generator” in React. Instead of using a package for the loader, I've decided to implement one by myself using styled-components. Also, I've organized a bit my code since it was a bit confusing while reading it.
I want to spend the end of the day reading through the React docs for at least 1 hour.
Link to GitHub: Inspirational Quote Generator
Live example: Inspirational Quote Generator
Today's Progress: Worked on Inspirational Quote Generator project.
Thoughts:
Coding update: I've added state for the button and links. Extended the RegEx expression that I had in the code (Context: from time to time the response received from the API contains non-word characters like slashes, quotes etc.) Today I also focused on accessibility, by testing the app using NVDA screen reader and improved the code in order for the app to be accessible.
Also went to a JSHeroes meetup online event about JavaScript Generators which was super interesting and nerdy (which I loved). Took a bunch of notes, need to experiment a bit with them.
Link to GitHub: Inspirational Quote Generator
Live example: Inspirational Quote Generator
Today's Progress: Worked on Inspirational Quote Generator project.
Thoughts:
Coding update:
Last day where I've worked on the "Inspirational Quote Generator" project in React. I created an issue to add tests in the near feature since this is the first project where I used React. I added a default state if the response returned from the API is an empty string for the author.
For the next days I will be able to code for only 1 hour (family is visiting), so I'm not sure how much I will achieve.
Also went to an UI testing meetup organized by Academia Testarii which opened a new horizontal for me regarding testing which was very insightful for me as a junior dev.
Link to GitHub: Inspirational Quote Generator
Live example: Inspirational Quote Generator
Today's Progress: Worked on "My Projects" page.
Thoughts:
Since today I had only 1 hour to code (family is visiting), I decided to focus on "My Projects" page. This page is a list of all the projects that I've built so far while learning to code.
I started working with branches and removed redundant code. Started adding a description for each project that I've built. I still have to add more and focus a bit on the layout, since it looks a bit funky, but I'm getting there.
Link to GitHub: My Projects Page
Live example: My Projects Page
Today's Progress: Worked on "My Projects" page.
Thoughts: Since today I had only 1 hour to code (family is visiting), I decided to continue working on "My Projects" page. This page is a list of all the projects that I've built so far while learning to code. I've continued adding a description for the projects and improved the overall page.
Link to GitHub: My Projects Page
Live example: My Projects Page
Today's Progress: No coding.
Thoughts: I decided to take a day off from coding since I could not find time for doing it while the family was around. Enjoying a full day with the family is always rewarding and it is like a reminder that sometimes is ok to take a break.
Today's Progress: Started working on the "Markdown Previewer" project from freeCodeCamp.
Thoughts: I've installed all the dependencies that I needed for this project.Today I've also had a job interview which went well and is something that keeps me focused on my goals.
Link to GitHub: Markdown Previewer
Live example: -
Today's Progress: I've worked on the "Markdown Previewer" project from freeCodeCamp.
Thoughts: I added a few functionalities, but I still have a lot of work to do.
Link to GitHub: Markdown Previewer
Live example: https://markdown-previewer-project.netlify.app/
Today's Progress: I've worked on the "Markdown Previewer" project from freeCodeCamp.
Thoughts: Instead of focusing on how the app looks, I've decided to try out React hooks and refactor the code a bit.
Link to GitHub: Markdown Previewer
Live example: https://markdown-previewer-project.netlify.app/
Today's Progress: Worked on the "Markdown Previewer" project from freeCodeCamp.
Thoughts: Since I'm using "marked" package which parses and compiles markdown I've decided to not use styled-components and stick with CSS. I've experimented with different layouts, but eventually, I've decided to have a 2 column layout for this project. I still want to continue experimenting with the styles to see if I can come up with something different.
Online Event: I've also participated in an online event about React and TDD ("React + TDD ===
Link to GitHub: Markdown Previewer
Live example: https://markdown-previewer-project.netlify.app/
Today's Progress: I've continued working on the Markdown Previewer from freeCodeCamp.
Thoughts: I've decided to add more content in the Editor textarea and the header elements. Also, I took the content from the header and move it to a separate component.
Online Event: The modern way to build the web with Gatsby on Twitch.
Today's Progress: I've continued working on the Markdown Previewer from freeCodeCamp.
Thoughts: Since I had only 1 hour today to code, I decided to continue working on the Markdown Previewer project in React. I've read through the docs and added more examples and information. Because of that, I've managed to pass 2 requirement tests from freeCodeCamp.
Since I'm using a code block as an example and JSX, I needed to escape 3 backticks that were inside another backtick. So I've learned that I needed to add in front of each of those 3 backticks a backslash. The code looks a bit weird but it works.
I've also learned new things about Markdown. One of those is that you can create a line break by ending a line with two or more spaces, and then press enter.
Today's Progress: I've continued working on the Markdown Previewer from freeCodeCamp.
Thoughts: Added functionality to interpret carriage returns and render them as line breaks. This was the last optional requirement, and now my project passes all the tests required by freeCodeCamp. Even if it is not required and for practice purpose, I decided to sanitize the data in order to prevent XSS attack. Made some small improvements to make it accessible.
Also, I've used GitHub CLI for the very first time in order to create 2 issues in my repository. It was so much easier and I didn't leave my Terminal.
Today's Progress: I've continued working on the Markdown Previewer from freeCodeCamp.
Thoughts: Today's focus was practising new things without actually committing the changes.
I've tried out React-Ace, mainly the Ace Editor, for the very first time. I've integrated it in my project but eventually I've decided to not use it since it will not pass the tests required by freeCodeCamp. Even if I didn't integrate it in my project, it was interesting to try it out alongside the available props.
In my project, I included a link to the repository.
I also learned that you can close an issue with a commit message by including in the commit message the keyword "close" followed by "#issueNumber" (eg. "Close #2"). There are also a few other keywords (close, closes, closed, fix, fixes, fixed, resolve, resolves, resolved).
Today's Progress: No coding.
Just a little update: I will start my first ever Front-End Web Developer role 🥳🥳🥳🥳.
I still want to continue with my coding challenge, but I decided to take a few days to reevaluate what skills and projects I want to build.
What I know for sure is that I still want to continue learning JavaScript and React and work on projects.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent