CSS in JS is a relatively new technique that lets developers write CSS code directly inside the JavaScript code instead of having separate CSS files.
The key benefits are:
CSS Box Model for Beginners
Every beginner should first start with the basics. In the case of CSS, the basics are learning the box model. Before proceeding with learning any other CSS concepts, this is the one you should master first!
The box model is the basic building block of CSS.
The Big Bang of Web Development: Let’s Talk About Accessibility
I want to take a break from the code focused session to talk about an important topic – accessibility. I was only recently enlightened as to how important this is at a conference I attended in April. Before we get too deep into this, if you want to review the coding stuff (as I will mention it occasionally in this post), review these posts:
1: Starting at index.html
Live Editing HTML and CSS With Chrome DevTools
Chrome DevTools is a powerful suite of web development tools built right into the Chrome browser. One of the most useful features of DevTools for web developers is the ability to live edit the HTML and CSS on a page. This functionality allows any developer, even those with weaker HTML and CSS knowledge, to quickly prototype and iterate on potential changes to a web page.
While working on Lucidchart, one of my recent projects was to add some check marks into the inputs where users fill in their billing information in order to convey immediate feedback when the users entered properly formatted and valid information. Even though I am more comfortable working in our backend code than I am with CSS and HTML, I was able to easily implement these check marks with the power of live editing.
CSS: :before and :after
The CSS :before and :after properties are what are also known as pseudo elements. They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them.
The Syntax
If we have an element like this one:
Never forget type=”button” on generated buttons!
I just dealt with one of the weirdest bugs and thought you may find it amusing too. In one of my slides for my upcoming talk “Even More CSS Secrets”, I had a Mavo app on a
Minifying a Custom Element That Contains Inline CSS and HTML
I’ve created a ShareButton web component, it’s not great, but I like it and I’ve learned a lot about the Web Component ecosystem whilst I was creating it.
My main goal with this project was to encapsulate everything inside a single ES6 Class. I did this because I didn’t want any non-developer controlled web request emanating from my element. I think I achieved this, but it came at the expense of some readability of the code because I had to inline the HTML and CSS that define the element.
HTML5 Boilerplate 6.1.0 Released
The news is coming fast and furious these days. Last week I offered up a big update on my SVG book (which I’m still in the process of finishing) and now I’m pleased to announce that we just released HTML5 Boilerplate 6.1. In addition to the regular updates to dependencies, etc. the biggest change was […]
Link: http://feedproxy.google.com/~r/HtmlCssJavascript/~3/6Tl2FkgI7mg/
Tabindex: A Quick Look
When dealing with element focusing, tabindex plays a big role. This attribute indicates if the element can be focusable and reachable via keyboard navigation. When pressing the Tab key, the browser shifts focus from one element to another. By using tabindex, we can change the tab order flow.
When creating an element, styling should be included.
Styling Components Angular 2
In my last article, we saw how to create your own component in an Angular 2 application and how to use it.
If you need a refresher before diving into this article, feel free to go through my previous articles on Angular listed below: