A few new tricks you may have missed

 
 A screen shot from the FREE LEARN CSS course Provided by  SCRIMBA.com

CSS GRID

Learn CSS grid for free on SCRIMBA.COM

CSS Grid allows us to create 2 dimensional layouts using the css as the primary positioning guide instead of the HTML. When you are using something like Bootstrap, You build rows and then styles each column inside each row.  This makes it quite difficult to move things around in a responsive landscape because items in one row, can't jump to another row.... This would  have to be done in a media query where you re-write the design using HTML & CSS, so that it basically says - On desktop - use this code, On tablet - do it this way, On mobile - make it this way.  In that example you are writing the same code three different times and showing only what you need to see based on the break points or specific device. 

With Grid, The css styles govern positioning so that you can establish in the CSS where things need to be and you don't have to rewrite the code because the css looks at the same break points and moves things around accordingly.  Why this is important is the it gives you the freedom to customize the layout, based on device, with much less code involved, and this means faster development and faster load.

FLEXBOX

Learn FLEXBOX for free on SCRIMBA.COM

Flexbox is similar to grid but it is better designed for when you want to manage content that is in a straight line that does not need to jump between rows and columns. It gives you the flexibility of being able to manage those lines and the items within the column or row. 

CSS Grid Gives you the ability to define the grid structure in the CSS instead of using html to define your layout. 

Put these two items together and you have a super powerful structure for building lightweight responsive layouts.  

ALPHA CHANNEL HEXADECIMAL WEB COLORS

This one caught me off-guard. I had no idea that hexadecimal colors supported alpha channel. 

So - Apparently the syntax for writing a hex alpha is as follows
R = Red, G = Green, B = blue and A = Alpha (Just in case this isn't obvious)

#RRGGBBAA

And to figure the alpha channel takes a little math and a decimal to hex converter.

First - Take your desired alpha channel setting (ie: 50% alpha channel), You need to convert it to a decimal and multiply it by 255. .5 x 255=127.5 And since decimals won't work - we round up (or down) and in this case the number is 128. Enter 128 into the decimal to hex converter and you get the number 80. 80 is the hex representation of 50% alpha.

If you only get a single number (ex: .5% = D) then add a zero in front so it shows as:

0D = 5% alpha & #0000000D is 5% total black

80 = 50% alpha $ #00000080 is 50% total black

So, this is a lot of math that you have to do so - Instead...Here is a rough layout of Hex alpha values for you.

*NOTE: I originally had the order AlphaRGB and I have since learned that (while it works that way sometimes), RGBAlpha is the correct way.  I am also seeing that it is not very well supported currently and does not seem to be better than the RGBA alternative which sets the Red, Green, Blue, values followed by the alpha (ex: rgba(0,0,0, 0.5))
~ Still - This could be the future of hex values and it is cool to watch things change.

HEX VALUE

100% = FF
95% = F2
90% = E6
85% = D9
80% = CC

75% = BF
70% = B3
65% = A6
60% = 99
55% = 8C

50% = 80
45% = 73
40% = 66
35% = 59
30% = 4D

25% = 40
20% = 33
15% = 26
10% = 1A
5% = 0D

Progressive web applications (PWA)

Creating your first PWA

Progressive web applications are web based applications that that use modern web like capabilities to deliver an APP like experience to the USER.  Unlike native mobile apps, they don't require an install. They run from the web but they deliver an experience more in line with an installed mobile app.

PWA's work regardless of browser choice because they are built using progressive enhancement as a core tenent. In layman terms, it prioritizes content as it loads so that the most important core pieces are loaded and then everything else fills in the back as the network allows. Because of the progressive enhancement, PWAs work well even on low-quality networks. The shell model separates functionality from content so they have the feeling of a native app. They have features like push notifications that make re-engagement easy. They are served through HTTPS so they are also safe, secure, and always up to date because they pull content from web servers. This also means that they are discover-able and don't require an install on your device. You can simply save a shortcut and treat it like an app without having to download from an online store and installing the application. 

In truth - I am personally quite new with PWAs but extremely excited about what we have seen so far. However, If you're like me, and this brief overview has piqued your interest, Here is another article on PWAs by Peter O'Shaughnessy. 

Want more?

Here is an awesome list of front end tools

Here is a hexadecimal to decimal conversion table

flexboxfroggy.com (A fun little game that teaches you flex positioning)

 
David Wall