DEV Community: Bogdan Bendziukov

Responsive Layouts Without Media Queries

Bogdan Bendziukov — Thu, 03 Oct 2024 06:07:16 +0000

How often do you use media queries when building web layouts? I’ve spent too much time on them!

First you spent quite a lot of time trying to make the layout exactly like in the design. But then you need to resize your browser to all possible screen resolutions to make sure your page still looks good on all of them. And I mean to resize not only by width, but by height too - especially, if you have full height sections.

Eventually, your CSS become full of lines like these:

@media screen and (max-width: 1199px) { /*styles here*/ }
@media screen and (max-width: 1023px) { /*more styles here*/ }
@media screen and (max-width: 767px) { /*another styles here*/ }

And that’s annoying! Won’t it be much easier if you can include responsiveness kind of like automatically? Of course, you still need to provide the rules for the responsiveness, but without need to write them for dozens of screen resolutions.

Units system

The first thing you need to understand about responsive design is that you have to forget about pixels.

I know it might be hard to switch from one unit to another, but using pixels is the voice from the past.

The biggest problem with using pixels as a size unit is that you don’t get in count the user's device from which it views your website.

The default root font size for modern browsers is 16px. That means 1rem = 16px. But that doesn't mean users cannot change that value in browser settings to whatever they want.

So imagine the user's default browser font size is 24px. But you setted up the font size of the body tag to 16px.

Here’s what user expects to see:

Root font size equals 24px

And this is what user actually sees:

Root font size equals 16px

It especially affects people with vision problems, thus your page won’t be very accessible for them.

Of course, they can always zoom your page, but in this case it will affect other opened websites, which may not be supposed to be zoomed in.

BTW, the Lorem Ipsum site is a very “good” bad example of how non UX-friendly a page can look if you’re using pixels for fonts, margins, paddings etc.

If you're not familiar with the relative units like rem and vw, you should check this article on the MDN, where you can deep dive into CSS units and values: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Setup variables

To make it easier to build the layout, let's set up global variables first. Luckily, in CSS we have that opportunity. Since custom variables are subject to the cascade and inherit their value from their parent, we will define them on the :root pseudo-class, thus they can be applied to the whole HTML document.

:root {
  --primary-color: green;
  --primary-font: Helvetica, sans-serif;
  --text-font-size: clamp(1rem, 2.08vw, 1.5rem);
}

Looks pretty simple - we define a variable name, which must begin with a double hyphen (--). Then provide a variable value, which can be any valid CSS value.

Then we can use those variables for any element or even pseudo-class in the document using the var() function:

color: var(--primary-color);

For example, we can use our --primary-color variable for all the headings on the page like this:

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-color);
}

Since the primary colour will use quite a lot of different elements on the page, it’s very handy to use the variable instead of writing each time the colour itself.

The last variable --text-font-size: clamp(1rem, 2.08vw, 1.5rem) might look odd: what’s the clamp and what’s it doing on the font size variable?

Dynamic font scaling

The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound.

You need to provide a minimum value (which is 1rem from the example above), a preferred value (2.08vw) and the maximum allowed value (1.5rem).

The most tricky part here is to set the preferred value. It should be in some viewport relative units (like vw or vh). Thus when a user resizes its browser or changes the device’s orientation the font size will scale proportionally.

I’ve made this formula for calculating the preferred value:

value = AMValue * remInPx / (containerWidth / 100)

Here comes an explanation, no panic:

AMValue - arithmetic mean, between the minimum and maximum allowed values in rem. In our example it equals (1rem + 1.5rem) / 2 = 1.25rem

remInPx - default size of 1rem in pixels, depending on your design, usually it equals to 16px

containerWidth - the maximum width of your content container block (in pixels). We need to divide that value to 100 to get the 1% of the width. In the example it equals 960px.

So if you replace the arguments in that equation with real numbers you will get:

value = 1.25 \* 16 / (960 / 100) = 2.08

Let’s check how it will scale:

I know it’s not a perfect solution. Besides, we attach again to pixels, when calculating the preferred value. It’s just one of many possible options to make our fonts scale between viewports sizes.

You can use other CSS functions like min() or max(), or create a custom method to calculate the preferred value in the clamp() function.

I wrote an article about dynamic font size scaling, only for pixel units. It’s a bit outdated, but still you might find it helpful:

Dynamic font-size using only CSS3

Ok, enough of the fonts, let’s go further to the layout!

Layout with equal column width

Let’s start with some simple layout with 6 equal columns.

With media queries you need to write a bunch of extra CSS code to handle how they should wrap on different screen sizes. Like this:

/* by default we have 6 columns */
.column {
  float: left;
  width: calc(100% / 6);
}
/* decrease to 4 columns on the 1200px breakpoint */
@media screen and (max-width: 1200px) {
  .column {
    width: calc(100% / 4);
  }
}
/* decrease to 3 columns on the 1024px breakpoint */
@media screen and (max-width: 1024px) {
  .column {
    width: calc(100% / 3);
  }
}
/* finally, decrease to 2 columns for the viewport width less than or equal to 768px */
@media screen and (max-width: 768px) {
  .column {
    width: calc(100% / 2);
  }
}

Woah! That’s a lot of code, I must say! Wouldn't it be better to just make it scale automatically?

And here’s how, thanks to the CSS grid layout:

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(10em, 1fr) );
}

All we need to do is to set the parent block of our columns to be displayed as a grid. And then, create a template for our columns, using grid-template-columns property.

This is called RAM technique (stands for Repeat, Auto, Minmax) in CSS, you can read about it in more details here:

RAM Technique in CSS

In that property we use the CSS repeat() function.

The first argument is set to auto-fit, which means it FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. There’s another value for that argument: auto-fill. To understand the difference between them check this pen:

Also, I highly recommend to read this article from CSS tricks about auto sizing columns in CSS grid: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

The second argument is using another function minmax(), which defines the size of each column. In our example each column should not be less than 10em and should be stretched to the remaining space.

Looks fine, but we have a problem - the number of columns can be bigger than 6!

To make a limit of columns, we need some custom formula again. But hey, it’s still in CSS! And it’s not that scary, basically, you just need to provide a gap for the grid, a minimal column width and the max number of columns.

Here’ the code:

