My bookmarks and blogposts regarding Web development, JavaScript, C#, ASP.NET, EPiServer, CSS, Html
I’m thrilled to announce that Blazor WebAssembly is now officially released. This is a fully-featured and supported release of Blazor WebAssembly that is ready for production use. Full stack web development with .NET is now here!
Source: Blazor WebAssembly 3.2.0 now available | ASP.NET Blog
Great icon library with lots of categories, searchable tags and good pricing.
Source: Streamline 3.0
Use Interpolate: body height: calc(100% – #{$body_padding})
Source: css3 – Sass Variable in CSS calc() function – Stack Overflow
Snippet for positioning items centered horizontally and vertically:
|
1 2 3 4 5 |
display: flex; /* turn flexbox on */ justify-content: center; /* center horizontally */ align-items: center; /* center vertically */ |
Snippets for container positioning items and IE10 rules:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* IE 10 flexbox cheatsheet */ /* enable flexbox */ display: flex; display: -ms-flexbox; /* container - horizontal align items */ justify-content: flex-start | flex-end | center | space-around | space-between; -ms-flex-pack: start | end | center | distribute | justify; /* container - vertical align items */ align-items: flex-start | flex-end | center | stretch | baseline; -ms-flex-align: start | end | center | stretch | baseline; /* container - vertical height for items when extra space is available (multi line) */ align-content: flex-start | flex-end | center | space-around | space-between | stretch; -ms-flex-line-pack: start | end | center | distribute | justify | stretch; |
Read more here:
css-tricks.com/snippets/css/a-guide-to-flexbox/
Legacy browser support: (E.g. Internet Explorer 10):
https://css-tricks.com/using-flexbox/
Cheatsheet flexbox equiv. for IE10:
https://gist.github.com/Paul-frc/3ed765ed10c9635384e98f58334081e4
Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies when working with the overall layout of elements…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
* { background-color: rgba(255,0,0,.2); outline: 1px solid rgba(255, 0, 0, 0.5); } * * { background-color: rgba(0,255,0,.2); } * * * { background-color: rgba(0,0,255,.2); } * * * * { background-color: rgba(255,0,255,.2); } * * * * * { background-color: rgba(0,255,255,.2); } * * * * * * { background-color: rgba(255,255,0,.2); } * * * * * * * { background-color: rgba(255,0,0,.2); } * * * * * * * * { background-color: rgba(0,255,0,.2); } * * * * * * * * * { background-color: rgba(0,0,255,.2); } |
The current filter will only show the request matching a GET and contains url user:
method:GET user
(used under F12, tab network, filter text input)
Source: Network request list – Firefox Developer Tools | MDN
Microsoft has just unveiled official preview builds of the upcoming Microsoft Edge web browser that is based on Chromium. Interested users can head over to the Microsoft Edge Insider website to download Beta, Dev, and Canary builds of the upcoming version of Microsoft Edge for Windows 10.
Source: Official Microsoft Edge Preview builds available – gHacks Tech News
Bulma is a free, open source CSS framework based on Flexbox and used by more than 150,000 developers.
Site: bulma.io
Getting started with bulma video: https://www.youtube.com/watch?v=MchBPICewgs