My bookmarks and blogposts regarding Web development, JavaScript, C#, ASP.NET, EPiServer, CSS, Html
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
IE 11 and Angular don’t always mix. I must say that there’s quite the support provided by the Angular dev team and community. But, there are things that really aren’t up for the Angular devs to fix.
I’ve created a small list of issues I’ve encountered when developing and Angular 5 application for an IE 11 client.
Source: Internet Explorer 11 and Angular 2+ – Agilix – Medium
This is taken from Jon Hilton, Quick Tip Friday newsletter.
You can subscribe to the newsletter here: https://jonhilton.net/
Its a great tip regarding example code for popular web frameworks (also mobile in the works), for example ASP.NET Core on the backend side and Angular or Vuejs on the frontend side etc. See list of backends and frontends here: (scroll down there are many options…)
https://github.com/gothinkster/realworld
Building software applications is hard, but doing it in isolation is even harder.
And, unless you’re one of the fortunate few who work in a perfectly balanced team with just the right amount of experienced developers to lean on, you’re often left figuring all this stuff out for yourself.
· Architectural best practices
· How to organise your code
· How to separate your concerns
· Which ORM to use
· How to KISS (keep it simple stupid) and avoid incurring loads of technical debt
But, just because you haven’t got a supportive, experienced and wise team physically on your doorstep doesn’t mean you have to re-invent all the wheels yourself!
Specifically I really want to recommend you check out the “real world” examples over at https://github.com/gothinkster/realworld.
There, they take the exact same application (a Medium clone) and show examples built in all manner of front-end and back-end frameworks.
So if you’re looking to see what a good ASP.NET Core API application looks like (or React, Angular, Vue.js or anything else you can think of)
npm and Yarn are two well-known JavaScript package managers. If you’re not familiar with what a package manager does, it essentially is a way automate the process of installing, updating, configuring, and removing pieces of software (AKA packages) retrieved from a global registry. In this post, we’ll be going over what differences exist between two of the most popular JavaScript package managers – npm and Yarn.
Source: npm vs Yarn – Which Package Manager Should You Use? – KeyCDN
Test your front-end against a real API
A hosted REST-API ready to respond to your AJAX requests
Source: Reqres – A hosted REST-API ready to respond to your AJAX requests
I needed to truncate text in certain device sizes in a Bootstrap 4 enabled site.
Bootstrap comes with the text-truncate css class that will truncate text in elements that are in displayed as block or inline-block.
There is no support for targeting the different viewports out the box.
Here is solution for this;
We want the text of this element to truncate (Shorten the text if it doesnt fit and adds … to the end of the text) on smaller devices:
|
1 2 3 |
<p class="text-truncate-xs text-truncate-sm">Maecenas egestas arcu quis ligula mattis placerat. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Phasellus tempus. Vestibulum fringilla pede sit amet augue.</p> |
Include this scss file to your site:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@mixin text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @include media-breakpoint-only(xs) { .text-truncate-xs { @include text-truncate; } } @include media-breakpoint-only(sm) { .text-truncate-sm { @include text-truncate; } } @include media-breakpoint-only(md) { .text-truncate-md { @include text-truncate; } } @include media-breakpoint-only(lg) { .text-truncate-lg { @include text-truncate; } } @include media-breakpoint-only(xl) { .text-truncate-xl { @include text-truncate; } } |
Here is a way to make object fit for images behave similarly in Internet Explorer and Edge.
The basic idea is that we have an img that we want to scale into different sizes but also proportions (e.g get wider or higher than the original image).
We allow some clipping occur to enable this. This is especially useful in responsive website where you need to support different viewports and perhaps number of columns for a list of images etc.
More info here and examples of clipping of image etc:
https://www.w3schools.com/css/css3_object-fit.asp
We use this css styling to enable that on the img element:
|
1 2 3 |
object-fit: cover; |
Unfortunately object-fit is supported by all major browsers except Internet Explorer and Edge. A way to make it work in those browsers is to copy the image src to the image container element and use the background* css propeties instead.
The code and idea is taken from here:
https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3
I have tweaked the above example a bit and here is my version of it. See comments section in the link above for plain js versions etc.
We mark the img with the class “img-cover”:
|
1 2 3 4 5 |
<div class="img-container"> <img class="img-cover" src="http://via.placeholder.com/800x380" /> </div> |
Download here: img-cover-source.zip
The js has dependencies on jquery 3.2.1 and modernizr 3.6 (I have tested with those versions).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$(document).ready(function () { //Object fit fallback for Internet Explorer and Edge browser. 2018-11-22 //Makes an image inside img element fill its container either vertically or horizontally. (like a background css cover) //Allows clipping of image but keeps the aspect ratio. //Uses jQuery and Modernizr 3.6 to check if polyfill is needed. //Idea and code from https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3 //Replaces img with background image on container and sets the img opacity to 0 (making it invisible and shows the bg image instead). //Select image with image cover behaviour: var imageSelector = "img.img-cover"; var $images = $(imageSelector); //if any image cover type of elements were found if ($images.length > 0) { //if browser do not support object fit - apply polyfill if (!Modernizr.objectfit) { $($images).each(function () { //copy img src var $container = $(this).parent(); var imgUrl = $container.find('img').prop('src'); if (imgUrl) { //set img as background image of container instead $container .css('backgroundImage', 'url(' + imgUrl + ')') .addClass('compat-object-fit'); } }); } } }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.img-cover { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; } .compat-object-fit { background-size: cover; background-position: center center; } .compat-object-fit .img-cover { opacity: 0; } |
The html should look like this when the polyfill is working in Internet Explorer or Edge:
|
1 2 3 4 5 |
<a class="compat-object-fit" style='background-image: url("example.jpg");' href="/article1"> <img class="img-cover" src="example.jpg"> </a> |
The container (a-element) gets the compat-object-fit class and inline style background image is copied from its contained img src. Also the css file will set the contained img to opacity 0 in favor of container bg image instead.
Common mistakes designers make and how to fix them