Archive For The “Web Tutorials” Category

The Missing Advice I Needed When Starting My Career

The Missing Advice I Needed When Starting My Career

Do you ever wish you had a time machine? I certainly do, but not for the usual reasons. I want a time machine so I can go back and have a frank conversation with my younger self. I’ll let you in on a bit of a secret: My younger self was an idiot!

I have been working on the web for over 22 years now, and I feel like I wasted so many of those years. If only I could go back and share a few hard truths with myself at the start of my career. Unfortunately, I cannot, but I can share that advice with you. read more

Read more »

How to Create a Fanfiction Archive With WordPress

How to Create a Fanfiction Archive With WordPress

Do you enjoy writing fanfiction? While you can add your fanfiction as normal posts, it becomes difficult to organize and showcase them on your site. In this article, we will show you how to create a fanfiction archive with WordPress. Why Create a Fanfiction Archive… Read More » The post How to Create a Fanfiction Archive With WordPress appeared first on WPBeginner. ...

Read more »

How To Protect Your Users With The Privacy By Design Framework

How To Protect Your Users With The Privacy By Design Framework

In these politically uncertain times, developers can help to defend their users’ personal privacy by adopting the Privacy by Design (PbD) framework. These common-sense steps will become a requirement under the EU’s imminent data protection overhaul, but the benefits of the framework go far beyond legal compliance.

Note: This article is not legal advice and should not be construed as such.

Meet Privacy By Design Link

Let’s give credit where credit is due. The global political upheaval of the past 12 months has done more to get developers thinking about privacy, surveillance and defensive user protection than ever before. The risks and threats to ourselves, and to our users, are no longer theoretical; they are real, they are everyday, and they are frightening. One need only look at the ongoing revelations regarding Cambridge Analytica, a British company with odd links to Canada, which ran a complex data-mining operation on behalf of Donald Trump’s presidential campaign to aggregate up to 5,000 pieces of data on every American adult1, to fathom what is at stake for all of us. read more

Read more »

How to Display Ad Blocks in Specific Posts in WordPress

How to Display Ad Blocks in Specific Posts in WordPress

Do you want to display ad blocks within specific WordPress posts? This ad placement allows you to show ads when your users are highly engaged with the content. In this article, we will show you how to easily display ad blocks in specific WordPress posts… Read More » The post How to Display Ad Blocks in Specific Posts in WordPress appeared first on WPBeginner. ...

Read more »

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

Earlier this year, support for CSS grid layout1 landed in most major desktop browsers. Naturally, the specification is one of the hot topics at meet-ups and conferences. After having some conversations about grid and progressive enhancement, I believe that there’s a good amount of uncertainty about using it. I heard some quite interesting questions and statements, which I want to address in this post.

Statements And Questions I’ve Heard In The Last Few Weeks Link

  • “When can I start using CSS grid layout?”
  • “Too bad that it’ll take some more years before we can use grid in production.”
  • “Do I need Modernizr in order to make websites with CSS grid layout?”
  • “If I wanted to use grid today, I’d have to build two to three versions of my website.”
  • “Progressive enhancement sounds great in theory, but I don’t think it’s possible to implement in real projects.”
  • “How much does progressive enhancement cost?”

These are all good questions, and not all of them are easy to answer, but I’m happy to share my approach. The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.

Demo: Progressively Enhanced Layout Link

Before going into detail and expounding my thoughts on the questions and statements above, I want to present a little demo42 I’ve made.

Disclaimer: It would be best to open the demo on a device with a large screen. You won’t see anything of significance on a smartphone.

Progressively enhanced CSS Layout, with Flexbox and CSS Grid.3
The home page of an example website, with an adjustable slider to switch between different layout techniques.

When you open the demo42, you’ll find yourself on the home page of a website with a very basic layout. You can adjust the slider in the top left to enhance the experience. The layout switches from being very basic to being a float-based layout to being a flexbox layout and, finally, to being one that uses grid.

It’s not the most beautiful or complex design, but it’s good enough to demonstrate which shapes a website can take based on a browser’s capabilities.

This demo page is built with CSS grid layout and doesn’t use any prefixed properties or polyfills. It’s accessible and usable for users in Internet Explorer (IE) 8, Opera Mini in Extreme mode, UC Browser and, of course, the most popular modern browsers. You can perfectly use CSS grid layout today if you don’t expect exactly the same appearance in every single browser, which isn’t possible to achieve nowadays anyway. I’m well aware that this decision isn’t always up to us developers, but I believe that our clients are willing to accept those differences if they understand the benefits (future-proof design, better accessibility and better performance). On top of that, I believe that our clients and users have — thanks to responsive design — already learned that websites don’t look the same in every device and browser.

In the following sections, I’m going to show you how I built parts of the demo and why some things just work out of the box.

Quick side note: I had to add a few lines of JavaScript and CSS (an HTML5 shim) in order to make the page work in IE 8. I couldn’t resist, because IE 8+ just sounds more impressive than IE 9+.

CSS Grid Layout And Progressive Enhancement Link

Let’s take a deeper look at how I built the “four levels of enhancement” component in the center of the page.

HTML Link

I started off by putting all items into a section in a logical order. The first item in the section is the heading, followed by four subsections. Assuming that they represent separate blog posts, I wrapped each of them in an article tag. Each article consists of a heading (h3) and a linked image. I used the picture element here because I want to serve users with a different image if the viewport is wide enough. Here, we already have the first example of good ol’ progressive enhancement in action. If the browser doesn’t understand picture and source, it will still show the img, which is also a child of the picture element.

<section>
 <h2>Four levels of enhancement</h2>
 <article><h3>No Positioning</h3><a href="#"> <picture> <source srcset="320_480.jpg" media="(min-width: 600px)"> <img src="480_320.jpg" alt="image description"> </picture></a>
 </article>
</section>

Float Enhancements Link

A component of the demo page built with float
All items in the “four levels of enhancement” component, floated left

On larger screens, this component works best if all items are laid out next to each other. In order to achieve that for browsers that don’t understand flexbox or grid, I float them, give them a size and some margin, and clear the floating after the last floated item.

article { float: left; width: 24.25%; } article:not(:last-child) { margin-right: 1%; } section:after { clear: both; content: ""; display: table; } read more

Read more »

Web Development Reading List #190: Images in Web Notifications and Angular Code Splitting

Web Development Reading List #190: Images in Web Notifications and Angular Code Splitting
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

New APIs offer great possibilities to build better web services. And some people push these new technologies to their limits. For example, we can use JavaScript to generate images that we then can use in Web Notifications. We can use the Storage API to find out if and how much data we can save on a user’s device and can adjust the behavior of our applications accordingly. read more

Read more »

Designing The Perfect Slider

Designing The Perfect Slider

When we think about a slider, we usually imagine an image gallery slider, or the infamous carousel, or perhaps off-canvas navigation, with the overlay sliding in from the side. However, this article is not about those kinds of sliders. Instead, we’ll look into the fine details of designing better slider controls for selecting a value or a range of values. Think of price range sliders, 360-degree-view sliders, timeline sliders, health insurance quote calculators, or build-your-own-mobile-plan features. read more

Read more »

Taming Advanced Color Palettes In Photoshop, Sketch And Affinity Designer

Taming Advanced Color Palettes In Photoshop, Sketch And Affinity Designer

Creating large, harmonious and uniform color palettes can be a challenge. Good intentions and confident plans can be abandoned when things get a little unwieldy. But you can equip yourself with some tools to manage the complexity. With the right techniques, large color palettes can be created, refined and refactored at will. Large color palettes1 can be tamed.

Creating Color Palettes Using Adjustment Layers Link

Quite a few techniques can be used to create large color palettes from a few base colors. Automatically generating color variations helps to keep colors uniform and easy to manage, while providing a large menu of possibilities. read more

Read more »

Web Development Reading List #189: Sync Via Push API, RTL CSS, And The Disaster Factory

Web Development Reading List #189: Sync Via Push API, RTL CSS, And The Disaster Factory
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Do you feel stressed from time to time? I do. Recently, I experimented with meditation and yoga, just to see if and how they work. There’s a lot of advice you can find online and they all claim to transform your life entirely. read more

Read more »

Introducing The Website Speed Test Image Analysis Tool

Introducing The Website Speed Test Image Analysis Tool

Web developers spend their days writing hypertext, but, byte for byte, most of the web is composed of images1. It is hard to overstate the effect that images have on the average web page’s performance; faster websites have broader reach2 and a higher impact3. The first and most important thing you can do to improve the performance of your website’s images is figure out how to measure them.

Enter Website Speed Test4, a free and drop-dead-simple tool that leverages our (Cloudinary’s) image smarts to let you measure, diagnose and (crucially) communicate about the image performance of any website. Better yet, it’s built on top of, and integrated in, Pat Meenan’s WebPagetest5. read more

Read more »