.grid-container {

  /** * User input values. */
  --grid-layout-gap: 1em;
  --grid-column-count: 4;
  --grid-item--min-width: 15em;

  /** * Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);

}

And here’s what we achieve with that:

As you can see, we can use the relative values for the columns min width and gap, which makes this code like the perfect solution. Until they build the native CSS property for that, of course 😄

Important notice! If you don't need a gap between columns, you need to set it to 0px or 0em, not just 0 (pure number). I mean you have to provide the units, otherwise the code won’t work.

I’ve found that solution on CSS tricks, so in case you want to dive deeper to how that formula works, here’s the original article about it: https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/

Layout with different column width

The solution above works perfectly for the grids with equal width of the columns. But how to handle layouts with unequal columns? The most common example is a content area with a sidebar, so let’s work with this one.

Here’s a simple markup of the content area along with sidebar:

<section class="content">
  <aside>
    <h2>This is sidebar</h2>
    <section class="grid">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
    </section>
  </aside>
  <article>
    <h2>This is content</h2>
    <section class="grid">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div class="grid-item">Grid Item 3</div>
      <div class="grid-item">Grid Item 4</div>
    </section>
  </article>
</section>

For the .content section let’s use the flex box layout:

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

The flex-wrap property here is important and should be set as wrap in order to force the columns (sidebar and content area) stack under each other.

For the sidebar and content columns we need to set flex properties like grow and basis:

/* Sidebar */
.content > aside {
  border: 1px solid var( - primary-color);
  padding: var( - primary-padding);
  flex-grow: 1;
  flex-basis: 15em;
}

/* Content */
.content > article {
  border: 1px solid var( - primary-color);
  padding: var( - primary-padding);
  flex-grow: 3;
  flex-basis: 25em;
}

The flex-basis property sets the initial size of the flex item. Basically, it’s a minimum width which the flex item should have.

The flex-grow property sets the flex grow factor — similar to the proportion of the flex item compared to the other flex items. It’s a very rough and approximate explanation, to understand better the flex-grow property I highly recommend to read this article from CSS tricks: https://css-tricks.com/flex-grow-is-weird/

So if we set the flex-grow: 1 for the sidebar and flex-grow: 3 for the content area, that means the content area will take approximately three times more space than the sidebar.

I also added the grid section from the previous example to demonstrate that it works inside the flex layout as well.

Here’s what we have in the final result:

Stackable columns

It’s pretty common, when you have a grid layout where text comes next to image on one row and then in reverse order on the next row:

But when the columns become stacked you want them to be in a specific order, where text comes always before image, but they don’t:

To achieve that we need to detect somehow when the columns become stacked.

Unfortunately, it’s impossible (yet) to do that with pure CSS. So we need to add some JS code to detect that:

/**
* Detect when elements become wrapped
*
* @param {NodeList} items - list of elements to check
* @returns {array} Array of items that were wrapped
*/
const detectWrap = (items) => {
  let wrappedItems = [];
  let prevItem = {};
  let currItem = {};

  for (let i = 0; i < items.length; i++) {
    currItem = items[i].getBoundingClientRect();

    if (prevItem) {
      let prevItemTop = prevItem.top;
      let currItemTop = currItem.top;

      // if current's item top position is different from previous
      // that means that the item is wrapped
      if (prevItemTop < currItemTop) {
        wrappedItems.push(items[i]);
      }

    }

    prevItem = currItem;

  }

  return wrappedItems;
};

const addWrapClasses = (wrapper, cover) => {
  const items = wrapper.querySelectorAll(":scope > *");

  // remove ".wrapped" classes to detect which items was actually wrapped
  cover.classList.remove("wrapped");

  // only after that detect wrap items
  let wrappedItems = detectWrap(items); // get wrapped items

  // if there are any elements that were wrapped - add a special class to menu
  if (wrappedItems.length > 0) {
    cover.classList.add("wrapped");
  }

};

The function addWrapClasses() accepts two arguments.

The first one is wrapper — it’s a parent element of the items which we should check whether they are wrapped (stacked) or not.

The second argument cover is an element to which we apply a special CSS class .wrapped. Using this class you can change your layout when the columns become stacked.

If you want to apply the .wrapped class directly to the wrapper element you can pass the same element as the second argument.

For better understanding my “wonderful” explanation please see the pen below, hope it will become more clear for you:

You can also use it to detect when the header menu should be collapsed into the burger. You can read about that case in my article here:

An Easy Way to Make an Auto Responsive Menu

Combining all together

Here’s a pen with all the techniques I mentioned in this article combined:

Final thoughts

I’ve used the techniques from this article in my recent project and it worked very well. The web pages look fine on every screen with no need to optimise them manually on multiple breakpoints.

Of course I will be lying if I tell you I didn’t use media queries at all. It all depends on the design and how flexible you can be with modifying page layout. Sometimes it’s much faster and simpler just to add a couple of breakpoints and then fix CSS for them. But I think eventually CSS media queries will be replaced by CSS functions like clamp() which allow developers to create responsive layouts automatically.

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace to you!

An Easy Way to Make an Auto Responsive Menu

Bogdan Bendziukov — Thu, 03 Oct 2024 06:07:00 +0000

In this article I’m gonna show you a little hack about how to automatically collapse header’s menu into a “burger” and vice-versa.

So the idea is simple — when the menu’s items cannot fit into the header they should be hidden and the mobile menu toggle button (the burger) will be shown. And it should be done automatically, without css media queries. So your menu still looks good on any device regardless of number of items, their font-sizes etc.

This is how it looks like:

I’ve made a very basic markup, with just a logo and a menu.

Then added some CSS to make it look nicer.

So in the “desktop” mode the header looks like this:

But when the viewport is too small to fit that menu, the menu items become “wrapped”:

We don’t need this! If there’s no space for them — then it’s time to hide the menu and show the menu toggle instead.

This is where a bit of JS gets handy. We need just to detect when the top position of any of the menu items will be different from the rest ones.

Here’s the trick:

/**
 * Detect when elements become wrapped
 *
 * @param {NodeList} items - list of elements to check
 * @returns {array} Array of items that were wrapped
 */
const detectWrap = (items) => {
  let wrappedItems = [];
  let prevItem = {};
  let currItem = {};

  for (let i = 0; i < items.length; i++) {
    currItem = items[i].getBoundingClientRect();

    if (prevItem) {
      let prevItemTop = prevItem.top;
      let currItemTop = currItem.top;

      // if current's item top position is different from previous
      // that means that the item is wrapped
      if (prevItemTop < currItemTop) {
        wrappedItems.push(items[i]);
      }
    }

    prevItem = currItem;
  }

  return wrappedItems;
};

Then we can use that function to check if menu items were wrapped and if so — hide the menu and show a mobile toggle button.

const addWrapClasses = () => {
  const menu = document.querySelector(".menu");
  const menuItems = document.querySelectorAll(".menu > ul > li");

  // remove ".wrapped" classes to detect which items was actually wrapped
  menu.classList.remove("wrapped");

  // only after that detect wrap items
  let wrappedItems = detectWrap(menuItems); // get wrapped items

  // if there are any elements that were wrapped - add a special class to menu
  if (wrappedItems.length > 0) {
    menu.classList.add("wrapped");
  }
};

// execute function on page load
addWrapClasses();

// execute function on window resize
window.addEventListener("resize", addWrapClasses);

Now it looks fine:

Here’s the full demo of what we ahcieved:

Check another trick for responsive font-size with only CSS:

Dynamic font-size using only CSS3

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace to you!

No JS required — you can do this with CSS!

Bogdan Bendziukov — Fri, 20 Sep 2024 08:35:52 +0000

The less you use JS code on your site the better performance you’ll have.

Why? Here are several reasons:

Lesser JavaScript means lesser TBT;
CSS is faster to parse and execute than JavaScript;
When you use JS, the layout will be re-rendered, which is not the case for CSS.

Finally, if you have an error in your CSS, it won’t stop from loading your page. While an error in JS code may (and often will) break the whole page.

Disclaimer! I’m not telling you to stop using JS, of course not 😅

But in cases when you can easily replace it with CSS — please do that.

Have a look at a few examples of useful features for your site using only CSS.

Sub menu on hover

Let’s start with something simple. To make a sub menu there’s no need to use JS. We all know this pseudoclass :hover, so don’t hesitate to use it.

Here’s a simple menu markup:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog 🠋</a>
      <ul>
        <li><a href="#">News</a></li>
        <li><a href="#">Interviews</a>
        <li><a href="#">Travel</a></li>
        <li><a href="#">Art</a></li>
        <li><a href="#">Tech</a></li>
        </li>
      </ul>
    </li>
    <li><a href="#">Contacts</a></li>
  </ul>
</nav>

Generally, to make the sub menu hidden people often use display: none; method.

I prefer to use a combination of opacity and visibility CSS properties, to make the hover appearance smooth (browsers cannot animate the display CSS property, yet). The visibility: hidden; is used to make our sub menu non-focusable until it becomes visible (until its parent element hovered).

To prevent submenu from immediate disappear on hover out of menu, we should add a transition-delay to our sub-menu.

/* don't forget to set the relative position for the parent element of the sub menu */
nav > ul > li {
  position: relative;
}
/* sub menu is hidden by default */
nav > ul ul {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  translate: 0 25%;
  transition: all 250ms cubic-bezier(.33,.65,.67,.81);
  transition-delay: 300ms;
}
/* make it visible on hover */
nav > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

And here’s the final result:

Tabbed content

Combining <label> and <input type="radio"> can do magic! And all because when you click on a <label>, the browser will automatically pass the focus to its associated input. In case with the radio input, that means it will be checked.

The layout is simple: we create several pairs of input-label elements and the related number of divs for content.

<!-- Radio buttons -->
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Tab 1</label>

<input type="radio" id="tab2" name="tabs">
<label for="tab2">Tab 2</label>

<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tab 3</label>

<!-- Content -->
<div class="tab-content" id="content1">
  <h2>Content for Tab 1</h2>
  <p>This is the content for the first tab.</p>
</div>

<div class="tab-content" id="content2">
  <h2>Content for Tab 2</h2>
  <p>This is the content for the second tab.</p>
</div>

<div class="tab-content" id="content3">
  <h2>Content for Tab 3</h2>
  <p>This is the content for the third tab.</p>
</div>

Then the beauty of CSS:

/* Hide radio buttons */
input[type="radio"] {
  /*display: none;*/

  /* To make radio buttons accessbile by a keyboard, let's hide them visually only */
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Highlight the selected tab when using a keyboard */
input[type="radio"]:focus + label {
  outline: 2px solid;
}

/* Style labels as tabs */
label {
  display: inline-block;
  padding: 10px 20px;
  margin: 0;
  cursor: pointer;
  background-color: #eee;
  border: 1px solid #ccc;
  border-bottom: none;
  transition: background-color 0.3s ease;
}

/* Style active tab */
  input[type="radio"]:checked + label {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  font-weight: bold;
}

/* Style content areas */
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
}

/* Show active content */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

CSS has a native :checked selector for the checked inputs (both radios and checkboxes).

And thanks to the ~ (tilde), which is officially called the subsequent-sibling combinator, we can toggle visibility of the content blocks. The only requirement is that content divs should be placed AFTER radio inputs.

Here’s the final result:

Snap block

Ever scrolled YouTube Shorts on a desktop? After each wheel scroll the next video snaps to the top of the page:

CSS scroll-snap in action. Even YouTube uses it!

And if you think that it’s some complex JS code — you’re wrong! It’s a native CSS feature called scroll-snap.

So first, you need to set up a scroll-snap-type for the parent container. To make it work like in YouTube Shorts, we will set it to y mandatory.

.scroll-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  width: 300px;
  height: 80%;
  background-color: #ddd;
  padding: 20px;
  box-sizing: border-box;
  scroll-padding: 10px;
}

