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

Main Learning Subjects

HTML

What I should learn in the next 6 months in HTML is:

CSS

What I should learn in the next 6 months in CSS is:

JavaScript

What I should learn in the next 6 months in JavaScript is:

Learning Resources

    Courses

  • HTMLCSS
  • CSS
  • CSS
  • CSS
  • CSSJS
  • JS
  • JS
  • JS
  • JS
  • JS
  • JS
  • JS
  • JS
  • HTMLCSSJS
  • JS
  • JS
  • JS
  • JS

    Books

  • JS
  • JS
  • JS

    Tutorials

  • JS
  • JS
  • HTMLCSSJS
  • CSSJS
  • HTMLCSSVanillaJS
  • JS
  • CSSJS
  • JS
  • HTMLCSSJS
  • VanillaJS
  • HTMLCSS
  • CSS
  • CSS
  • CSS
  • JS
  • HTMLCSSJS
  • JS
  • HTMLCSSJS

    Project Ideas

  • CSSJS
  • VanillaJS

    Subjects

      Web Components

    • JS
    • JS
    • JS

Everyday

A daily log to write about everything I'm working on and learning.

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

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

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

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

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.

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.

Front-end Daily brand logo 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.

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.

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

React Smooth Sliding Menu

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!

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

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.

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.

Simple React Todo List App

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

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:

Simple React Counter

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:

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

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:

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

It's Friday

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.

Modal overlay

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:

Vanilla JS interactive navigation menu

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

OH, YEAH

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.