Frontend Daily LogTo be a Front-End Web Developer..

Finished reading The Next.js Handbook. Built this app to follow along with the book.

Started reading a new book in learning Next.js: The Next.js Handbook written by Flavio Copes

Started learning Next.js framework. Built this small app just in order to test that new technology; NextJS!

Completed the "React for the rest of us" course with Brad Schiff. Pushed the application up onto the internet! Check it out on Netlify: Writescape

Read in "JavaScript Enlightenment" book. Continued working in "Booklist" the VanillaJS app.

I read

• Explaining the importance of the key prop in React

Continued studying "React for the rest of us" course.

Continued studying "React for the rest of us" course.

I read

• Create custom keyboard accessible checkboxes
• Increase Your Chances Of Getting Hired As A Code Newbie
• How To Get Programming Project Ideas

Continued studying "React for the rest of us" course. Read in "JavaScript Enlightenment" book.

I read

• Using closest() to return the correct DOM element

Continued studying "React for the rest of us" course.

Continued studying "React for the rest of us" course. Also, I've revisited the latest VanillaJS app i worked on last week, and started working on its UI.

I read

• Better (more accessible) active link styling

Continued studying "React for the rest of us" course.

I read

• A nice little write-up in how to make one time event handler.

While I was working on a full-stack React app I noticed that when I used the React hook useEffect in order to be invoked immediately after updating a piece of State, I noticed that it also be invoked at mount, not only at updating!

Continued studying "React for the rest of us" course.

Continued studying "React for the rest of us" course.

Continued studying "React for the rest of us" course.

Continued studying "React for the rest of us" course.

Started a new course I was waiting for. It's a React course (React for the rest of us) by the great Brad Schiff using the latest modern practices. Finally I have started building my first real single-page application!

It was the first time today to know about something called "Computed Property Names" in JavaScript (ES6). I took a copy of an existed object with ES6 spread operator ...obj, and then with ES6 "Computed Property Names" syntax, I was able to update the copied object values using the object literal notation by assigning an expression as a property in the same time inside the object not outside it!

That old way:

.
.
const updatedObj = { ...obj }
updatedObj[key] = value
.
.

The new one:

.
.
const updatedObj = {
  ...obj,
  [key]: value
}
.
.

I learned that for the first time from Wes Bos's React for Beginners course. All the time, I learn new things from Wes. Thanks a lot to him.

Continued studying the React for Beginners course.

I read

• Computed Property Names in JavaScript

Learned about the React method useEffect(). Continued studying the React for beginners course, and learned how to integrate React with Firebase.

Continued working on the VanillaJS project. It was a cool day! I learned how to return multiple values from a Promise or any JavaScript function!

Continued working on the VanillaJS project.

Continued working on the VanillaJS project. Read about Prototypes in JavaScript. Learned a new way to deal with State in React, using the useState() method.

Continued working on the VanillaJS project.

Fished JavaScript Objects and Prototypes In-depth course. Started building a new VanillaJS project.

Read in JavaScript Enlightenment book. Watched 3 episodes from Java Brains about Objects and Prototype in JavaScript.

Read in JavaScript Enlightenment book.

Made a lot of progress today in the React application from the current React course that I'm studying with Wes Bos.

Learned about the array methods reduce/reduceRight.

Read in JavaScript Enlightenment book. Watched 3 episodes from Java Brains about Objects and Prototype in JavaScript.

Read in JavaScript Enlightenment book. Watched 3 episodes from Java Brains about Objects and Prototype in JavaScript.

Studied a little in React from React for beginners Wes Bos's course.

Read in JavaScript Enlightenment book. Watched 4 episodes from Java Brains Youtube channel about Objects and Prototype in JavaScript. Started studying a new React course by Wes Bos.

Renamed the title of this page to "Front-end Daily Log", and updated the header brand design.

Finished the application and pushed it up onto the internet! View it live at Heroku, or you can check out its source files. Also I learned about JSON and AJAX.

• JSON and AJAX

Learned a little about CSRF. Built my first API!

Built a live chat using Socket.IO. Added browser-side validation to the registration form in the current application.

Added a new feature to the app; News Feed. Gave users the ability to follow each other. I'm really having fun! :D

Set up Webpack for the current NodeJS project I'm working on. Learned how to run multiple commands in the same time using the NPM Concurrently package. Added a live search feature to the app using Axios.

Wrote code to check if the current visitor is the owner of the post he is viewing. Gave the users the ability to edit, update and delete their posts. Integrated markdown-based content into posts.

Finished Kirupa's React for Beginners article series. Built a post model, and wrote code for viewing users posts.

I read

• Updating to Newer React Versions

Integrated Gravatar in the application I'm working on by generating a MD5 hash for the user's email. I needed to use the md5 package to do that. Also, I found a pretty easy way to implement that by leveraging the crypto NodeJS module.

Learned a little about Sessions and how to identify users when they login or logout.

Learned how to set and get environment variables in Node.js.

Got a general idea of Promises in JavaScript and learned how to create a new promise and leverage it, and learned how to leverage an pre-existing promise like the one that MongoDB creates when we perform a CRUD operation.

Also, I learned how to hash users passwords in Node.js using the NPM bcryptjs package.

Made a cool sliding menu with React. ;)

I read

• Get and Set Environment Variables in Node.js

Learned about MVC Design and Architecture Pattern. Added validation to the user model in the current app I working on. Learned how to connect the app to database in reusable fashion, and this was amazing!

Continued learning about Redux. Read about how it works with React. Built a small thing combines between the two.

I Read

• Using Redux with React

Read an introduction to Redux by Kirupa and learned how it works. Started on building a complex training project using Node.js, Express.js and MongoDB. Also I learned how to use Express routers.

I Read

• Introduction to Redux

Learned a lot today about database basics and CRUD operations! ♥ I've built a full-stack app using MongoDB, Express.js, Node.js and Axios as a promise based HTTP client for the browser.

View it on Heroku.

Revisited some fundamentals of JavaScript. Learned server basics and how to build a server using Node.js and Express.js.

Got started on studying a new course by Brad Schiff to improve my skills in JavaScript: Learn JavaScript: Full-Stack from Scratch, and this is the third course that I've studied so far with Brad. Brad has taught me a lot! Thanks Brad.

Continued learning React. Today I learned about Routing in React. Also I learned how to make HTTP request and receive some data from a web service. Printed out user's IP address on the screen. Made a simple single-page app (SPA), and deployed it on Netlify.

I read:

• Working with External Data
• Creating a Single-Page App Using React Router

My personal website is live now! I finished working on CSS styles and handled the site pages as I needed. You can browse it on Netlify. Don't forget to view my portfolio. :)

Still working on redesigning my personal website.

Still working on redesigning my personal website.

Still working on redesigning my personal website.

Still working on redesigning my personal website.

Still working on redesigning my personal website.

Still working on redesigning my personal website.

Started in redesigning my personal website with the static site generator Eleventy, VanillaJS for scripts and VanillaCSS for styles.

Done with converting the whole of this page you are browsing now to be a simple static website. I built it from scratch with Pug.js, PostCSS and Webpack. View it on Github.

Completed the Todo list app. You can find the source files on Github, or test it live on Netlify.

Continued working on the Todo list app, I have finished more than 90% of it.

• Building a Simple Todo List App

Started working on a small React project with Kirupa. It's a simple Todo list app, and I'm so excited.

• Building an Awesome Todo List App in React

Have fun, it's Friday. That's all. :)

Read about Stateless Functional Components. Learnt how to create a quickly React app using the npm package: create-react-app.

I read:

• Stateless Functional Components
• Setting Up Your React Dev Environment Easily

This frees you from having to deal with optimizing your event handler-related code yourself. If you've manually had to do that in the past, you can relax knowing that React takes care of that tedious task for you. If you've never had to optimize event handler-related code yourself, consider yourself lucky :P

Kirupa (hahaha :D ♥)

Continued reading about Events in React with Kirupa. And I made this pretty cool Counter! :D

I read:

• Events in React

Read about how to access DOM elements in React using `refs` and `Portals`. I need to read about Portals again until I fully understand. Also, I read about handling events from React Documentation. I would like to quote some paragraphs from there:

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

Read more: Handling Events

---

We sometimes use => to define "arrow functions". They're like regular functions, but shorter. For example, x => x * 2 is roughly equivalent to function(x) { return x * 2; }. Importantly, arrow functions don't have their own this value so they're handy when you want to preserve the this value from an outer method definition.*

---

The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

I read:

• Accessing DOM Elements in React
• Handling Events

Tried to write some ideas about what I learnt from CSS in the last month. (to be published later.)

Continued learning about State and Lifecycle. I read a clearly explained write-up about Component Lifecycle by the great kirupa, again! This guy is amazing! Thanks kirupa today and everyday. ♥

I read:

• How to add Flexbox fallback to CSS Grid
• Supporting older browsers

Continued learning React with Kirupa, and for the first time I had tried to learn something from its documentation, and this what I made today! I read about States from the React documentation. I read about State. I think I got it conceptually a little bit. It's simple, but I'm still confused about!

I read:

• Rendering Elements
• Components and Props
• State and Lifecycle
• Props vs State, A write-up about differences between Props and States, was so helpful. Thanks uberVU!
• Going from Data to UI in React. Learnt how to fearlessly deal with JSX in any sort of a JavaScript situation.

Friday? Yes!!! It's Friday, and I must dance :)))

Keep learning React with Kirupa. I got a problem with understanding what is State in React. I can't get it fully. :(

I studied:

• Creating Complex Components. View color palette card task on CodePen
• Transferring Properties
• Meet JSX...Again!
• Dealing With State
• React State From the Ground Up - CSS Tricks

I got started on React today, YEAH!!!

I start learning from a lovely tutorial for beginners by the great Kirupa web guy. I liked Kirupa way in teaching you how things are working in React.

I studied:

• How Much HTML/CSS/JS Do You Need to Know Prior to Learning React?
• Introducing React
• Building Your First React App, and this is my first React app!
• Components in React
• Styling in React

All morning I was struggling with an issue of using Mini Css Extract Plugin on my Webpack configuration. The issue was about that all images and fonts from inside CSS files were not loading in the browser, there was a problem on how the URL url('...') to background-image and @font-face was not being passed correct to CSS Production build code. But in the end I just accidentally solved it by a temporary solution I don't even know if I will get a headache from it in the future.

Also, I learned how to deploy my apps on Netlify. You can view the landing page I have been working on for the last month.

I have made a great progress, so far, in dealing with most of modern workflow tools for front-end development. What remains is some improvements I will take care of it on this coming friday.

Continued working on the modal to make it interactive on JavaScript DOM click event. And I learned how to detect a key press with VanillaJs. Also, I got started on configuring Webpack for Production build.

I completed the Scroll-spy Navbar task. I wrote CSS for a modal, but its JavaScript not done yet. I will finish it tomorrow.

I read:

• Sticky, Smooth, Active Nav
• Introducing the Button element, and a related pen.

Hello, I think that today was a JavaScript day! I made little things but it took up my whole day to write! I built a sticky header on scroll, and revealing effect for some items on scroll too, with help of the Lodash.js method: throttle. It was the first time for me to use Lodash. I'm proud of myself, and I can not wait until tomorrow to come to go on a new adventure with JavaScript.

Hello, my fake readers. Yes, It's friday! And I'm supposed to be having fun with anything except web things, but I have broken the rule, today, and read an article I want to save its link here:

• The Difference Between Width and Flex Basis

Today, I watched a cool lesson from brad's course (Git a Web Developer Job: Mastering the Modern Workflow), it was about OOP in JavaScript with pretty simple and clear examples. Then, I rewrote the interactive menu that I made yesterday to JavaScript class syntax, and it was amazing for me to write code in this way, I loved it.

I read:

• A Tale of 'width' and 'max-width', this little write-up confused me a lot! :(
• What, even, is the difference between width and max-width?

Today, I worked on finishing most of CSS styles for this training project. Also, I have started in making it interactive, I built a VanillaJS Navigation Menu for small devices. So, yeah, I made a lot of progress today. :)

In the last three days, I designed this beautiful challenge page. I named it"In 6 months". I aim to learn some stuff about the most things in the Front-End Web Development area that can help me to get a job in this great field.

Today, I would like to write a very important thing about me, that I like to design websites, so much. My favorite thing is absolutely playing with CSS in the browser. I like to use blue, grey, and pink colors. I prefer using flexbox and CSS Grid for designing beautiful layouts.