That means the scroll container snaps in its vertical axis only and the content must snap to a snap position if it isn’t currently scrolled. Check MDN Docs for the detailed explanation of each possible value for this property.

And for each of the scrolled items we just need to provide a snap position of the item within its snap area. In other words, do we want the item to be snapped to the top (start), center or to the bottom (end). It’s possible thanks to the scroll-snap-align property:

.scroll-item {
  scroll-snap-align: start;
}

Take a look at the demo, it’s really very cool feature and using CSS only:

Those were some tricks popped in my head, but they are just the tip of the iceberg. If you want the second part please click on the “like” button so I can see it is something you interested in 😊

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace to you!

7 Old-School Practices in HTML Should Be Avoided

Bogdan Bendziukov — Fri, 20 Sep 2024 08:06:26 +0000

Just some daily habits in HTML coding we all should get rid off.

Using type attribute for `<script>` and `<style>`

❌ Stop writing this:

<style type="text/css">/* CSS styles here */</style>
<script type="text/javascript">/* JS code here */</script>

✅ Instead, you should simply write:

<style>/* CSS styles here */</style>
<script>/* JS code here */</script>

No need to specify the type attribute, modern browsers are smart enough to understand that <style> is for CSS, <script> is for JavaScript and V for Vendetta!

Accordion (FAQ) block requires JS code

Easy! Watch:

<details>
  <summary>To be or not to be?</summary>
  <div>
    That is the question!
  </div>
</details>

Here’s the result:

And with some extra styles:

Ok, but what about smooth open/close action, you might ask.

It’s tricky, so if you need fancy smooth animation you should include some JavaScript.

But if you can deal with simple one-direction CSS transition, here you go:

Use `<header>` and `<footer>` only once per page

Despite some people thinking that <header> and <footer> elements represent header and footer of the page respectively, it’s a false statement.

Those elements relate to the nearest sectioning content, which means being a child of one of the following elements: <article>, <aside>, <nav>, and <section>.

Thus, you can (actually, you should ) use <header> and/or <footer> elements when you create another section on your page.

Here’s an example of an author info box with the right elements:

Using `frameborder="0"` to remove border around `<iframe>`

It’s a deprecated attribute of an <iframe> element. Just like you (hopefully) don’t use align attribute to handle text alignment, you should avoid using frameborder attribute.

Instead, use the CSS property border to handle <iframe> borders.

Nonetheless, when you right click on a YouTube or Vimeo video and then click on “Copy embed code” you get an <iframe> element with that frameborder="0" attribute. So after applying embed code to your page make sure to remove that frameborder attribute and set border property to your <iframe> in CSS.

Include support for IE 8

❌ The following script provides basic HTML5 styling for Internet Explorer 6–8:

<!--[if lt IE 9]>
  <script src="scripts/html5shiv.js"></script>
<![endif]-->

Seriously, it’s a voice from the past. Stop including supporting scripts for Internet Explorer. And I’m not only talking about IE 8, but ALL Explorers! Even Microsoft stopped support for IE 11 in June 2022. So you should.

Randomly choose heading tags

I hope you already know there should be only one <h1> tag on the page as for the primary title. But what about the rest of the heading tags <h2>…<h6> ?

We used to choose them approximately, depending on the size of the heading from the design. So if we have some heading, which looks small in the Figma mockup, we want to set the <h4> tag, for example. Despite the previous heading tag on the page being <h1>!

That’s very bad practice. Your markup becomes invalid and messy for screen readers.

Remember, accessibility matters!

You should provide heading tags depending on page structure, not page design. And those tags should be in a descending order. So if your last heading tag was <h2>, the next one should be either <h2> (if it’s another section on the page) or <h3> if it’s a heading for the child section of <h2> heading.

❌ So DO NOT do like this (randomly provided heading tags):

<h1>Primary title</h1>
<section>
  <h3>Section title</h3>
  <p>Some text inside the section</p>
</section>
<section>
  <h3>Another section title</h3>
  <p>Some text inside the section</p>
  <div>
    <h5>Subtitle</h5>
    <p>Some text inside the section</p>
  </div>
</section>

✅ Keep the order of your heading tags and logic structure (keep the descending order of headings):

<h1>Primary title</h1>
<section>
  <h2>Section title</h2>
  <p>Some text inside the section</p>
</section>
<section>
  <h2>Another section title</h2>
  <p>Some text inside the section</p>
  <div>
    <h3>Subtitle</h3>
    <p>Some text inside the section</p>
  </div>
</section>

Adding `="1"` for boolean attributes

I mean such attributes, as disabled for inputs, loop, muted or autoplay for videos etc. The mere fact that those attributes present means they are equal to true.

It won’t affect functionality, so your input will still be disabled, but this is an error for the W3C validator and just an unnecessary piece of code.

❌ So DO NOT code like this:

<input type="text" value="This input is disabled" disabled="1" />

✅ Keep it simple:

<input type="text" value="This input is disabled" disabled />

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace to you!

Enhancing Web Accessibility: Locking the TAB Button within Modals and Menus

Bogdan Bendziukov — Wed, 26 Jul 2023 20:36:10 +0000

This is a very important accessibility feature to use on your site.

You might not know this, but many users use keyboard navigation. Some of them have motor disabilities, some may use a keyboard for navigation because of preference or efficiency.

The point is your site must be accessible with the keyboard alone.

First of all, I hope you already know you should highlight all focusable elements on your site (like links and buttons) when they are on focus. At least when they are focused by the keyboard TAB button.

There’s a very useful pseudo-class in CSS called :focus-visible. In simple words, it applies to an element when it is focused by the TAB button. You can read more about it on MDN Web Docs.

But let’s get back to the case.

So you have a site with a fullscreen menu or some other section that opens full screen size. Something like this:

A site with a fullscreen menu

Then a user reaches to that section with a keyboard navigation (TAB button) and opens it by hitting the ENTER button:

What should happen after the user reaches the last link in the section?

Unfortunately, it’s a very common case when the user keeps navigating to the next links outside that full screen section.

As a result, users get totally lost on your site. They don’t see focused links anymore (because they are hidden below the fullscreen section) and yet they keep navigating on the page.

A good example of how it should work demonstrates the Fancybox JS plugin. Go to their examples section, click on any picture and then navigate through the opened modal only with your keyboard. You won’t get outside that modal until you close it.

Lock TAB inside Fancybox

So what’s the solution?

It’s quite simple — when the fullscreen section was opened, the user should be able to navigate only within that section by a keyboard.

This is what we expect to get:

To achieve that, let’s write some JavaScript code to lock the TAB within the fullscreen menu:



// Get the menu button element
const menuBtn = document.querySelector(".menu-btn");

// Get the close menu button element
const closeMenuBtn = document.querySelector(".close-btn");

// Get the fullscreen menu element
const fullscreenMenu = document.getElementById("fullscreenMenu");

// Function to toggle the menu
function toggleMenu() {
  fullscreenMenu.classList.toggle("active");
  menuBtn.classList.toggle("active");
}

// Add event listener to the menu button for the 'click' event
menuBtn.addEventListener("click", toggleMenu);
closeMenuBtn.addEventListener("click", toggleMenu);

// Add event listener to the 'keydown' event on the document
document.addEventListener("keydown", function (e) {
  const target = e.target;
  const shiftPressed = e.shiftKey;

  // If TAB key pressed
  if (e.keyCode === 9) {
    // If inside a fullscreen menu (determined by attribute role="dialog")
    if (target.closest('[role="dialog"]')) {
      // Find the first or the last input element in the dialog parent (depending on whether Shift was pressed).
      // Get the focusable elements (links and buttons)
      let focusElements = target
        .closest('[role="dialog"]')
        .querySelectorAll("a[href], button");
      let borderElem = shiftPressed
        ? focusElements[0]
        : focusElements[focusElements.length - 1];

      if (borderElem) {
        // If the current target element is the first or last focusable element in the dialog, prevent the default behaviour.
        if (target === borderElem) {
          e.preventDefault();

          // move focus to the first element when the last one is reached and vice versa
          borderElem === focusElements[0]
            ? focusElements[focusElements.length - 1].focus()
            : focusElements[0].focus();
        }
      }
    }
  }
});

Here’s the demo how it should be:

Thus, we can prevent elements from focusing outside full screen menus or modal popups while they are opened.

Check my other articles about web optimisation:

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace be with you!

RAM Technique in CSS

Bogdan Bendziukov — Sat, 15 Jul 2023 21:21:13 +0000

This is a simple yet effective CSS technique to fit blocks on a webpage. In this context RAM stands for Repeat, Auto, Minmax.

The RAM is very useful when you have multiple blocks on a page with equal width and you need them to fit the whole width of the page (or page’s section).

Before browsers got full support of the grid layout developers used media queries to set the number of blocks per row for different screen resolutions.

We had to provide different CSS rules for mobiles, tablets, laptops, desktops. Sometimes even for portrait/landscape mode! The more blocks per row we have the more breakpoints we need to cover to make the blocks look good on each screen size.

@media only screen and (max-width: 30em) {
  .block {
    width: 50%;
  }
}
@media only screen and (max-width: 45em) {
  .block {
    width: 25%;
  }
}
@media only screen and (max-width: 60em) {
  .block {
    width: 20%;
  }
}

Thanks to the grid layout, we can handle it with just a few lines of CSS.

Here’s how it works with RAM:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));

And this is what you get using that CSS code:

Try to change the width of the frame — the blocks will fit perfectly in each frame size.

What’s under the hood?

First of all we use display: grid to let the browser know we want our blocks to be displayed in a grid.

Secondly, we use the grid-template-columns property to define how exactly our grid’s elements should be displayed.

The repeat() function returns a pattern, which will be repeated for all columns in the grid.

This function accepts two arguments — repeat count and tracks.

The repeat count argument determines how many times the track list (grid elements) should be repeated. It can be either an integer number from 1 or a special keyword values auto-fill or auto-fit.

The auto-fit keyword means the grid elements will be stretched to fit all the available space in a section.

If you use the auto-fill keyword the elements will NOT be stretched out, but keep the minimal width defined in the tracks argument.

The tracks argument specifies the set of tracks (elements) which will be repeated. We use a minmax() CSS function to provide a minimum width of a block (15em) and maximum width (1fr). That means each of our blocks will not be narrower than 15em and will be equally stretched.

With modern CSS properties you can handle your layouts with less code and in a more efficient way.

Check my other CSS related articles:

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace be with you!

5 useful tips for Wordpress developers

Bogdan Bendziukov — Fri, 30 Jun 2023 13:52:13 +0000

If you are a WordPress developer, you may find these tips on how to develop a WordPress website helpful.

1. Use less plugins, write more code.

There are plenty of plugins which provide very small functionality. They can easily be replaced with custom code in your theme’s functions.php file.

Each plugin affects your website’s loading time a bit. Don’t get me wrong, I’m not saying that plugins are bad and each plugin adds seconds to the site’s loading time (although it depends on the plugin 🙂).

But the bigger and more complicated your site becomes, the more plugins you might install. Just review your plugins list and if you find some with only a couple lines of code — move that code to your theme’s functions.php file and delete that plugin.

I recently noticed it myself when I reviewed the plugins list of my client’s website. I found a plugin which only adds a tiny CSS code into the admin panel to stretch the Gutenberg editor to the full width. So I simply got that function from the plugin’s file and pasted it into functions.php file.

2. Escape everything!

WordPress haters like to say that one of the biggest problems of our beloved CMS is security. This is because beginner developers don’t write code with proper standards and don’t filter data which users (or a potential hackers) inputs.

For example, they can enter some SQL injection into your form input and once it is sent to the database it can break your site.

To prevent this and many other ways to hack your website, just use escape functions to **all data **users provide.

Here are some most common escaping functions you should use:

esc_html($your_text) — use on text you want to display inside an HTML tag. This function will remove HTML from $your_text variable.

// don't forget to use the echo function
    <div><?php echo esc_html( $your_text ); ?></div>

esc_url($your_link) — use on all URLs, including those in the src and href attributes of an HTML element. This function checks and cleans a URL ($your_link variable).

    <a href="<?php echo esc_url( $your_link ); ?>">
      <?php echo esc_html( $your_text ); ?>
    </a>

esc_attr($your_data) — use on everything else that’s printed into an HTML element’s attribute. This will encode the <, >, &, ” and ‘ characters.

    <a class="<?php echo esc_attr( $your_data ); ?>" href="<?php echo esc_url( $your_link ); ?>">
      <?php echo esc_html( $your_text ); ?>
    </a>

You can find all the escaping functions at the official WordPress developer’s resource: https://developer.wordpress.org/apis/security/escaping/

3. Use child theme.

If you don’t develop a website from scratch (means working on an existing site or using a theme from the other author) — use a child theme.

It’s important because once the parent theme is updated you will lose all your changes.

And even if the parent theme is not from a WordPress theme repository (or other themes storage like ThemeForest) it is a good practice to write your code in a child theme.

Thus you can prevent breaking existing theme and revert your changes easily.

4. Prepare content for translation.

Do not write texts in your php-files as regular text. Always use WordPress internationalization (translation) functions like _e(), _ex(), _nx() etc.

I mean don’t do this:

    <div>This is some sample text you may find in some php-file. Unfortunately, it cannot be translated.</div>

Instead write text inside HTML like this:

    <div><?php _e('This is some sample text you may find in some php-file. Luckily, it can be translated because of the internationalization function.', 'theme-slug'); ?></div>

When you write inside HTML using internationalization functions you prepare your website for translation.

So when you install some translation plugin it will automatically detect all your strings in HTML and make them available for translation.

You can read more about internationalization functions here: https://developer.wordpress.org/apis/internationalization/internationalization-functions/

5. Use actions and filters.

WordPress has two awesome features — actions and filters. Use them! They are very convenient when you need to modify existing code without actual digging into that code source.

A good example of using actions and filters is the WooCommerce plugin. You can modify almost all the data from your theme’s code without overriding the core code of the plugin.

So when you develop a custom theme (or especially plugin) — try to make it possible for other developers to have access to modify or adjust your code.

Let me demonstrate to you a quick example of how actions work. For example, you need to rearrange elements on a WooCommerce product page and you want to move the product’s price below the product’s short description.

If you look at the WooCommerce core template file templates/content-single-product.php you will notice that almost all the code is written using actions.

So to move that price below description have a look at this part of the code (see the full code here https://github.com/woocommerce/woocommerce/blob/7.5.0/plugins/woocommerce/templates/content-single-product.php):

    <?php
    /**
    * Hook: woocommerce_single_product_summary.
    *
    * @hooked woocommerce_template_single_title - 5
    * @hooked woocommerce_template_single_rating - 10
    * @hooked woocommerce_template_single_price - 10
    * @hooked woocommerce_template_single_excerpt - 20
    * @hooked woocommerce_template_single_add_to_cart - 30
    * @hooked woocommerce_template_single_meta - 40
    * @hooked woocommerce_template_single_sharing - 50
    * @hooked WC_Structured_Data::generate_product_data() - 60
    */
    do_action( 'woocommerce_single_product_summary' );
    ?>

First we need to remove the 'woocommerce_template_single_price' action from the hook 'woocommerce_single_product_summary' (mind the last priority argument, it MUST be the same).

Then attach that action (function) again, only with higher priority, so it will be after the 'woocommerce_template_single_excerpt' action.

Here’s the code to place into functions.php:

    function prefix_move_price_after_excerpt(){
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
      add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );
    }
    add_action( 'init', 'prefix_move_price_after_excerpt', 10);

Now the product page looks like this:

Learn more about actions and filters at the official WordPress developer resources:
https://developer.wordpress.org/plugins/hooks/actions/
https://developer.wordpress.org/plugins/hooks/filters/

There will be more…

Those were some basic tips for you as a WordPress developer, hope you find them useful and helpful.

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace be with you!

5 Should-Use WordPress Plugins as a Developer

Bogdan Bendziukov — Tue, 27 Jun 2023 12:15:07 +0000

Just wanna show you some of my most-using plugins in WordPress as a developer.

Advanced Custom Fields

The most essential plugin for a WordPress developer, IMHO. It adds to ANY post type or ANY taxonomy custom data fields, where you can provide almost any data you want. Those data fields can be text fields, textareas, datetime fields, colour pickers, radio buttons, checkboxes, images, videos etc.

A demo of ACF plugin. Image from https://www.advancedcustomfields.com/

So you or your editors can set tons of custom settings and then you as a developer can easily use them in your theme’s code.

The PRO version of ACF plugin also provides some awesome possibilities. For example, repeater fields, so you can create a set of fields and then duplicate it as many times as you need. Also, the PRO version allows you to build custom Gutenberg blocks! I wrote an article about that, so check it out, you’ll love this feature:

How and Why to Build Custom Gutenberg Blocks in WordPress

FacetWP

A super-powerful plugin for making complex posts’ filters in an easy way. And it’s not only for products in WooCommerce, you can filter any post types by any meta fields they have. This means it is fully compatible with ACF, which makes it even cooler.

A demo of the FacetWP plugin

It comes with awesome features like pager, for instance. It allows you to either create a pagination with the filtering results, or show them in an infinite scroll or with a load-more button. With extra addons, you can show results on a map and sort them in geographical order from the user’s location.

Besides, all the filtering is happening with AJAX. And using plugin’s filters and hooks you can modify filter results in any way you need.

Contact Form 7

I’m sure you already know about this plugin, but allow me to explain why I like it so much.

I know, it’s not very user-friendly on the back-end. This is because the form building process is based on shortcodes and users cannot see the final result immediately.

But it’s very powerful for developers! They can write their own HTML code for the forms, manipulate form data on submission (both on a server side and browser side), use dynamic data for the form fields (like current user’s name or variables from the $_GET array) etc. And let’s be honest, building contact forms is not a daily routine for your site’s administrators 😅. So the shortcodes-based back-end can be forgivable for all the features this plugin provides. And it’s 100% free!

WP All Import/Export

I had this task from one of my clients recently to populate WooCommerce products from the Excel table. And not just simple products with name, description, image and price, but with tons of custom fields (hello ACF again).

This is where WP All Import saved me! It allows you to import Excel, XML or CSV files, then create a template for your import and import all your posts at once. And yes, it works with any post types and taxonomies in WordPress.

And the process of creating an import template is very easy — you can simply drag a field from your import file and then drop it into the place it has to be in your post.

Very easy to create an import template. Image from https://www.wpallimport.com/

It’s fully compatible with WooCommerce and ACF (even with ACF repeater fields), although you need to purchase extra addons for them. BTW, they are planning to change away from lifetime licences, but you still have time to purchase it once and for all.

Duplicator

If you need to migrate your site from staging to production server, or from localhost to live — this is the right plugin! What I like the most of it — it migrates the site exactly how it was. That means you won’t need to fix widgets, menus etc.

The PRO version allows you to migrate multisites and work with big site sizes (when you have lots of media for example). But you can simply exclude the uploads folder from the archive (built-in feature of the free version). Just copy your media files manually after migrating the site (a small hack 😉).

What’re your favourite WordPress plugins?

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace to you!

Roadmap for WordPress Developer

Bogdan Bendziukov — Fri, 23 Jun 2023 15:43:31 +0000

I started my way in development websites on WordPress around 10 years ago. To be honest, I just started to fix some bugs and maintain sites. I had no idea on which CMS they were built, I just dug into the code and tried to do what I had to 😅. But what I did know were basics of web development, like HTML, CSS, JS for front-end and PHP with MySQL for the back-end. So here’s in more detail what you should learn to develop professional websites based on CMS WordPress, IMHO.

DECIDE WHAT YOU WANT TO DO

First of all, you should understand for yourself what exactly you’re planning to do with WordPress. You can be an Elementor templates developer, for example. In this case, you should know only WordPress basics like installing WordPress, adding/editing posts or pages, working with menus and widgets, and of course working with the Elementor builder itself. But if you want to develop custom plugins or themes on WordPress — then you need to learn some technical stuff too.

THE BASICS

On the web, it all starts with HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets*)*. Basically, even if you’re planning to work with WordPress using builders like Elementor or WPBakery — you still need to know at least basics of HTML and CSS. There are tons of different courses, videos on YouTube and articles on the Net about learning HTML and CSS, so it’s up to you which one to choose. As for me, I prefer MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML.

After you learn how to place elements on the page and style them, you can REALLY start to develop on WordPress.

First you need to understand that you cannot be ONLY a front-end or ONLY a back-end WordPress developer. You have to be both — means you’re gonna be a full stack developer.

Of course you can work with WordPress knowing only a front-end or a back-end (e.g React developer builds a front-end for some custom WordPress plugin). But to be a WordPress developer itself and be able to maintain all the path from markup to the final product (theme, plugin) requires being a full stack developer.

THE FRONT-END

Despite WordPress including jQuery (which is a library for JavaScript) I highly recommend learning JavaScript from scratch. Because the more complex your WordPress sites become the more knowledge you need to maintain and improve them (both in front-end and back-end). And jQuery only helps you to work faster and more convenient with DOM and AJAX basically, but doesn’t replace all JavaScript’s syntax (like arrays, objects, functions etc). Besides, it becomes handy when you work with other developers’ code, which they can write in so-called vanilla JS (clean JavaScript without any extra libraries).

Like with HTML and CSS, there are plenty of docs about JavaScript, so you can learn it in any way you want (Google helps you). I can suggest MDN Web Docs or the Codecademy course for beginners.

When you get comfortable with JavaScript itself, you can get into jQuery. It’s a JS library that makes a lot easier to work with elements, handling events and AJAX requests etc.

For example, here’s how to make an element to fade out and then remove it in plain JS:

let s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){
  (s.opacity-=.1) < 0 ? s.display="none" : setTimeout(fade, 40)
})();

And here’s how to make the same thing with jQuery:

$('#thing').fadeOut();

The official documentation is quite explicit, so you can start to learn jQuery there.

I mentioned a couple of times something called AJAX. It stands for Asynchronous JavaScript and XML. It’s a method that allows websites to make quick, incremental updates to the user interface without reloading the entire browser page. For example, when a user clicks on a submit button to post some form with a quiz, the result of the quiz appears on the page immediately so the user doesn’t need to reload the page to see it. This makes the website faster and more responsive to user actions.

In addition, when you become an advanced WordPress developer you can start learning React. This is another JS library to build complex web applications. It can be useful when developing builders (like Gutenberg or Divi) or their components for WordPress. Also, with WordPress REST API you can build complex web apps, where React will be responsible for the front-end and WordPress itself for a back-end. Until you get into React, you can build custom Gutenberg blocks in much easier way:

How and Why to Build Custom Gutenberg Blocks in WordPress

THE BACK-END

WordPress works on PHP. It’s an open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. WordPress core expands it with its own functions, but the start is PHP. Learn basic syntax, read about functions and classes, error handling and namespaces.

The explicit documentation is available on the official website, but as usual — learn in the most convenient way for yourself. Watch YouTube videos, read different manuals, pass online courses, go to some code classes — it’s your life 🙂

After PHP itself, start to dive into WordPress core functions, coding standards etc. It all can be found at the WordPress Developer Resources. The most basics are actions and filters. I’ve also wrote about them in this post about useful tips for WordPress developer:

5 useful tips for Wordpress developers

I can also recommend studying at least some basics of MySQL. This is a free, open-source and widely used relational database management system (RDBMS). In simple words, this is a database (DB) where all your WordPress data is located. And to manipulate that data (adding/updating/removing) you need to use SQL (Structured query language). The official documentation of MySQL is quite messy and may be hard for beginners, so I recommend studying MySQL on W3Scools.com.

THE CONCLUSION

To sum up all that stuff you just read, I prepared this illustration about roadmap for WordPress developer:

Roadmap for WordPress developer

Here’re some links where you can study about all those languages and technologies to become a master WordPress developer:

What was your way in WordPress development? Don’t hesitate to write your stories in the comments below.

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace be with you!

How and Why to Build Custom Gutenberg Blocks in WordPress

Bogdan Bendziukov — Mon, 19 Jun 2023 13:33:03 +0000

So you’re a WordPress developer and you get this awesome website design in Figma (or Zeplin or whatever works for you) and you need to make no less awesome WordPress website. How to achieve this?

If you have a pretty simple design with a simple grid — you can use Elementor. It’s easy to edit for users, has plenty of options so it won’t be hard for you to reproduce simple designs there.

A pretty simple block

But what if you have a complex design with uncommon elements like custom sliders, calculators, scrollytelling blocks? “I can do all this stuff with Elementor too”, — some say. And they will be kinda right. But can you imagine how tricky it will be with Elementor? To override all its styles, scripts and layouts? I’ve tried that, and that was a nightmare! You will get a total mess with CSS and HTML, so it will be very hard to maintain such a site. This is not what Elementor is for! Besides, you need to get through all the developer docs about how to make a custom widget in Elementor and dig into the code each time you want to add/remove some field or change its type or whatever else.

Kinda hard to build such a block in Elementor

Let me show how it can be achieved with native WordPress Gutenberg editor and Advanced Custom Fields Pro plugin!

Wait, what? The PRO version? Should I buy it?

It’s worth it! It provides such amazing features, I cannot imagine myself developing a WordPress site without that plugin now! Besides, you can download the PRO version from GitHub (uploaded by plugin’s owner Elliot Condon, so it’s legal 😎). Of course, it’s not the latest version, but it’s a good demo so you can take a closer look at this plugin.

So what’s this plugin for? As you may guess from its name — it adds custom fields of any type to any post type. That means you can add a text input, number input, image, video, embed object, color picker, datetime picker and many more. Basically, all that HTML can provide (correct me if I’m wrong in the comments 😁). Plus, you can create repeater fields and provide conditional logic to each field. Really, it’s a very powerful and useful plugin for WordPress developers.

This is only part of the field types ACF provides

And here’re some more field types

But let’s get back to the custom blocks. You can add those too! And manipulate custom fields from the WordPress admin panel. Your users will get a user-friendly back-end for the custom blocks, so they can easily set the data they need. And what’s more important, they won’t mess things up, because they will be allowed to change only the data you provide them to change. So it will be very hard to break anything on the page.

Register a new block

Let’s get to business! I’m gonna show you a bit of an old-school way of adding new custom blocks. But don’t worry, it has only slight changes compared to the modern way. Basically, the main difference is where to define parameters of a new block. So first, create a new subfolder in your theme’s folder to place your block’s files there. Something like this:

A folder tree of the new block

Then we need to register a new block and provide settings for it. I do that in functions.php file using acf_register_block_type function like this:

if( function_exists('acf_register_block_type') ) {
  add_action('acf/init', 'custom_prefix_register_acf_blocks');
  function custom_prefix_register_acf_blocks() {
    acf_register_block_type(array(
      'name' => 'my-block', // a system name of the block
      'title' => __('My Block'), 
      'description' => __('Just another awesome block.'),
      'render_template' => 'blocks/my-block/block.php',
      'category' => 'common', // The core provided categories are [common | formatting | layout | widgets | embed].
      'icon' => 'book-alt', // These can be any of WordPress’ Dashicons, or a custom svg element.
      'keywords' => array( 'block', 'custom' ),
      'supports' => array( 'anchor' => true )
    ));
  }
}

