A new video series: Web Demystified

This post introduces Web Demystified, a new video series targeting web makers — everyone who builds things for the web: designers, developers, project and team managers, students, hobbyists, and experts. Our goal is to provide basic information for beginners, with subject matter that will also serve as a refresher on web fundamentals – beginning with episodes that describe the web itself, and HTML, its first language.

Link: https://hacks.mozilla.org/2018/04/a-new-video-series-web-demystified/

Web Accessibility: Making the Web Accessible for All

The Significance of a Universal Design Approach
Inclusive or universal design ensures that the content of an application is easily recognized by screen readers (SR) upon which visually impaired people usually rely. Also, one can navigate through the content of a website using a keyboard alone, in a logical order. This is particularly helpful for people with mobility issues who may not be able to use a mouse. This is also useful for people who prefer to use a keyboard over a mouse. Similarly, providing closed captioning for video content is extremely useful for people with hearing-impairment. Again, this is also helpful for users who would prefer to view a video without sound, for example, while in a public place. This is especially helpful in creating social media content, where videos can be viewed in mute mode.
IMAGE 1: Snapshot of a video with closed captioning (CC), which helps people with hearing impairment to watch and understand video content.
Choosing color contrast and text ratios will help people with color blindness and would also offer better readability for other users.

Link: https://dzone.com/articles/web-accessibility-making-web-accessible-for-all?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

25 Years of Markup: The Evolution of HTML

Web developers today speak of frameworks, cores, web apps, and integrations but they hardly spare a word for the language all these are built upon: HTML. The HyperText Markup Language has been with us since the very beginning of the World Wide Web and has evolved together with the internet to offer an easy and incredibly usable way to create web pages. Without them, no website could exist – even those built entirely in Flash (there were quite a few back in the day) needed it to embed their interactive animations. HTML is everywhere, from the search results of Google to mobile web apps. Now, 25 years after its first implementation, let’s take a brief look at its history.
HTML
HyperText Markup Language was first proposed by the famed inventor of the World Wide Web, Sir Timothy John “Tim" Berners-Lee. He built this simple markup language based on SGMLguid, the standard documentation format used internally at CERN. The first publicly available description of the language only contained 18 elements, all of them inspired by SGMLguid with the exception of the hyperlink tag.

Link: https://dzone.com/articles/25-years-of-markup-the-evolution-of-html?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

CSS Position: Relative vs Position Absolute

The CSS position property defines, as the name says, how the element is positioned on the web page. There are several types of positioning: static, relative, absolute, fixed, sticky, initial, and inherit. First of all, let’s explain what all of these types mean.

Static – this is the default value, all elements are in order as they appear in the document.
Relative – the element is positioned relative to its normal position.
Absolute – the element is positioned absolutely to its first positioned parent.
Fixed – the element is positioned related to the browser window.
Sticky – the element is positioned based on the user’s scroll position.

Now that we have explained the basics, we will talk more about the two most commonly used position values – relative and absolute.

Link: https://dzone.com/articles/css-position-relative-vs-position-absolute?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

A Full-screen Bootstrap Carousel with Random Initial Image

In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel slideshow, and then I’ll show you how to randomize the first slide on page load.
But before digging into those extensions, let’s start by creating a carousel based on the default styles.
Building the Carousel
To create the carousel, we’ll take advantage of the basic code for the carousel component that Bootstrap provides:
[code language=”html"]

<!– Indicators –>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!– Wrapper for slides –>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="1.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption d-none d-md-block">
<h5>First Image</h5>
</div>
</div>
<div class="carousel-item">
<!– slide content –>
</div>
<div class="carousel-item">
<!– slide content –>
</div>
<!– more slides –>
</div>
<!– Controls –>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
[/code]
Notice that each of our images contains the custom data-color attribute. Later we’ll use its value as a fallback in case the corresponding image fails to load.
The next step is to initialize the carousel via JavaScript and modify the predefined values of the interval and pause configuration properties. Take note that we choose to set the value of the pause property to false because we always want the cycling to be active:
[code language="javascript"]
$(‘.carousel’).carousel({
interval: 6000,
pause: "false"
});
[/code]
Having followed those simple steps (and of course imported the required files), we should now be able to build the first version of the carousel. Here’s how it looks so far:
See the Pen Basic Bootstrap Carousel by SitePoint (@SitePoint) on CodePen.

Continue reading %A Full-screen Bootstrap Carousel with Random Initial Image%

Link: https://www.sitepoint.com/full-screen-bootstrap-carousel-random-initial-image/

Basic HTML for Everyone

There are so many editors and plugins available that knowing the basics of HTML is no longer required to create a site.
The problem with this is that if you don’t know a few basics, you can easily get into real trouble and have to hire a pricey developer to fix what may be a minor problem. Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.

Link: https://dzone.com/articles/basic-html-for-everyone?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Get Your SVGs Out of Your HTML

After this holiday season, many of us would like to lose a little weight, page weight that is. In my app, CodeTriage, I make extensive use of SVG elements for images, the logo, and icons. Until recently, I’ve been rendering the SVG elements directly in the HTML. This was the easiest thing to do. As you might guess by my intro sentence, I’ve been working on decreasing page weight by removing SVG elements from the HTML. How well did it work? Before making changes the homepage was 14kb (77kb unzipped). After the change, the homepage is 6kb (30kb unzipped). That’s a 57% reduction in “over the wire" bytes per page load. What exactly did I do, and what were the trade-offs I made to get to a smaller page? Let’s look at how I was previously using SVG.
Here’s the raw SVG:

Link: https://dzone.com/articles/get-your-svgs-out-of-your-html?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev