kottans-frontend
December 3, 2020 · View on GitHub
- Git Basics
- Linux CLI, and HTTP
- Git Collaboration
- Intro to HTML and CSS
- Responsive Web Design
- HTML & CSS practice
- JavaScript Basics
- Document Object Model
- Building a Tiny JS World
- Object-Oriented JavaScript
- OOP exercise
- Offline Web Applications
- Memory Pair Game
- Website Performance Optimization
- Friends App
Git Basics
What was learned:
- Free video course Version Control with Git on Udacity.
- Practice cource Learn Git Branching. It was just like a game!
I bookmarked this one Git Cheat Sheets because I hope it can help me in the future for sure.
What is Markdown? is great tutorial about how to use Markdown on Github.
My impressions:
I have been using git and github for my home projects just as a remote backup system for long period. But now I figured out one thing. When you meet your new working team, you have to ask one important question:
What do you prefer, guys? Merge or rebase?
Linux CLI, and HTTP
Screenshot of quizzes
What was new:
Possibility to print something right from console was really new for me.
What surprised me:
The same as the new one...
What I'm going to use in future:
Hmmm... I use console commands every day on my Linux laptop for different administrative tasks, for git, for ssh remote control... So I'm going to use all of these commands as long as I could... next 50 years at least, I hope... )))))
Some summary about my HTTP knowledge:
Of course, I have used GET and POST requests in my project. But now I want to have a task in the future where I can use PUT, DELETE, HEAD, and OPTION...
Git Collaboration
I have used one new piece of knowledge about collaboration work during those lessons. I have fetched from upstream repository new commits to my local repository and have rebased and pushed to my fork on Github. It brought my fork to the upstream actual state with console commands just in my local repo! This is amazing! )))
I was surprised that Github Pull Request workflow is so useful, simple, and comfortable for making changes in my pull request to kottans/mock-repo.
Intro to HTML and CSS
"Repetition is the mother of mastery." © John Doe
Screenshot of Udacity HTML CSS Intro Course
And this one from Codecademy Learn HTML Course:
These short courses are a great reminder about the roots of Front-end Web Development. It is impossible to do something in this sphere without these basic pieces of knowledge.
By the way, optional materials are a little more exciting: https://www.freecodecamp.org/andrewklmn
Responsive Web Design
What was new:
Udacity course has clarified for me the situation with responsive web design using CSS at last. No more Bootstrap magic!
What surprised me:
I have used Bootstrap in my projects for responsive pages, but now I can do this stuff even without Bootstrap!
What I'm going to use in future:
Breakpoint selection, media queries, responsive tables, grid and flexbox - I have all of them in my toolbox now.
HTML and CSS practice
This task was developed without JS. And was tested in FF and Google Chrome (Linux and Windows both).
JavaScript Basics
I like freecodecamp.org very much and even have earned few certificates:
- Responsive Web Design
- JavaScript Algorithms and Data Structures
- Data Visualization
- Front End Libraries
There are my study projects from these courses on Codepen.io: https://codepen.io/andrewklmn/
I feel ready to write code now!... )))
Document Object Model
What was new:
- Phases of JavaScript Event · Capturing, Target, and Bubbling.
- classList methods:
- classList. add/remove("class") – adds/removes the class.
- classList. toggle("class") – adds the class if it doesn't exist, otherwise removes it.
- classList. contains("class") – checks for the given class, returns true/false .
What surprised me:
document.querySelector(), document.querySelectorAll() - these are just cool stuff. I don't need Jquery anymore! )))
What I'm going to use in future:
All of these things above.
Some summary about DOM knowledge:
I have used this new stuff in my practice project. DOM knowledge helps to write simple clean code.
Building a Tiny JS World
Object-Oriented JavaScript
What was new:
Possibility of class definition and usage just with functional mechanism.
What surprised me:
JS allows to implement inheritance with a functional mechanism. It looks very cool! Prototype chains in case with methods looks similar to virtual functions in C++. I didn't wait to face it in JS.
What I'm going to use in future:
I have used these new pieces of knowledge in my practice task Frogger Game. My task code looks very short, laconic and clear with it.
OOP exercise
It was first usage of my new experience with definition of classes with functional mechanism from previous task. But at the end, at suggestion of mentors, I refactored my code with ES6 classes. ))))
Offline Web Applications
What was new:
Service Workers, IndexedDB, Advanced using of the cache.
What surprised me:
Nowadays modern browsers let developers build offline web applications with a wide range of storage usage. Service Workers can control even the versions of CSS files on the browser site. So it seems like a full range of backend features in the browser just under the hood. It is possible to build a web app that can run without any interaction with networks after first loading from a remote site.
What I'm going to use in the future:
I have forked wittr project to my Github profile. And I'm going to use it as a workbook in the future. I'm going to rebuild one of my home projects as an offline app with these new pieces of knowledge.
Memory Pair Game
Special thanks to MadmaxWMFU! )))
Website Performance Optimization
Website Performance Optimization, Udacity Course by Google:
Screenshot of Pizza web app Pagespeed Insights index before and after optimization.
Mistakes and strange result in Udacity Browser Rendering Optimization Course.
That code can't get that result!
Of course it must be querySelectorAll('p')...
Example of Udacity optimization solution slows down the browser!
May be it's because this example is 6 years old. It seems like new browsers have better optimization mechanism.
Browser Rendering Optimization, Udacity Course by Google:
Screenshot of optimized projects.
Responsive Images, Udacity Course by Google:
Screenshot of responsive images project.
🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈
What was new:
DevTools Profiler with timeline, Render pipeline in the browser, requestAnimationFrame(), Web workers.
What surprised me:
Web workers are just like goroutines in Golang or threads in C. I didn't think to face it in the browser's JS. When I was trying to use 'for' loop for the time delay in web worker I was surprised that only a number of loops up to 20000000 can make a tiny delay that I can identify with my eyes. Browser's JS engine is really very fast. But for 60 fps animations, we have only 12ms for changing the image on the screen with JS.
What I'm going to use in the future:
This Website Performance Optimization section is the first time when I read about the performance and timing diagrams in JS. Now I understand how I can use it, where I can find bottlenecks of performance... So I think every new project of mine will be checked and improved with these technics in the future.
Friends App
