Finished reading The Next.js Handbook. Built this app to follow along with the book.
A daily log to write about everything I'm working on and learning.
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.
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. Read in "JavaScript Enlightenment" book.
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.
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!
.
.
const updatedObj = { ...obj }
updatedObj[key] = value
.
.
.
.
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.
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.
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.
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. ;)
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.
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.
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.
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.
Continued working on the Todo list app, I have finished more than 90% of it.
Started working on a small React project with Kirupa. It's a simple Todo list app, and I'm so excited.
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.
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
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.
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. ♥
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!
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 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.
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.
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:
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.
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.