https://tomroth.dev/tags/web/Recent content in web on Tom RothHugo -- gohugo.ioenFri, 22 Nov 2019 00:00:00 +0000https://tomroth.dev/responsive-images/Fri, 22 Nov 2019 00:00:00 +0000https://tomroth.dev/responsive-images/Let’s start by introducing some of the HTML/CSS you’ll find when dealing with images. The <img> tag: The most common and probably easiest option for displaying an image. It’s a tag you’ve probably seen before. Use the src attribute to link to the image you’d like to show. But you can also use srcset and sizes to specify responsive images. More on that later. <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.https://tomroth.dev/progressive-enhancement/Sat, 16 Nov 2019 00:00:00 +0000https://tomroth.dev/progressive-enhancement/When you build a website, it should work everywhere. Websites should work with new browsers, but also with old browsers. They should work for users using speech-navigation software, and for those with slow mobile connections. Websites should also work for agents who don’t use them visually, like a web crawler. You’d love to show your awesome website properly to every user. Unfortunately, in real life that’s often not possible. So go for second best: provide some core functionality to everyone, and then give the enhancements to the browsers that can handle it.https://tomroth.dev/dpr/Fri, 27 Sep 2019 00:00:00 +0000https://tomroth.dev/dpr/From the fundamentals Link to heading The viewport of a device is the size of the screen area. This doesn’t include the space the browser window takes up with its menu, bookmarks etc. Different devices have different viewport sizes. Laptops and monitors have larger viewports than smartphones do. A website will display on the viewport of the device. This is where HTML and CSS code is displayed. Web developers use CSS to style and position elements.https://tomroth.dev/css-pixels/Tue, 17 Sep 2019 00:00:00 +0000https://tomroth.dev/css-pixels/Let’s start off with px and pt Link to heading You’ve probably seen the units px and pt before in CSS. If you didn’t know, px stands for pixel unit and pt stands for point. The units px and pt are related. 1px is always equal to 0.75pt, just like how 1 inch is always equal to 2.54 cm. Also, 1pt is equal to 1/72nd of 1 inch, meaning that 1px ends up about 0.