I am pretty much beginner when it comes to CSS page layout techniques. Even though I’m comfortable using Bootstrap to do layout elements, but still, there is something missing. Something which I don’t quite understand when it comes to layout elements without relying on a CSS framework. So, I decided to make my self aware of different techniques for CSS page layout.
After I finished reading the Introduction to CSS layout article, I can categorize two ways to do layout:
- the old-fashioned way
- the modern way
The old-fashioned way is when using Float and Positioning techniques, while the modern way is using CSS tables (display: table), Flexbox and Grid.
I’m glad to aware there are many options to layout elements, and I am more inclined to deep dive for each of the techniques mentioned before.
Working as a front-end developer I frequently using DevTools Console to do almost anything inside the console (e.g. interacting with the HTML document using DOM API).
I usually open up DevTools Console with the following steps:
- Pressing this combination of keyboard shortcuts: Ctrl + Shift + I.
- Click the Console panel.
Slightly longer path to open up DevTools Console
but, there is a shorter path, just press Ctrl + Shift + J.
Thanks for the universe for pushing me to get better at something, and this article Tools for Web Developers: Using the Console.
It’s cool, isn’t it? Imagine if we can tap this tool into build process to keep the codebase as clean as possible. But, if you guys also curious enough about jsinspect like myself, try to use it in your daily workflow, see how the tool can help you find the duplicate code easily.
I skimmed the window object references and interested to know more details about the window.onload event. Something that I frequently used in many other ways, but I notice something that I didn’t know. The things that I didn’t know about this event is when is the window.onload will be called, it’s:
- called after all resources loaded (e.g. css, js, images, scripts, etc.)
- called after the DOM are fully loaded
These are the quote that I and every other developer who just take their first step into front-end development should keep in mind when talking about DOM.
Document Object Model (DOM)
If you need a brief conceptual introduction to the DOM head over to MDN.
DOM is just an API while another DOM might refer to someone at The Fast and the Furious movie.
Working with the distributed team is interesting and required different way to run a daily scrum. With that conditions we cannot communicate with each others face to face. Thank god we have Google Hangout which allow us to communicate easily with video chat. Based on my experiences so far Google Hangout are more realiable than Skype.
Another good thing is we can create an event in Google Calendar and add video call to the event which is handy so everytime the calendar notification popped up we can right away open the video call.