Don’t forget to change custom_prefix_ to your theme’s unique prefix. I wrote a bit more about why you should use prefixes here:

DO NOT do this as a WordPress developer

Since ACF version 6.0 and WordPress 5.8+ it is recommended to register new blocks with a new block.json syntax, which requires you to create a file named block.json (exactly that name) in the folder where your new block will be located (blocks/my-block in our example). Then add your block’s parameters to that file like this:

{
  "name": "acf/my-block",
  "title": "My Block",
  "description": "Just another awesome block.",
  "style": ["file:./block.css"],
  "category": "common",
  "icon": "book-alt",
  "keywords": ["block", "custom"],
  "acf": {
    "mode": "preview",
    "renderTemplate": "block.php"
  },
  "align": "full"
}

Note, that we need to provide a namespace called acf to the block’s name parameter (“name”: “ **acf/** my-block”). Then you need to register your block in your theme’s functions.php file using a register_block_type function (not acf_register_block_type) like this:

if( function_exists('acf_register_block_type') ) {
  add_action( 'init', 'custom_prefix_register_acf_blocks' );
  function custom_prefix_register_acf_blocks() {
    register_block_type( __DIR__. '/blocks/my-block' );
  }
}

But if you’re using a GitHub version of ACF Pro plugin (which is 5.9.1 version) you should use the legacy way of registering custom blocks.

Add a new block

To add a new custom Gutenberg block follow this steps:

1.In your wp-admin go to Custom Fields -> Add new:

Provide a new field group title, select the group’s location to Block and choose your block’s name from the list (My Block in our example).

Add fields to your block (+ Add Field button). For example, if you want your user to have the ability to change some text in your block — add a text field.

Add as many fields as you need. If you new with ACF plugin — take a look of detailed documentation about each of field types here: https://www.advancedcustomfields.com/resources/#field-types

As soon as you’re done — click on the Publish button.
Create a template file for your block. Add a new file in your block’s folder (blocks/my-block) that matches the render_template setting used when registering the block (block.php in this example).
Add a PHP and HTML code of your block in that file. For example:

<?php
/**
* Custom Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during backend preview render.
* @param int $post_id The post ID the block is rendering content against.
* This is either the post ID currently being displayed inside a query loop,
* or the post ID of the post hosting this block.
* @param array $context The context provided to the block by the post or it's parent block.
*/

// Support custom "anchor" values.
$anchor = '';
if ( ! empty( $block['anchor'] ) ) {
  $anchor = 'id="' . esc_attr( $block['anchor'] ) . '" ';
}

// Create a class attribute allowing for custom "className" and "align" values.
$class_name = 'custom-block';
if ( ! empty( $block['className'] ) ) {
  $class_name .= ' ' . $block['className'];
}
if ( ! empty( $block['align'] ) ) {
  $class_name .= ' align' . $block['align'];
}

// Load values and assign defaults.
$text_to_change = get_field( 'text_to_change' ) ?: __('Default text', 'theme-slug');
$image_to_change = get_field( 'image_to_change' ) ?: 112; // returns image ID
?>

<div <?php echo $anchor; ?>class="<?php echo esc_attr( $class_name ); ?>">
  <div class="custom-block">
    <h3 class="custom-block__text">
      <?php echo esc_html( $text_to_change ); ?>
    </h3>
    <div class="custom-block__image">
      <?php echo wp_get_attachment_image( $image_to_change['ID'], 'full' ); ?>
    </div>
  </div>
</div>

The only function here that comes from the ACF plugin is get_field. It returns a value of the field you added in the field group called My Block (step 2).

Don’t forget to add CSS styles to your block. You can do that either in your theme’s stylesheet file or in the file block.css if you use a new block.json syntax (that file goes to the folder with your block.php file). To apply custom block styles to the Gutenberg editor use this code:

function custom_prefix_theme_setup() {
  // Add support for editor styles.
  add_theme_support( 'editor-styles' );
  // Enqueue editor styles.
  add_editor_style( 'blocks/my-block/block.css' ); // relative path from your theme's directory
}
add_action( 'admin_init', 'custom_prefix_theme_setup' );

All we have to do now is to add our new custom block in the WordPress page or post:

An example of a custom Gutenberg block made with ACF Pro plugin

I’ve made a very simple block just to demonstrate how easy it can be done, you can learn more about custom blocks from the ACF docs: https://www.advancedcustomfields.com/resources/blocks/

Why do I need to use custom Gutenberg blocks again?

As you may have noticed, the HTML markup I use in the example is completely arbitrary. No need to deal with extra elements like in Elementor or other WordPress builders. As well as CSS — your block only inherits basic styles from your site (like from <body> or <html> tags). And it’s super easy for users to change any data you provide them to change. So you can create a very complex custom blocks with lots of settings and your users can easily maintain them from the admin without disturbing you each time they want “to change that button text” 😄.

What do you think about this bundle Gutenberg + ACF? Don’t hesitate to write your thoughts in the comments below.

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace be with you!

Dynamic font-size using only CSS3

Bogdan Bendziukov — Sun, 18 Jun 2023 09:16:58 +0000

It’s 2023 already, time flies! So using CSS media queries for different screen resolutions just to increase/decrease your text sizes for a couple pixels or rems is kinda annoying. Why don’t you use dynamic font-size instead?

What is dynamic font-size?

Dynamic font-size means your text sizes will be changed proportionally to the user’s viewport width. You just need to provide the minimum value of font-size, the maximum value of it, and two breakpoints, between which font will scale.

For example: let’s say you want your text to have a font size of 20px at viewport width of 768pxand maximum size of 36px when viewport width is 1920px. But if the viewport width is less than 768px, you don’t want your font-size to get lower than 16px and if the viewport width is more than 1920px you want your font size to stop scaling at 48px.

Lots of words, better check the pictures below.

When viewport’s width is 768pxthe font-size is equal to 20px:

When viewport width is larger than 768pxthe font-size scales proportionally:

At 1920pxit becomes 36px:

For the screens smaller than 768px, the font-size won’t be smaller than 16px:

For the screens larger than 1920px, the font-size won’t be bigger than 48px:

Pretty cool, huh 😁?

What’s the trick?

To achieve that we only need one line of CSS:

font-size: clamp(16px, calc(20px + (36–20) * (100vw - 768px)/(1920–768)), 48px);

Here we use native CSS3 function clamp(), which accepts three arguments:
the minimum value, the desirable value and the maximum value. For the minimum value we use 16px in the example above, the maximum value is 48px.

The desirable value is the most tricky part — we use the CSS function calc() for it, which performs calculations between different CSS values.

20px (as well as 20) — is our minimum value for the font-size;

36 — is the maximum value of the font-size;

768px (768) — is the lower breakpoint;

1920 — the higher breakpoint;

100vw returns the full width of the user’s viewport (1vw = 1% of the viewport’s width).

To make sure this formula works let’s test it for our breakpoint values (which are 768px and 1920px).

So when the user’s viewport width becomes 768px, then 100vw = 768px. Just replace 100vw to 768px and you will get exactly 20px (the right part of the formula equals 0px).

Do the same with 1920px viewport width and you will get exactly 36px as the value for the font-size (the right part of the formula equals 16px).

Demo

As you can see, dynamic font-size can be possible with only CSS3, thanks to clamp() and calc() functions. If you want to dive deeper into different solutions for dynamic font-size, I highly recommend this article to read:
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ .

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!
Stay safe and peace be with you!

Gutenberg vs Elementor

Bogdan Bendziukov — Thu, 25 May 2023 13:59:19 +0000

Elementor is the most popular builder on WordPress and one of the most downloadable plugins in the whole WordPress plugins repository. It has over 5 million active instals!

I remember how I enjoyed working with it when it became popular. You can change anything you want and immediately see the effect — you’re working on your actual page, not with some weird blocks, hello Visual Composer! And yes, I know they improved it quite a lot, but still I have those blocks in front of my eyes and how I was presented it to my clients 🙄.

Back-end on Visual Composer looks scary for non-prepared users

So much easier to build websites with Elementor. Source: https://elementor.com

But Elementor is a whole different thing.. Or is it?

Until Gutenberg was introduced in WordPress 5.0 (November 2018), users dealt with TinyMCE WISYWIG Editor — an open source rich text editor. Lot of users still keep using it, that’s why the Classic Editor plugin is one of the most installed plugins in the WordPress plugin repo.

It was very good for quite a long time, but nowadays people often need much more than inserting an image or making a word in a bold font. Users want to have an opportunity to create complex pages with different blocks, reorder them, and all that without programming knowledge. Fair enough, I’d say! When you’re using your smartphone you don’t need an iOS or Android developer next to you, are you? Even if you don’t know how to change some option, the first google link will help you.

Ok, so what’s wrong with Elementor? Seems like it has all you need for the full site editing. Why should you use Gutenberg, which is obviously less powerful?

First of all — Gutenberg is a part of WordPress!

And it keeps evolving. It was quite buggy on its first release, I agree. And I also was one of those people who installed the Classic Editor plugin first thing after starting developing a new WordPress site. But times change and now it’s so much easier and more convenient in use. And as it’s already part of WordPress means themes and plugins developers will provide Gutenberg support in their products more and more.

Gutenberg produces only tags you need!

One of my most favourite things about Gutenberg Editor as a developer — it is so easy to maintain. Ever checked your console using Elementor?

Here’s an example of what you get with placing only ONE paragraph:

A screenshot with Elementor’s code mess

And here’s a comparison with the Gutenberg Editor:

A screenshot with Gutenberg cleaness

Big difference, right? It’s also a big difference for SEO, since the less your page has elements, the lesser size it will have, which means the faster it will load.

It’s also much easier to maintain for developers — you don’t need to use a giant CSS chain to set new styles for elements, your page structure keeps simple and logical.

Users won’t mess it up — they can only change what they NEED to change.

Elementor has too many tools. It scares unprepared users. On one hand they can change via Elementor tools anything I’d say. Not only basic stuff like paddings, margins, borders etc. But also create animations, add pseudo elements (:before and :after), even append custom CSS for elements.

But do they actually need it? If you’re owning some cafe and just want to change a couple of pictures on your site — do you really need those animation options?

There’s a new type of “developers” already — the ones who can build sites only using Elementor (or other builders). So it looks like Elementor was designed specifically for them. Because once a customer wants some extra functionality which isn’t covered by Elementor’s blocks — such “developers” will be helpless.

Imagine such a picture — you have 20 pages on your site and want to change border-radius from 20px to 0px (make them square). If you are a regular user and don’t use global styles (which are only available in the Elementor PRO, btw), you’re gonna spend some time to adjust all your buttons. And what if you have 50 pages? A hundred pages?

Don’t get me wrong, Elementor is not completely useless. It’s very good for quickly building landing pages, for example. But most of the options it provides are quite complex for regular users and for developers it causes extra problems with maintaining markup and styles.

Easy to extend existing blocks!

Want to add a new style for a Gutenberg block? It’s so easy:

/**
* Register custom block styles
*/
add_action('init', 'theme_prefix_register_block_styles');
function theme_prefix_register_block_styles() {
  register_block_style('core/heading', [
    'name' => 'title-small',
    'label' => __('Small title', 'theme-slug'),
  ]);
}

Using render_block hook you can customise content of any block in Gutenberg.

For instance, let’s add lazy-load class to all images from Gutenberg:

/**
* Add custom class for gutenberg images
*/
add_filter( 'render_block', 'theme_prefix_custom_image_class', 10, 2 );
function theme_prefix_custom_image_class( $block_content, $block ) {
  if ( 'core/image' === $block['blockName'] ) {
    $block_content = preg_replace('/wp-image-/', 'lazy-load wp-image-', $block_content);
  }

  return $block_content;
}

I highly recommend this article from CSS tricks about block filters in Gutenberg — there’s so much stuff you can achieve and extend blocks however you want.

Easy to create new blocks!

Either with ACF PRO or using a traditional method. I wrote about how to build a custom Gutenberg Block using Advanced Custom Fields Pro plugin here:

How and Why to Build Custom Gutenberg Blocks in WordPress

The “traditional” way might seem a bit complex — you need to set up a dev environment with Node, use React to build the settings panel of your block. But luckily, there’s a package for quick installation and preparing all you need to create a custom Gutenberg block called @wordpress/create-block. So all you have to do is run couple commands in your terminal:

$ npx @wordpress/create-block your-block-name
$ cd your-block-name
$ npm start

Voila! You are all setted up and ready to build yet another Gutenberg block 😄.

Learn more about building Gutenberg blocks via @wordpress/create-block here: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/

Conclusion

Nothing is perfect in this world. So is Gutenberg. I can write another article about the cons of the Gutenberg Editor. But the fact is that Gutenberg is a part of WordPress. It evolves and will keep evolving. I don’t know if it will kick out Elementor from the market (I doubt it), but it will become a valuable player for sure. So digging into the Gutenberg ecosystem is one of the needful tasks of modern WordPress developers.

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace to you!

DEV Community: Bogdan Bendziukov

Responsive Layouts Without Media Queries

Units system

Setup variables

Dynamic font scaling

Layout with equal column width

Layout with different column width

Stackable columns

Combining all together

Final thoughts

An Easy Way to Make an Auto Responsive Menu

No JS required — you can do this with CSS!

Sub menu on hover

Tabbed content

Snap block

7 Old-School Practices in HTML Should Be Avoided

Using type attribute for <script> and <style>

Accordion (FAQ) block requires JS code

Use <header> and <footer> only once per page

Using frameborder="0" to remove border around <iframe>

Include support for IE 8

Randomly choose heading tags

Adding ="1" for boolean attributes

Enhancing Web Accessibility: Locking the TAB Button within Modals and Menus

RAM Technique in CSS

What’s under the hood?

With modern CSS properties you can handle your layouts with less code and in a more efficient way.

5 useful tips for Wordpress developers

1. Use less plugins, write more code.

2. Escape everything!

3. Use child theme.

4. Prepare content for translation.

5. Use actions and filters.

There will be more…

5 Should-Use WordPress Plugins as a Developer

Advanced Custom Fields

FacetWP

Contact Form 7

WP All Import/Export

Duplicator

Roadmap for WordPress Developer

DECIDE WHAT YOU WANT TO DO

THE BASICS

THE FRONT-END

THE BACK-END

THE CONCLUSION

How and Why to Build Custom Gutenberg Blocks in WordPress

Register a new block

Add a new block

Why do I need to use custom Gutenberg blocks again?

Dynamic font-size using only CSS3

What is dynamic font-size?

What’s the trick?

Demo

Gutenberg vs Elementor

First of all — Gutenberg is a part of WordPress!

Gutenberg produces only tags you need!

Users won’t mess it up — they can only change what they NEED to change.

Easy to extend existing blocks!

Easy to create new blocks!

Conclusion

Using type attribute for `<script>` and `<style>`

Use `<header>` and `<footer>` only once per page

Using `frameborder="0"` to remove border around `<iframe>`

Adding `="1"` for boolean attributes