DEV Community: Maria del Carmen Santiago

How to avoid infinite loops onIonChange.

Maria del Carmen Santiago — Fri, 18 Feb 2022 17:54:13 +0000

Backstory

I encountered a problem at work while creating a search page with several filters using an IonSelect for each. The problem came when I added a 'clear all' button to clear the filters, which threw me into a neverending loop. 😱

My solution

1) Imported the useState Hook and declared a state variable like the one below.

const [isResetting, setIsResetting] = useState(false)

2) Created a reset button which would change the state variable to true when clicked.

onClick={() => setIsResetting(true)}

3) Imported the useEffect hook and set it to run only when isResetting changes. What I wanted to achieve here was for the resetAllFilters function (step 4) to run only when isResetting is set to true.

useEffect(() => {
    if (isResetting) resetAllFilters();
}, [isResetting])

4) Created the resetAllFilters function, which should change the value of all the filters. The last line on this function should be to change the state variable isResetting back to false.

const resetAllFilters = async () => {
    // insert your code 
    setIsResetting(false);
}

5) Last but not least, I made sure that when the state variable isResetting is set to true the IonSelect does not change its value, thereby avoiding going into an infinite loop.

<IonSelect
    multiple={true}
    placeholder="Select tags"
    value={filters.tags}
    placeholder="Select tags"
    onIonChange={e => isResetting ? console.log("reset at work") : applyFilter("tags", e.detail.value)}                                     >

And voila! With these 5 steps I solved my problem at work.

I didn't find any other solutions online, but would love to hear if anyone else has encounted this problem and solved it in a different way.

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

Filtering Component using Vanilla JS and HTML Content Template Element.

Maria del Carmen Santiago — Tue, 24 Nov 2020 17:46:14 +0000

Create your own filtering component using TailwindCSS, HTML content <template> element, and JavaScript (yeap, no JS framework needed). Not all projects require the use of frameworks and this is a solution for those simpler projects.

FYI You can skip the explanation and take a look at the whole code in the CodePen at the end of this article.

Creating a filtering component can be done by writing hundreds of lines of HTML code and controlling the material shown by changing the 'display' property from 'none' to 'block'.

That's fine, but you can also use the power of JavaScript so as to not repeat the same HTML code over and over again. All you need to do to get started is to create one single template in your HTML and learn how to copy said template and manipulate it using JavaScript.

TailWindCSS

TailWind CSS is a utility-first CSS framework that helps you design directly on your markup. Installation can be a little tricky, but you can always just add the CDN link <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> at the <head> of your HTML document to get you started quickly.

For those of you that already know Tailwind, have you checked out version 2.0? They have added some really cool features like dark mode and animations. I'll be having a deeper look at it myself this weekend. #funcoding

HTML

In your HTML you want to look into creating your own <template> tag. The content held within the template tag will be hidden when the page loads. You have to use JavaScript in order to create a clone of this template and attach it to the body of your document for it to be displayed.

For this mini-project example, we will have a few buttons at the top of the page and below them, we will display a few cards with information on them. No need to know what the information is right now, just the structure of it.

You can give this project whatever style you want, but what's important is to add a btnFilter class to all the filtering buttons. The buttons will also need their own identifying IDs. The section(or div) element that will contain all the copies/clones of the template will need an ID (resourcesContainer) as well as the elements we want to manipulate with JavaScript that are found within the template (resource, title, description, and tagsContainer).

<!-- buttons section -->
<section class="mt-10 text-center">
      <button id="all" class="btnFilter text-gray-100 font-bold py-1 px-3 my-4 rounded-full border-2 shadow-2xl bg-gradient-to-b from-blue-700 to-teal-400 md:my-0 md:mx-2 hover:from-blue-600 hover:to-teal-300 hover:border-teal-400 focus:outline-none focus:shadow-outline">
        All
      </button>
      <button id="html" class="btnFilter text-gray-100 font-bold py-1 px-3 my-4 rounded-full border-2 shadow-2xl bg-gradient-to-b from-blue-700 to-teal-400 md:my-0 md:mx-2 hover:from-blue-600 hover:to-teal-300 hover:border-teal-400 focus:outline-none focus:shadow-outline">
        HTML
      </button>
      <button id="css" class="btnFilter text-gray-100 font-bold py-1 px-3 my-4 rounded-full border-2 shadow-2xl bg-gradient-to-b from-blue-700 to-teal-400 md:my-0 md:mx-2 hover:from-blue-600 hover:to-teal-300 hover:border-teal-400 focus:outline-none focus:shadow-outline">
        CSS
      </button>
      <button id="js" class="btnFilter text-gray-100 font-bold py-1 px-3 my-4 rounded-full border-2 shadow-2xl bg-gradient-to-b from-blue-700 to-teal-400 md:my-0 md:mx-2 hover:from-blue-600 hover:to-teal-300 hover:border-teal-400 focus:outline-none focus:shadow-outline">
        JavaScript
      </button>
    </section>

<!-- RESOURCES CONTAINER section div -->
<section id="resourcesContainer" class="w-full flex flex-wrap content-center justify-around mx-auto px-2 py-5 md:px-4 lg:px-10">

  <!-- TEMPLATE resource card -->
  <template>
    <!-- CARD -->
    <article id="resource" class="flex flex-col overflow-hidden rounded-lg shadow-2xl w-64 m-4 bg-teal-400 text-center lg:w-3/12 lg:m-8">
        <div class="rounded-md bg-blue-100 text-blue-600 m-4 p-2 flex-grow flex flex-col justify-between">
          <header class="font-bold text-lg text-blue-700 underline">
            <h2>
              <a id="title" href="#" target="_blank">
              </a>
            </h2>
          </header>
          <p id="description">
          </p>
          <!-- TAGS -->
          <div id='tagsContainer' class="pt-4 flex justify-around flex-wrap"> 
          </div>
          <!-- TAGS end -->
        </div>
      </article>
      <!-- CARD end -->
  </template>
  <!-- TEMPLATE resource card end -->

</section>
<!-- RESOURCES CONTAINER section div end -->

I won't explain the classes as, aside from btnFilter, all are TailWind CSS classes. These help style my component without adding a single line of CSS code, but for the sake of explaining a few: mt-10 just means margin-top: 2.5rem;, md:my-0 means at medium-sized screens margin-top and margin-bottom are set to 0px, and hover:border-teal-400 means that on hover the element's border will be a shade of the color teal. Most can be quite self-explanatory.

With TailWind, I recommend starting the design for mobile screens and add extra classes for bigger screens after that.

JavaScript

Now comes the fun part! Let's start this part by collecting a few initial resources (or any dummy data) and adding them to our dataResources array.

const dataResources = [
  {'title': 'FlexBox Froggy',
   'link': 'https://flexboxfroggy.com/',
   'description': 'A game where you help Froggy and friends by writing CSS code!',
   'tags': ['all', 'css', 'game']
  },
  {'title': 'freeCodeCamp',
   'link': 'https://www.freecodecamp.org/',
   'description': 'Learn to code at home. Build projects. Earn certifications.',
   'tags': ['all', 'html', 'css', 'js', 'certification']
  },
  {'title': 'State of JavaScript',
   'link': 'https://stateofjs.com/',
   'description': 'Find out which libraries developers want to learn next, satisfaction ratings, and much more.',
   'tags': ['all', 'js', 'survey']
  }
]

Now for our first function, we are going to filter the dataResources array to match the category with the tags in each resource. If any of the tags match the category chosen then we will clone the template of the card and use the data of said resource on it. Then we will take this newly cloned card and append/attach it to the resources div/section container. The same will be repeated for all the resources that match to create a new card for each. For those that don't match the category, nothing will happen.

const resources = document.querySelector("#resourcesContainer");

let category="";
let filteredDataResources = [];

function filterResources(category) {
  // filter data
  filteredDataResources = dataResources.filter( resourceData => {
    if (resourceData.tags.includes(category)) {
       // clone new card
       const resourceCard = copyTemplateCard(resourceData);
       // attach new card to container
       resources.appendChild(resourceCard);
    } 
  })
}

// call filterResources function to display all cards with an `all` tag on their tag list.

filterResources("all");

How are the new cards getting cloned from the template? For that let's dive into our second function, which got called each time a resource would pass through the filter from our filterResources function.

const template = document.querySelector("template"); 
function copyTemplateCard(resourceData) {
  // clone template
  const resourceTemplate = document.importNode(template.content, true);
  const card = resourceTemplate.querySelector("#resource");
  // insert title information from array
  const title = card.querySelector("#title");
  title.innerText = resourceData.title;
  title.href = resourceData.link;
  // insert description information from array
  const description = card.querySelector("#description");
  description.innerText = resourceData.description;
  // insert tag information from array  
  tagsContainer = card.querySelector("#tagsContainer");
  // map though tags to create a tag element for each tag in the array
  resourceData.tags.map(resourceDataTag => {
    const individualTag = document.createElement("span")
    // create a tag for all tags except the first one called 'all'
    if ( resourceDataTag !== 'all' ) {
      // add styles
      individualTag.classList = "inline-block bg-teal-400 text-blue-100 rounded-full px-3 py-1 mb-1 text-sm font-semibold"
    // add text
    individualTag.innerHTML = `#${resourceDataTag}`
    // append/atach tag to tags container
    tagsContainer.appendChild(individualTag)
    } 
  })
  // return the new cloned card with the information from the array inserted into it.
  return card;
}

Almost done with our functions. Now we want to be able to change the category of the filtered items shown. We can do that with a short function. Within it, we will clear the container holding all the cards. You want to do this because otherwise every time you select a new category new cards will be cloned without getting rid of the previous cards.

After that, we will change our category variable to equal the ID of the button pressed (which is why it was important for each button to have its own unique ID). With the category changed we can call the filterResourses function with the new category as a parameter, so as to filter the dataResources array once more and create our new cards according to this new category.

function fillResourcesContainer(e) {
  resources.innerHTML = "";
  category = this.id;
  resources;
  filterResources(category)
}

Now just add an event listener to each button and there you go!

const btnFilter = document.querySelectorAll(".btnFilter")

btnFilter.forEach(function(btn) {
    btn.addEventListener("click", fillResourcesContainer);
});

Demo

Feel free to fork and play with this CodePen and add as many different features to it as you see fit. An example that I did elsewhere was to change the color of the tags according to their category using switch statement.

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

The 3Gs of CSS3: Grid Edition

Maria del Carmen Santiago — Thu, 24 Sep 2020 15:22:12 +0000

A Collection of Guides, Games, and Generators useful for your everyday CSS needs. The idea behind this collection is to help you become a better CSS developer by providing resources to help you understand the concepts and generators that will make you more efficient.

Grid

CSS Grid is a tool you can use to create wonderfully responsive layouts without having to rely on using queries. For one-dimensional layouts (rows OR columns), take a look at my 3Gs of FlexBox article. For two-dimensional layouts (rows AND columns), Grid is the solution for you.

Guide

CSS Tricks has a complete CSS Grid Guide with illustrations focusing on all the settings available for the parent container and its child elements. You can even buy a poster from them to hang on your wall (to go with your FlexBox one).

Alternative: Learn CSS Grid by jonsuh.

Games

GridGarden

Water your carrot garden with CSS GridGarden. With this simple game, you get to practice your CSS Grid skills.

GridCritters

For an adventure-filled game, take a look at Mastery Games' GridCritters. Price: ~~$179~~ $99

CSS Diner

Not a Grid game, but useful for it nonetheless. CSS Diner is the game to play if you want to learn the ins-and-outs of CSS selectors. You can later use this to select the elements you want to apply Grid to.

Generator

In the spirit of not memorizing every concept, use one of the many generators available online. LayOutIt! stood out for me from the rest as you are but a click away from taking your generated grid into CodePen (how cool is that?! 😃 ).

Alternatives: CSS Grid Cheat Sheet by alialaa and CSS Grid Generator by sarah_edo.

Bonus: Video Tutorials

For a quick look at CSS Grids, check out Jenn Lukas' How to use CSS grid layout in 60 seconds! video on the Women Techmakers' youtube channel.

Want a more in-depth look? Wes Bos has an amazing (and free!) 4-hour course on CSS Grid. You can find the 25 videos on cssgrid.io.

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

The 3Gs of CSS3: FlexBox Edition

Maria del Carmen Santiago — Thu, 10 Sep 2020 14:31:53 +0000

Flexbox

Flexbox is a powerful layout tool that lets you solve responsive web design problems without needing to use media queries.

Guide

CSS Tricks has a complete guide with illustrations that will help you visualize the power of flexbox. You can even buy a poster from them to hang on your wall.

Games

Move the froggy to the lilypad with FlexBox Froggy. A very simple kid-like game that will help you understand flexbox.

Kiddy games not your thing? How about a war-like game? With FlexBox Defense you have to stop the enemies from getting past your defense using the power of flexbox!

You can kill zombies with FlexBox Zombies. This one follows a storyline so don’t forget that you are actually coding when playing this game.

Generator

Just because you understand a concept doesn’t mean you need to memorize everything. Flexy Boxes is an amazing tool to have when solving your layout problems. Add as many items as you need and see in real-time what each property will do to each of them.

Alternative: flexplorer

Bonus: VS Code Extension

I was not going to add this, but this extension got better with the last update and it is now more interactive! Check out CSS Flexbox Cheatsheet VS code extension. If you don’t know how to install this, you can take a look at my previous article on VS Code Extensions.

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

Exploring Github: Developer RoadMaps, Octocats, and more!

Maria del Carmen Santiago — Tue, 25 Aug 2020 12:24:07 +0000

Github is more than just a place to store your code. Explore Github and use it as a tool for your open-source education and more.

With its first commit in October 2007, Github has provided hosting and version control for developers all around the globe. But I wonder, have you explored all Github has to offer?

Learn to Code

I encourage you to go to the 'explore' section and take a look at all this site has to offer. For example, go to github.com/collections/learn-to-code for a collection of resources that can help you further your coding education.

Here you can find some good material for your learning journey, including a very comprehensive Developer RoadMap for this year.

kamranahmedse / developer-roadmap

Roadmap to becoming a web developer in 2020

Roadmap to becoming a web developer in 2020

Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops. I made these charts for an old professor of mine who wanted something to share with his college students to give them a perspective; sharing them here to help the community.

^{Special Announcement:}

We now have a YouTube Channel
I plan on covering the roadmaps and put more content there
Subscribe to the channel.

Purpose of these Roadmaps

The purpose of these roadmaps is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to pick what is hip and trendy. You should grow some understanding of why one tool would be…

View on GitHub

Front End Libraries and Frameworks

Luckily for us, this community is big on sharing, so you can also take a look at the code for some of the biggest libraries and frameworks out there. For front-end developers, visit github.com/collections/front-end-javascript-frameworks and take a look around.

There is a lot of good code (usually in their src folder) that you can learn from. Find a functionality or feature you find interesting, go to the source code and try to understand what is going on. Remember, this is code that has been revised time and time again by many developers so you can learn patterns and concepts that work.

Social Impact

We all know that a lot has been going on this year. You can see some of the things this community has done to improve the world we live in by visiting github.com/collections/social-impact. Who knows, maybe you'll get inspired and build your own socially impacting open source project.

Events

A good way to connect with other developers is to participate in events. The next one being 'Demo Days - Using Dependabot to keep your dependencies secure & updated' on the 28th of August.

Bonus

Not on the Github page, but worth mentioning.

Hackathon

Hacktoberfest is coming up! This is a month-long open-source hackathon sponsored by Github.

Presentations

Need a tool to pitch your new ideas? GitPitch is a great way to create your presentation in an engaging way. You can share your slides online as public, private, or password-protected. Since it is an open-source project maintained on GitHub you can fork and modify the repo in order to fit your own particular needs too.

Build your own Octocat!

There is an octocat generator available on the internet! What is an octocat you say? Well, it's Github's mascot of course!

Since purple is my color of choice I made this one and have been adding it to the README.md files of all my new repositories as a fun little personal touch.

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

In case you missed it... Github Profile Readme.

Maria del Carmen Santiago — Mon, 10 Aug 2020 10:06:54 +0000

Take your Github Profile to the next level by giving your page a bit more life!

This is a "secret" feature that can help you boost your Github Profile page and make it stand out from the pack! All you need to do is create a new public repository named after your own username.

Once that is done, edit the README.md file using markdown to add information about yourself or anything else you want to bring attention to.

Don't know markdown? For a good open-source reference guide that includes the basics and extended syntax go to markdownguide.org.

You can use some HTML, but what works is limited. A useful example of this is using the <img> element to manipulate the alignment, width, and height of an image. (No align="center" though... sorry).

<img align="right" width="100" height="100" src="http://www.picture.com/100/100">

Want to add some motion? GIFs are easy to add. Visit giphy.com to get some or to make your own.

![Alt Text](https://media.giphy.com/media/123/giphy.gif)

<!-- or -->

<img align='right' width="230" src="https://media.giphy.com/media/123/giphy.gif" >

Emoticons are easier to add on markdown. Browse through the list of github markdown emoji markup and pick the one you need.

Example: For 😄 type :smile:

Want to add badges with your contact info? Take a look at shields.io. No need to install anything. Just copy the correct code to your repository and you're done.

<!-- Twitter badge code example --> 

[![twitter badge](https://img.shields.io/badge/twitter.com-@username-blue?style=flat&logo=twitter)](https://twitter.com/username)

Here is a look at my new Github profile page (for now)...

Now, don't be shy. Share your profiles or any cool ones you stumble upon in the comment section. As limiting as markdown can be (no CSS 😞), you can still make your page look awesome.

Don't believe me? Have a look at abhisheknaiidu's awesome-github-profile-readme repository or visit awesome-github-readme-profile.netlify.app to get some inspiration!

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

Speed up your Website: Tools and Tricks for Visual Media Files

Maria del Carmen Santiago — Thu, 06 Aug 2020 20:46:37 +0000

You can incredibly increase your page speed by setting up your media files appropriately. This article is a collection of tools and tricks that will help you optimize your page easily, along with other things related to visual media files.

First, let's take a look at the free tools found online. Then we will see some simple HTML5 code snippets that can make a huge difference at speed and user experience. Finally, we will see a couple of tools that can analyze your webpage speed.

Free Tools

Disclaimer: All of the tools shared in this article are free, but if you like them and have the money for it I encourage you to donate money to its creator(s).

Reduce File Size

tinypng.com

When it comes to the speed of your webpage, the size of your media files is one of the first things you should look into. TinyPNG.com reduces the file size of your images while having basically no effect on the look of the original. By doing this your images will load faster, thereby making your webpage faster as well.

videosmaller.com

Upload your videos (up to 500mb) to this service to reduce video file size without losing quality. You have several features like removing the audio and you also have the assurance from them that even if you don’t delete the video yourself, they will remove it from their servers after a few hours.

Remove Background

remove.bg

Couldn’t be easier. Drag the image into remove.bg, download the new image, and done. With the help of AI technology, remove.bg can remove your image’s background in seconds with no editing on your part. You can also replace that transparent background using this tool.

unscreen.com

Using the same upload or drag and drop system as with remove.bg, this tool will remove the background of any gif or video using AI technology.

Free Stock Photos and Videos

pixabay.com

Pixabay has over 1.8 million royalty-free stock images and videos. Highly recommended for those side projects where you need images and/or videos, but you have no budget (or the artistic ability to produce high-quality media yourself!).

pexels.com

Has Pixabay’s selection left you wanting more? Head over to Pexels and take a look at their free stock of photos and videos.

giphy.com

With GIPHY you can search, share, discover, and create GIFs. When it comes to creating your own GIF you can use your own videos or set of pictures. You can also pick one of their popular GIFs and edit it by adding things like stickers and your own text. Finally, you can download and/or get a link to your new GIF so you can use it on your projects.

Placeholder

lorempixel.com

Named after the famous dummy text, this tool will provide you with a link from which you can essentially get dummy images. You can also use the placeholder generator in cases where you want a more specific image to appear, and even add text to said images!

A basic example of this tool in use would be <img src=”http://lorempixel.com/400/200” /> to get a random picture of 400 x 200 pixels.

Train your brain

pixact.ly

When dealing with media files you will probably have to deal with pixels at some point. This game will train your brain by giving you a series of measurements in pixels. You guess how much space those pixels should occupy on your screen, and get scores depending on how close your guess was.

HTML Tricks for Web Optimization

HTML tricks that go a long way when dealing with heavy media files.

GIFs

GIF video files are quite heavy and can make your page significantly slower. You can bypass this problem by ‘faking’ a GIF using the following code:

<video src="file.mp4" autoplay loop muted>

The autoplay boolean attribute will make the video automatically play itself even before all the data has loaded. The loop boolean attribute will make the browser automatically replay the video once it ends. And the muted boolean attribute will set the video's audio to mute by default.

Video

The <video> element has several attributes that could help with your page’s performance and with user experience, when used correctly.

<video 
   controls width="500" height="400"
   poster="images/movie-poster.png"
   preload="auto|metadata|none">
<source src="videos/movie.webm" type="video/webm">
    <source src="videos/movie.mp4" type="video/mp4">
    Your browser does not support the video tag. 
        Instead, you can watch it on <a href="youtube.com/movie">youtube</a>. 
</video>

Videos may take a while to load. Adding a poster attribute with a src to a selected image will enhance the user experience as the browser will display this image when the video isn’t being played yet.

The preload attribute lets us control when the video data is loaded. This attribute will be ignored if the autoplay attribute (seen in the GIFs section) is included as well. When set to auto the video will load when the page loads, metadata will load only the metadata when the page loads, and none won't load the video when the page loads.

There are browsers that don’t support all video formats, but including several <source> tags will solve that issue. The browser will go from top to bottom and display the first video it recognizes. You should always include a fallback text with a link to where the user can watch/download the video in case any of the other formats fail to load.

To get the full list of <video> attributes take a look at the MDN web docs’s documentation. If accessibility is a concern for you (as it should be!) and you want to add captions and subtitles, take a look at this MDN web doc's article on Adding captions and subtitles to HTML5 video

Images

Img || Picture || Figure

The <img> element should always have an alt attribute. This will ensure that there is a descriptive alternative text available to be used by search engine bots, in the case of an error loading the image or when needed for accessibility purposes. It is recommended to set a width and height so that the element always takes the same space and doesn't mess with the layout of the page later.

A useful attribute regarding page performance is loading. When set to lazy the loading of the image is deferred until it reaches a calculated distance from the viewport. There's no need to load, for example, the images in the footer of the page until we are close to displaying that part of the page in our screen, right?

<img src="images/dog.png" loading="lazy" alt="A dorky looking dog image." width="200" height="200">

The <picture> element is not that different from the <img> element. It is meant as a way to have multiple <img src="#" > sources for responsive sites and to help with speed on mobile. Think about it this way: larger image = larger file size = slower website.

<picture>
   <source media="(min-width: 500w)" srcset="images/dog-500.png">
   <source media="(min-width: 800w)" srcset="images/dog-800.png">
   <source media="(min-width: 1000w)" srcset="images/dog-1000.png">
   <source media="(min-width: 1400w) and (orientation: landscape)" srcset="images/dog-1400L.png">
   <source media="(min-width: 1400w) and (orientation: portrait)" srcset="images/dog-1400P.png">
   <img src="images/dog.png" alt="A dorky looking dog image.">
</picture>

The browser will go through this element from top to bottom and display the appropriate image, depending on the specifications in the media attribute. An <img> element is needed as a last child element of the <picture> element. This will serve as a fallback for when none of the other <source> tags match the current screen size.

Of course, you could do the same using the <img> element as follows:

 <img src="images/dog.jpeg"
    alt="A dorky looking dog image."
    sizes="(max-width: 500px) 100vw, 800px" 
    srcset="images/dog-500.jpeg 500w, images/dog-1000.jpeg 1000w">

So what can you do with the <picture> element that you can’t with the <img> element? Well, you can use this element to include different image formats. The user’s browser will use the first format it recognizes and ignores the rest.

<picture>
   <source type="image/webp" srcset="dog.webp">
   <source type="image/png" srcset="dog.png">
   <img src="dog.jpg" alt="A dorky looking dog image.">
</picture>

WebP image files are around 30% smaller than the more common PNG and JPEG files, with no loss of quality. The downside is that WebP files are not supported by all browsers. That is why we include a fallback image to cover all of our bases.

The <figure> element can contain images, illustrations, charts, diagrams, tables, code snippets, and the like. It is usually used when you want to display an image with a caption.

<figure>
   <img src="dog.jpg" alt="A dorky looking dog image.">
   <figcaption>A dorky looking dog.</figcaption>
</figure>

The <figure> element serves as a way to semantically add captions to an <img> or a <picture> element (and others). An <img> element is essential when wanting to display an image and should always have an alt attribute. A <picture> element is useful when we have more than one image format available. Both <img> and <picture> can be used for responsiveness (by instructing the browser to load the appropriate image size).

Performance

Check your page’s performance score with tools like GTmetrix and PageSpeed Insights.

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

Feel free to add more tricks and tools on the comment section below! As for me, I will keep updating this article as I stumble upon new or better tools and tricks.

💻 article.close()

Top 10 Essential VS Code Extensions

Maria del Carmen Santiago — Wed, 29 Jul 2020 14:52:55 +0000

A list of essential Visual Studio Code extensions to help you become a more efficient web developer.

If your code editor is Visual Studio Code, this is the article for you. VS Code is awesome by itself, but you can take advantage of its extensive list of extensions to support your workflow.

If you haven’t yet, download VS Code for free. Within VS Code you can browse and install extensions by clicking on the Extensions icon in the Activity Bar on the left side of the editor, or by using the command Ctrl + Shift + X.

Here are my top 10 suggested VS Code extensions for Newbies (and the rest):

1. Live Server

A must-have for any developer creating webpages using HTML and CSS. Once installed all you have to do is open your project, look for the Go Live button on the status bar at the bottom, or use the command Alt+L Alt+O in order to launch a quick development live server so you can view your current project live on any browser.

2. Live Share

In these times of COVID quarantines, this extension can help you collaborate in real-time with others working on the same project. Edit and debug with your team from the comfort of your home. Everyone gets their own cursor and you can see the changes as they type.

3. Prettier

Stop wasting time formatting your code and let this tool do it for you. It enforces a consistent style by formatting your code every time you save a file (just make sure you manage the settings correctly, as shown below).

Alternative: Beautify

4. Rainbow Brackets

Visual help for those programmers that need to worry about closures, like javascript programmers. It does this by providing different colors for round brackets, square brackets, and squiggly brackets.

Alternative: Bracket Pair Colorizer 2

5. Peacock

Useful for when you have more than one code editor window open at the same time, as it changes the color of your workspace. Another visual aid, this time designed to help you identify your different code editor windows/projects more easily.

Alternative: Material Theme (Material Icon Theme as a compliment).
Complementary: vscode Icons

6. GitLens

If you know and work with git, you will want this extension. This customizable extension lets you better understand your code by easily allowing you to view when, why, and by whom the code was added/edited.

7. Code Spell Checker

This one does exactly what it says. It is a spell checker for your editor. It works with camelCase so no worries when naming variables in Javascript. Basically, you will get a squiggly line underneath words you may have misspelled. You also get suggestions for what word you should write instead.
Supported languages are English(US) and English(UK), but you have add-on dictionaries for Dutch, Catalan, Czech, French, German, Russian, Spanish, Swedish, and Medical Terms.

8. REST Client

Do you know PostMan? Well, this tool is similar, only there is no need to leave your code editor. Once you prepare a request a Send Request link will appear above it. Click on it and view the response right in your editor’s window.

9. IntelliSense for CSS class names in HTML

You don’t need to remember all the CSS class names while you are working on your HTML file. This extension will provide you with a completion list for the HTML class attribute based on your workspace or external files referenced beforehand.

Alternative: HTML CSS Support
Complementary: CSS Peek

10. Visual Studio IntelliCode

This extension uses AI technology to help Python, TypeScript/JavaScript, and Java developers. As you code, it will show a recommended completion items list sorted by context, rather than alphabetically or by most recent.

There is no shame in using tools to help you. Quite the contrary, a smart developer is one that will use these to make their lives easier and become more efficient in the process!

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

Bonus:

Have a look at Emmet. It is already built into VS Code so no need to install. Take your time to explore and learn more about what you can do with this tool.

Some of the runner-ups:

A Look into Processing MultiDimensional Arrays Using Javascript

Maria del Carmen Santiago — Thu, 16 Jul 2020 21:00:31 +0000

Understanding multidimensional arrays by solving a simple two-dimensional Harry Potter Challenge using Vanilla Javascript.

The Challenge

The Hogwarts Express has added several new stops on its journey from Platform 9 ¾ in London’s King’s Cross Station to Hogsmeade Station in Hogwarts School of Witchcraft and Wizardry. Dumbledore needs a management tool with which a crew member can input the numbers of passengers boarding and disembarking at each station. With these numbers, this tool will automatically calculate the number of passengers on board the train.

Arrays

According to MDN web docs, arrays are “list-like objects whose prototype has methods to perform traversal and mutation operations”.

There is more than one way to create an array. You can use the array constructor const array1 = new Array(“item1”, “item2”), but it is recommended for both readability and speed to use the array literal method. Below we will use the literal method to create a one-dimension array with the names of the train stations from London to Hogwarts.

const stations = [
   "King's Cross",
   'Waverly',
   'Weasley',
   'Cardiff Central',
   'Hogsmeade',
];

A two-dimensional array is just a one-dimensional array inside another array. For each station, a pair of elements will be added in a [ [b1, d1], [b2, d2] … ] fashion, where b represents the number of passengers that have boarded the train and d represents the number of passengers that have disembarked the train. For now, we will just create an empty array that will be populated with new information submitted by the crew member in charge of the train’s passenger capacity.

const passengerLog = [ ];

Accessing HTML Elements

What is important for us to know about the HTML are the class names of the elements inside the form.

Note: There are different ways to name your classes. In this project, I used the BEM naming convention. For more on this, you can do some research on naming conventions here.

Station name’s display area: .station__name
Passengers boarding input box: .passengers__in
Passengers disembarking input box: .passengers__out
Submit button: .button__add-passengers
Passengers onboard display area: .passengers__total

HTML:

<form>
      <table>
        <tr>
          <th colspan="2">STATION</th>
        </tr>
        <tr>
          <td colspan="2" class="station__name"></td>
        </tr>
        <tr>
          <th>IN</th>
          <th>OUT</th>
        </tr>
        <tr>
          <td class="input__in-out">
            <input
                   class="passengers__in"
                   type="number"
                   min="0"
                   />
          </td>
          <td class="input__in-out">
            <input
                   class="passengers__out"
                   type="number"
                   min="0"
                   value="0"
                   />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <button type="submit" class="button__add-passengers">
              Submit
            </button>
          </td>
        </tr>
      </table>
      <br />
      <p class="passengers__total"></p>
    </form>

Next, we will be using the querySelector method and using the class selectors mentioned before in order to return the elements we need. The form itself has no class name so you can use the same method, but omitting the . at the beginning of the selector name.

JavaScript:

const stationName = document.querySelector('.station__name');
const passengersIn = document.querySelector('.passengers__in');
const passengersOut = document.querySelector('.passengers__out');
const buttonAddPassengers = document.querySelector('.button__add-passengers');
const passengersTotal = document.querySelector('.passengers__total');
const form = document.querySelector('form');

Adding Elements to Multidimensional Arrays

The push method will add elements to the end of an array. If we have an array const letters = [‘b’, ‘c’, ‘d’] and want to add a fourth letter we just need to use the array.push(‘e’) method to add that letter. This means the output for console.log(letters) will go from [‘b’, ‘c’, ‘d’] to [‘b’, ‘c’, ‘d’, ‘e’].

As mentioned before, multidimensional arrays are just one-dimensional arrays inside other one-dimensional arrays so the same method can be used to add an array into an array. We already created an array called passengerLog. Before leaving each station, the crew member in charge will use the form in order to submit two numbers. The number of passengers that boarded the train and the number that disembarked at said station.

These two numbers will need to be added to the passengerLog array using the push method passengerLog.push([passengersInValue, passengersOutValue]);. When adding an element in the form of an array you will be creating a two-dimensional array that will be constructed as follows: [ [passengersInStationOne, passengersOutStationOne], [passengersInStationTwo, passengersOutStationTwo] ... ].

const passengersIn = document.querySelector('.passengers__in');  // already established 
const passengersOut = document.querySelector('.passengers__out');  // already established 

const passengerLog = []; // already established 

function addToPassengerLog() {
   let passengersInValue = passengersIn.value;
   let passengersOutValue = passengersOut.value;

  // Replace empty input boxes with 0 before adding to log
  // Add last entry to the passenger log
   if (passengersInValue && passengersOutValue) {
      return passengerLog.push([passengersInValue, passengersOutValue]);
   } else if (passengersInValue && !passengersOutValue) {
      return passengerLog.push([passengersInValue, 0]);
   } else if (!passengersInValue && passengersOutValue) {
      return passengerLog.push([0, passengersOutValue]);
   } else {
      return passengerLog.push([0, 0]);
   }
}

I’ve gone a step further for this project and added an if...else statement to check for empty input logs and change them to zero before adding the input values into the main array. The if...else statements all have a logical && operator which will return true if both statements on either side of the && operator are true.

If (passengersInValue && passengersOutValue), means that passengersInValue and passengersOutValue exist. So, as we state below it, both values will be added to the passengerLog array. However, if (passengersInValue && !passengersOutValue) this means that the passengersInValue exists, but the passengersOutValue does not (that is what the ! not operator is for). That input box has been left empty on the form. Hence, we add the passengersInValue value and a zero, as stated below that else if statement.

Extra: If we wished to add an element (or elements) to the beginning of an array, we could use the unshift method. We can take that const letters = [‘b’, ‘c’, ‘d’, ‘e’] array I used as an example before and add an a at the beginning as follows: array.unshift(‘a’). Now the output for console.log(letters) will go from [‘b’, ‘c’, ‘d’, ‘e’] to [‘a’, ‘b’, ‘c’, ‘d’, ‘e’].

Removing Elements from Multidimensional Arrays

The method used to remove the last element from an array is called pop. This will be an easy one. As we push elements into the array we get a two-dimensional array that looks like this: [ [passengersInStationOne, passengersOutStationOne], [passengersInStationTwo, passengersOutStationTwo] ]. When we use the pop method, it will remove not just passengersOutStationTwo, but the whole [passengersInStationTwo, passengersOutStationTwo] array as this whole array is considered an element of the passengerLog array.

const passengerLog = []; // already established 

function removeFromPassengerLog() {
  // Remove last entry from passenger log
  return passengerLog.pop();
}

Extra: If we wished to remove an element from the beginning of an array, we could use the shift method. We can take that const letters = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’] array and remove the a at the beginning as follows: array.shift(). Now the output for console.log(letters) will go from [‘a’, ‘b’, ‘c’, ‘d’, ‘e’] to [‘b’, ‘c’, ‘d’, ‘e’].

Reduce Multidimensional Arrays

The reduce method will execute a function determined by you on each element. After it is done it will return a single output value.

Reduce can take in four arguments. An accumulator(acc), current value (cur), current index (idx), and source array (src) with a syntax array.reduce(function(acc, cur, idx, src), initialValue).

For this example, we will only use the first two arguments (which are the only two that are required). Applying reduce to the passengerLog array means that for each [passengersInStationX, passengersOutStationX] entry we will execute the function provided. The results will be stored inside the accumulator (acc) before going to the next entry, executing the function on that next set of values, and adding the result to the accumulator.

Side Note: Arrays are zero-based. To access an item in an array you can use the index position as follows: const letters = [‘b’, ‘c’, ‘d’, ‘e’] console.log(letters[0]) //output: ‘b’ console.log(letters[1]) //output: ‘c’. As for multidimensional arrays, if we have const letters2 = [ [‘b’, ‘c’], [‘d’, ‘e’] ] and we want to access the letter ‘c’ we would need to use the index of the first element [‘b’, ‘c’] and then the index of the letter ‘c’ inside that array. That means console.log(letters2[0]) //output: [‘b’, ‘c’], whereas console.log(letters2[0][1]) //output: ‘c’.

function calculatePassengersTotal() {
  // Calculate number of passengers onboard.
   return passengerLog.reduce((acc, cur) => {
      return (acc += cur[0] - cur[1]);
   }, 0);
}

Another way of doing the same thing would be as follows:

function calculatePassengersTotal() {
  // Calculate number of passengers onboard.
  return passengerLog.reduce((onboard, [boarding, disembarking]) => {
      return (onboard += boarding - disembarking);
   }, 0);
}

Next Station!

The names of the stations are given to us so the management tool will automatically let the crew member in charge know which station they are at.

We will declare a couple of variables first. One for the index of the station, and since arrays are zero-based we will assign the number zero to it. The second variable will store the length of the array containing the names of the stations.

Side Note: The length property returns the number of elements in an array. Arrays may be zero-based, but for this property we start counting from one. For a multidimensional array like const letters2 = [['b', 'c'], ['d', 'e']]; we would get an output of 2 from console.log(letters.length) and not 1 (as if we started counting from zero) nor 4 (as if we were counting each letter as a separate element of the letters2 array).

The basic form of this nextStation function is stationName.innerHTML = stations[stationIndex] so as to change the HTML content of the stationName element to the station on the index stationIndex. Since we assigned that to zero the first station will be King's Cross.

const stations = [     // already established 
   "King's Cross",
   'Waverly',
   'Weasley',
   'Cardiff Central',
   'Hogsmeade',
];   

let stationIndex = 0;
let stationLength = stations.length;   // output: 5

function nextStation(stationIndex) {
  // Display name of station. 
  // For the last two stations the text on the button will change.
  // On the last station the button will be disabled.
   if (stationIndex == stationLength - 2) {
      buttonAddPassengers.textContent = 'Last Station Coming Up';
   } else if (stationIndex == stationLength - 1) {
      buttonAddPassengers.textContent = 'End of Journey';
      buttonAddPassengers.disabled = true;
   } 
   return (stationName.innerHTML = stations[stationIndex]);
}

nextStation(stationIndex);

I have added an if...else statement to change the text content of the submit button for when the train is approaching the destination and to change it again when the journey has ended (disabling the button at the same time).

Submit Passenger Log

The main function that will be executed when we hit that submit button on the form is the one below. On it we will first call the addToPassengerLog() function to add (or push) the inputs logged by the crew member. Then we declare a variable and assign the results from the calculatePassengersTotal() function, which will give us the number of passengers on board.

If the total number of passengers is zero or more then we display the number in the assigned space provided using innerHTML on that element. Next, we clear the input boxes using form.reset();. Finally, we increase the stationIndex by one and, with that, display the next station using the nextStation(stationIndex) function.

If the total number of passengers is less than zero, then that means there was a mistake since we can’t have a negative number of passengers on board. To give the crew member a chance to correct that mistake we will remove that last entry from the log using the removeFromPassengerLog() function, clear the input boxes and send a message about the mistake for which the crew member will have to confirm they have read using window.confirm( ).

const stationName = document.querySelector('.station__name');  // already established 
const passengersIn = document.querySelector('.passengers__in');  // already established 
const passengersOut = document.querySelector('.passengers__out');  // already established 
const passengersTotal = document.querySelector('.passengers__total');  // already established 
const form = document.querySelector('form');  // already established 

function submitPassengerLog(e) {
   e.preventDefault();
   addToPassengerLog();
   let totalPassengers = calculatePassengersTotal();

  if ( totalPassengers >= 0 ) {
    // Display the total number of passengers on board.
    passengersTotal.innerHTML = `Passengers onboard: ${totalPassengers}`
   }
   // Clear input boxes.
   form.reset();
   // Display next station
   stationIndex++;
   nextStation(stationIndex);

  } else {

    removeFromPassengerLog();
    form.reset();
    window.confirm("Check how many witches and wizards are on the train./nYou can't have more of them leaving the train than are onboard.");
  }

}

form.addEventListener('submit', submitPassengerLog);

Demo

For more on arrays, take a look at MDN web docs in arrays. I hope that with what we have seen here together you now have a better understanding of multidimensional arrays and how to work with them on more complicated projects.

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

Resources

Multi-faced Flip Card with a Click (Bonus: Going further into 3D space)

Maria del Carmen Santiago — Tue, 07 Jul 2020 16:33:02 +0000

More than just your average Flip Card tutorial. Don’t just flip your card on hover, use JavaScript to flip it on command. Includes instructions on how to change the reverse face to show a different face each time and tricks to give the card a nice 3D effect while flipping.

This series will be divided into three parts (plus a fun bonus):

Part I: HTML
Part II: CSS
Part III: JavaScript
Bonus: Going further into 3D space

Bonus: Going further into 3D space

The bonus part of this series will explore the possibility of giving a 3D effect to independent elements on our card. We will be having a look at the different CSS selectors and the properties that need to be added or edited. No extra JS needed.

Big shout out to Kevin Powell and his Create a 3D flipping animation with HTML and CSS youtube tutorial.

Recap

It’s important to review the structure of our HTML document in order to decide upon the appropriate styles and where to apply them. So to recap, we have a parent element named card__container, with a child named card__content. The card__container will remain in position, while the card__content does the flipping.

That last element will, in turn, have at least two children. These will be positioned one on top of the other, with the card__front staying in position and the card__back rotating 180 degrees on the y-axis. The resulting ‘card’ will show only the card__front face by default. Using JavaScript, we rotated the card__content element by adding a class to it in order to rotate our ‘card’ on the y-axis and show the card__back instead of the card__front.

As for the card__back, we could have just one, or we could have several options with a display: none; declaration. Using Javascript we can change which option to display by adding a class with display: block; to the specific card__back we want, according to whatever condition we choose. For this Stranger Things project, it will depend on which number is inserted on the <form> at the card__front.

Now, let’s get started!

`.card__face`

The front and the back faces of the card share similar declarations so I’ve grouped them under the .card__face selector. One thing I had to change (which I will explain later) was the transparency of the card. I could have just changed the background: rgba(10,10,10,0.8) alpha value to 1, but I decided to replace it with a gradient background instead.

A resource I enjoy using for this purpose is Gradient Magic. On this website, you have hundreds of background gradient options to choose from. Pick the one you like, hit the Copy CSS button, and paste that declaration into your CSS. Easy peasy.

Nothing else is new from the last project on this selector: we still have the transform-style: preserve-3d; to preserve the 3D look while flipping and the backface-visibility: hidden; to hide whichever part of the card is not facing us. This isn’t really necessary when the card’s background image has no transparency, but it doesn’t hurt to have it.

.card__face {   // -or- .card__front, .card__back {
  position: absolute;
  width: 100%;
  height: 100%;
// remove line
  // background: rgba(10,10,10,0.8);   
// new line
  background-image: radial-gradient(circle at center center, rgb(71, 41, 41),rgb(8, 0, 0));
  box-shadow: 0 0 10px 8px rgba(255,0,0,0.75);
  border-radius: 5px;
  text-align: center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

`.card__front`

The front of the card with the validating <form> is where the magic starts to happen. In comes the translateZ property value.

When we translate (or reposition) elements on the x-axis it means that we are moving those elements from side to side on the screen, on the y-axis we move them up and down the screen. If you want to take that element into a 3D space you have to move it on the z-axis.

As for removing any transparency from the background of the card, this had to do with the backface-visibility: hidden; not working on the elements that have a translateZ property on them while flipping. You could solve this by adding a backface-visibility: hidden; declaration to all the selectors that have a translateZ property, but that seems like more trouble than it’s worth so I just removed the transparency for the background color of the card.

.card__front {
  padding: 40px 20px;
}

.card__front > h2 {
  font-weight: 900;
  padding-bottom: 0.5em;
  text-align: center;
  font-size: 2rem; 
  color: white;
  text-shadow: -0.05rem -0.05rem 5px rgba(237, 43, 18, 1);
  transform: translateZ(5rem);   // new line
}

.card__front > p {
  position: fixed;
  bottom: 18px;
  font-weight: 600;
  text-align: center;
  font-size: 1rem; 
  color: white;
  text-shadow: -0.05rem -0.05rem 5px rgba(237, 43, 18, 1);
  transform: translateZ(3rem);   // new line
}

.card__front > form {
  margin-top: 25px;
  transform: translateZ(7rem);   // new line
}

.card__front > form input {
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  background-color: #ddd;
  box-shadow: 0 0 5px 3px rgba(255,0,0,0.4);
  border-radius: 5px;
}

.card__front > form input:hover {
  background-color: #eee;
  box-shadow: 0 0 7px 5px rgba(255,0,0,0.4);
}

.btn {
  margin: 5px;
  padding: 10px;
  outline: 0;
  border: 1px solid rgba(0,0,0,0.1);
  background-color: transparent;
  box-shadow: 0 0 5px 3px rgba(255,0,0,0.4);
  color: white;
  border-radius: 10px;
}

.btn:hover {
  background-color: #000;
  box-shadow: 0 0 7px 5px rgba(255,0,0,0.4);
}

.btn:active {
  background-color: #333;
}

`.card__back`

The most important change for the card__back selector is choosing which elements within it we want to reposition on the z-axis, and by how much.

For aesthetic value, I have added a pseudo-element on the card__back selector. I did this because I thought it would look better to add a transform: translateZ(3rem); to a border around the image than adding this declaration to the image itself.

A transform: translateZ(5rem); added to the btn__back selector will make that button “pop” even more than the border around the image, while a transform: translateZ(7rem); added to the paragraph inside card__back__one will make that element “pop” further still.

.btn__back {
  margin: 0px;
  padding: 0.5em;
  background: rgba(10,10,10,0.8);
  position: absolute;
  top: 2.5em;
  right: 2.5em;
  transform: translateZ(5rem);   // new line
}

.card__back {
  transform: rotateY(180deg);
  display: none;
}

.card__back.display {
  display: block;
}

.card__back::before {   // new ruleset
  content: '';
  position: absolute;
  top: 0.75em;
  bottom: 0.75em;
  left: 0.75em;
  right: 0.75em;
  border: 1px solid rgb(255, 0, 0);
  border-radius: 5px;
  transform: translateZ(3rem);   // new line
}

.image__back {
  width: 100%;
  height: 100%;
  padding: 0.8em;
  border-radius: 5px;
}

#card__back__one > p {
  margin-top: -2.5em;
  color: #111;
  text-shadow: -0.05rem -0.05rem 5px rgba(237, 43, 18, 1);
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  transform: translateZ(7rem);   // new line
}

`.card__content`

No changes are made for this selector. The only declaration I would edit would be to change up that transition: transform 2s; declaration from 2 to 3 seconds. I give you this recommendation because by slowing down the flip action the user can better appreciate the 3D effect we are trying to achieve, since this effect is only really appreciated while the card flips.

Maybe in the future when we get fancy hologram-like computers we will be able to see those elements pop out of our screens. For now, while the card lays flat we won’t be able to see the elements pop closer towards us.

.card__content {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 3s;   // line edit 
}

.card__content.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

`.card__container`

The card__container will remain basically the same as well. The only thing I would recommend is to remove the perspective property or give it a higher value.

Why? Because the elements with a translateZ() property value will be affected by the perspective property. The lower the value of this last property, the larger the elements with a Z > 0 will appear, hence messing with the look of the card. You could keep the same perspective, but you will have to adjust all the other elements affected by this.

.card__container {
  width: 350px;
  height: 350px;
  // perspective: 350px;   // remove line  -or edit- perspective: 1000px; 
}

CSS Variables (optional)

This is a good project in which to use CSS variables.

:root {
  --level-one: translateZ(3rem);
  --level-two: translateZ(5rem);
  --level-three: translateZ(7rem);
}

This way you can you can make a variable for each level you want to have, while moving on the z-axis. If you want to change the levels you only need to edit the property value in the variable rather than go one selector at a time and checking which needs editing and by how much.

Below is an example of how to use the variable we have set above.

.card__front > form {
  margin-top: 25px;
  transform: var(--level-three);  
}

Demo

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near that heart.

💻 article.close()

Resources

Create a 3D flipping animation with HTML and CSS
Tricks for Using CSS translateZ() and perspective()
Gradient Magic
perspective
Transform Function: translateZ
Pseudo-element: ::before
Custom Properties: CSS Variables

Multi-faced Flip Card with a Click (Part 3: JavaScript)

Maria del Carmen Santiago — Thu, 02 Jul 2020 10:56:01 +0000

This series will be divided into three parts (plus a fun bonus at the end):

Part I: HTML
Part II: CSS
Part III: JavaScript
Bonus: Going further into 3D space

Part III: JavaScript

Let’s start with my favorite part of this project… the JavaScript! We’ll start with the function that flips the card. Then I will discuss the function that validates the input and gives us the appropriate response card on the back. Next, we will move on to the function that takes care of flipping the card back around to the front face again. Finally, I discuss the event listeners we will have to add in order for these functions to execute when needed.

In case you feel you need to review your JS basics, click here.

At the bottom of the page, you will find two codepens. The first is a codepen for this project and the second is for a similar, but more basic, project.

Let’s get started!

flipCard Function

The function to flip the card is a very short one. If you recall from the previous article in this series, we have a CSS ruleset of .card__content.is-flipped {transform: translateX(-100%) rotateY(-180deg);}. So what we will be doing here is selecting the card__content element in our javascript and toggling the “is-flipped” class to make that <div> flip. Remember that the container stays put while the content flips.

When you toggle a class you can think of it like an on/off switch that will add or remove the class according to its previous state. You access an element’s list of classes using element.classList. From there you can do things like .toggle(‘class__name’), adding a class to the element using .add(‘class__name’), among other things.

Quick JS Review: When using document.querySelector() with a (‘.class__name’) selector, the first element in the document with the class of “class_name” is returned. To return all matches to that class, use querySelectorAll(). The next step should be to save this result inside a variable. When using a selector of `(‘#idname’), the element with the unique id` called “id_name” will be returned and should be saved in its own variable as well.

const cardContent = document.querySelector('.card__content');

function flipCard() {
  cardContent.classList.toggle('is-flipped');
}

checkNumber Function

We have a card with a <form> on the front that will validate a number given by the user. The card will flip using the previous function and on the back of it, we will get… nothing. Do you remember the .card__back CSS ruleset? If you take a look at it, it has a display: none; declaration that will make all the elements with this class “disappear” from our view.

So, let’s back up a little and go step by step on this one. First, we will create three variables in which we will store the three different backs of the card using their unique ids. Then we will create a function, which I have named checkNumber() and we will pass the event on it. We pass on the event because we need to prevent the page from submitting the form and refreshing the page by using the event.preventDefault() method.

In a variable, we will store the value given to us by the user using document.querySelector('#input__form').value. We will then proceed to check the number using an if statement. If the input number is equal to 6.62607015 ( one of the Planck’s constant values mentioned in Part I of this series), then we will add the class of “display” to #card__back__one. If you look back you will remember that in the CSS we have a ruleset of .card__back.display { display: block;}. That is the class we will be adding, and is why #card__back__one will show and not the others.

Now, if the input number is equal to 6.62607004 then it will be #card__back__two that is shown and not #card__back__one. If the user inputs any other number, #card__back__three will be the one shown to the user instead of the other two. After adding the “display” class to the correct card we will call the flipCard() function we worked on before. An extra method you may want to use is the form.reset() method in order to restore the default values of our <form>. In our case, that would set the input value back to a blank.

const card1 = document.querySelector('#card__back__one');
const card2 = document.querySelector('#card__back__two');
const card3 = document.querySelector('#card__back__three');
const input = document.querySelector('#input__form');
const form = document.querySelector('form');

function checkNumber(event){
  event.preventDefault();
  let inputNumber = input.value;

  if (inputNumber == 6.62607015) {
    card1.classList.add('display');
  } else if (inputNumber == 6.62607004) {
    card2.classList.add('display');
  } else {
    card3.classList.add('display');
  }

  flipCard();
  form.reset();
}

flipCardBack Function

Do we need another function to flip the card back to the front of the card? In this case we do as we need to remove that “display” class we just added. We do not want the back of the card to disappear before it has flipped completely and the page is already showing us the front. That is why we will use the setTimeout method for this one. Inside setTimeout we will have a function that will remove the class “display” from all of the backs of the card. This function will be executed after 2000 milliseconds (it works the same if you choose just 1000 milliseconds). This value I chose has to do with the transition time I set in the CSS (which was two seconds). We mustn’t forget to flip that card either so just reuse the flipCard function in there.

const card1 = document.querySelector('#card__back__one');
const card2 = document.querySelector('#card__back__two');
const card3 = document.querySelector('#card__back__three');

function flipCardBack() {
  setTimeout(function() {
      card1.classList.remove('display');
      card2.classList.remove('display');
      card3.classList.remove('display');
    }, 2000 );

  flipCard();
}

Event Listeners

We have all of our functions, but when do they get executed? The addEventListener() method will call a function when an event happens to the target element.

The first event listener is an easy one. When a form is submitted, the checkNumber function will be executed. The event we passed inside the parentheses is that submit.

The second event listener caused me a bit of trouble. What I forgot was that, even though all the buttons at the back have the same class and look the same, they are three different buttons. So initially I added an event listener like the following btnBack.addEventListener(click, flipCardBack); and it worked… the first time around. After the first full flip, I would enter another number on the <form>, and when it flipped a second time I was getting the card face I wanted, but the button wouldn’t flip back to the front.

It was driving me a bit crazy that the button would work once, but not the second time around. Well, it turned out that I needed to add an event listener for each button separately. You could place an id on each button and have an event listener added to each like so, const btnBack1 = document.querySelector('#btn__back1').addEventListener(‘click’, flipCardBack). That is fine when you only have three buttons, but what if there were more? That is where forEach comes in handy.

const form = document.querySelector('form');
const btnBack = document.querySelectorAll('.btn__back');

form.addEventListener('submit', checkNumber);
btnBack.forEach(function(btn) {
    btn.addEventListener(‘click’, flipCardBack);
});

The Code

Here is the CodePen of the complete project. Feel free to fork it and play around with it. I just ask that you share your code if you make something cool with it! I would enjoy having a look and learning something new.

Alternative Simpler Solution

There is a simpler way of doing all of this. You could just make one back of the card instead of three and change the image using image.src as shown below, but that will limit you in terms of having completely different card faces with different layouts.

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

💻 article.close()

Resources

Multi-faced Flip Card with a Click (Part 2: CSS)

Maria del Carmen Santiago — Tue, 30 Jun 2020 19:12:08 +0000

This series will be divided into three parts (plus a fun bonus at the end):

Part I: HTML
Part II: CSS
Part III: JavaScript
Bonus: Going further into 3D space

Part II: The CSS

I will be covering this part by starting from the card outline and working my way in. There will be some explanation about what each declaration is doing, and I will provide links for those of you that want to understand each property further.

In case you feel like you need to review your CSS basics, click here.

The Container

Let’s start with the .card__container selector, which refers to the outline <div> of our card, and give it the desired width and height. You can choose different CSS units for this. I used absolute units by setting both the width and the height to 350px, but you can use relative units (e.g. em, %, vw, vh) if it suits you best for responsiveness.

The last property is a new one for me, at least until a week ago, called perspective. As I mentioned in Part I, the container will stay static and the content will be the one doing the flip. By adding a perspective property to the container of our card we will be giving the child element, which in our case will be the .card__content, a perspective view. As for the property value, a lower number will give you a more intense 3D effect. (Once the project is up and running, try changing the perspective from 350px to 50px and see how freaky it looks. For now, you won’t notice anything though so just keep it in mind for later).

.card__container {
  width: 350px;
  height: 350px;
  perspective: 350px;
}

The Content

With width and height both set to 100%, our .card__content will take up all the space of the parent element, which is that of the .card__container that we just set up a moment ago. The position property will be set to relative.

The transform-style property set to preserve-3d does exactly as it states. This will preserve the 3D appearance of the element as it flips. This effect is only appreciated when applying the transform property, which we will be adding to the .card__content.is-flipped selector. (This new .is-flipped class will be of use to us on the next part of the series.)

You could set the transform property to rotate 180 degrees on the y-axis alone, but adding a few extra things, like translateX(-100%) alongside the transform-origin property will give the flip a nice effect, although this is optional.

The transform-origin default value is 50% 50%, which is the center of the element. When the transformation is applied to the element and the transform-origin is set to center right the rotation’s axis will move to the center of the right-hand edge. You can better understand this concept if you play with the values and see the effects yourself.

The transform-style and transform-origin properties only work when you have a transform property on the element. On the other hand, the transition property works on any property. This is used to allow a smooth transition when there is a change detected in the property selected. In our case we set the transition a value to transform 2s. This means that when the transform property changes it won’t do so abruptly, but will do so over two seconds. You can change this, but I found that 1 second was too quick, and although 3 seconds was acceptable, it was a bit too slow for my taste.

.card__content {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 2s;
}

.card__content.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

The Faces

Now, let’s move on to the content on the front and back of the card. Most of the properties will be the same for these two, except for a few differences. We can group the equal declarations under a class name like I did with .card-face, or you could skip adding that extra class to those <div>s and group the front and back selectors with a comma at the center like so .card-front, .card-back{ property: property-value; }. The choice is yours.

I won’t explain those declarations that are for aesthetics purposes, but I will explain how the other ones will help us get our flip card working. We previously set the position of the .card__content to relative, and that had to do with the next property we will be adding to the face of the card. With a declaration of position: absolute the reverse face of the card will be revealed in the same position as the front face of the card, and not below as the space the two elements take up will be one on top of the other.

This next part is a little difficult to explain, but bear with me. Take two pieces of paper (one to represent the .card-front and another to represent the .card-back of the card) and have them both facing you. When you simulate the flip action, what do you get? You get the back of the .card-back. That is not what we want, which is why we will initially rotate .card-back 180 degrees (or half a turn) on the y-axis. Do the same to your piece of paper and try again.

One of the tricks to getting the reverse face to show different results is to set all of the .card-backs to display: none; and using JavaScript to change that declaration to display: block; the one we want (you’ll see more about this on Part III of the series).

Now, the .card-back of the card won’t always be the face of the card facing backwards, which is why we add the backface-visibility: hidden; declaration to both faces of the card. This means that whichever face is at the back will be hidden and won’t ruin the aesthetic of the face that is showing.

.card__face {   /* -same as- .card-front, .card-back { */
  position: absolute;
  width: 100%;
  height: 100%;   
  background: rgba(10,10,10,0.8);   /* aesthetic  */
  box-shadow: 0 0 10px 8px rgba(255,0,0,0.75);   /* aesthetic  */
  border-radius: 5px;   /* aesthetic  */
  text-align: center;    /* aesthetic  */
  backface-visibility: hidden;
}

.card__back {
  transform: rotateY(180deg);   /* -same as- transform: rotateY(0.5turn); */
  display: none;
}

.card__back.display {
  display: block;
}

The Front of the Card (optional)

This next part you can change to whatever you want. Since the following is all about the aesthetics of the front of the card I won’t explain it, but I will explain a little bit about the selectors used.

When I use something like .card__front > h2 this means that the ruleset that follows will only be applied to the <h2> tags where the parent is .card__front class. When using something like #input__form:hover this means that the ruleset will be applied when the user is hovering over the element with the id of #input__form. That :hover is a CSS pseudo class, just like .btn:active where the ruleset will be applied for selected links with a .btn class.

If you have any questions I do encourage you to comment down below and I will get back to you.

FYI: Selectors starting with # are ids and selectors starting with . are classes. Also, remember that ids are unique to one element.

HTML:

<!--       Front of the card -->
<div class="card__face card__front">
    <h2>Planck's Constant</h2>
    <form>
       <input 
               id="input__form"
               type="number" 
               step="0.00000001" 
               min="6" max="7" 
               placeholder="Enter Number" 
               required="required" />
       <button class="btn" type="submit">Validate</button>
    </form>
</div>

CSS:

.card__front {
  padding: 40px 20px;
}

.card__front > h2 {
  text-align: center;
  margin: 0;
  font-weight: 900;
  padding-bottom: 0.5em;
  color: white;
  text-shadow: -0.05rem -0.05rem 5px rgba(237, 43, 18, 1);
  font-size: 2rem; 
}

.card__front > form {
  margin-top: 25px;
}

.card__front > form input {   <!-- -same as-  #input__form { -->
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  background-color: #ddd;
  box-shadow: 0 0 5px 3px rgba(255,0,0,0.4);
  border-radius: 5px;
}

.card__front > form input:hover {    <!-- -same as-  #input__form:hover { -->
  background-color: #eee;
  box-shadow: 0 0 7px 5px rgba(255,0,0,0.4);
}

.btn {
  margin: 5px;
  padding: 10px;
  outline: 0;
  border: 1px solid rgba(0,0,0,0.1);
  background-color: transparent;
  box-shadow: 0 0 5px 3px rgba(255,0,0,0.4);
  color: white;
  border-radius: 10px;
}

.btn:hover {
  background-color: #000;
  box-shadow: 0 0 7px 5px rgba(255,0,0,0.4);
}

.btn:active {
  background-color: #333;
}

The result for the front of the card should look something like this:

The Back of the Card (optional)

Same as the previous section, I won’t explain the code below but if you have any questions feel free to comment down below and I will get back to you on that.

Do keep in mind that in this case, the 3 options we have for the back of the card have the same layout. I only changed the src of the image and the text of the button, but this doesn’t have to be the case. You can add an id to each face of the card and have completely different card layouts for each of them.

For example, I have a #card__back__one > p selector because I have a paragraph that I needed to style on #card__back__one that does not exist on #card__back__two nor on #card__back__three. Remember that each one is literally a completely different face so you can do with them what you want.

HTML:

<!--       Back of card__back__one if 6.62607015 -->
      <div id="card__back__one" class="card__face card__back">
        <img 
             class="image__back" 
             src="https://i.postimg.cc/BZpQPT4M/stranger-things-lights.jpg" 
             alt="Kareen Wheeler happy"/>
        <p>You Got It!</p>
        <button id="btn__back__one" class='btn btn__back'>Reset</button>
      </div>
<!--       Back of card__back__two if 6.62607004 -->
      <div id="card__back__two" class="card__face card__back">
        <img 
             class="image__back" 
             src="https://i.postimg.cc/hjrgxnWf/susie-constante-planck.jpg" 
             alt="Susie's Planck's Constant is 6.62607004."/>
        <button id="btn__back__two" class='btn btn__back'>Reset</button>
      </div> 
<!--       Back of card__back__three if default -->
      <div id="card__back__three" class="card__face card__back">
        <img 
             class="image__back" 
             src="https://i.postimg.cc/tTTkpd57/robin-stranger-things-you-suck.jpg" 
             alt="Robin thinks you suck."/>
        <button id="btn__back__three" class='btn btn__back'>Try Again</button>
      </div>

CSS:

.image__back {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 2px;
  box-shadow: 0 0 0 1px rgba(255,0,0,0.55);
  border-radius: 5px;
}

#card__back__one > p {
  color: #111;
  text-shadow: -0.05rem -0.05rem 5px rgba(237, 43, 18, 1);
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  margin-top: -50px;
}

.btn__back {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(10,10,10,0.8);
}

The result for the back of the card (in this case, of #card__back__three) should look something like this:

Extra Asethetic Features

I know there are certain things (like the Stranger Things logo) that I didn’t mention in this part, but I will be adding the codepen with the whole project on Part III so you can take a look at those bits that have nothing to do with the actual action of flipping the card in the next part of this series.

Remember to comment below if you have any questions or suggestions. In the next part of this series, we will be looking into the JavaScript of this project.

💻 article.close()

Resources

w3schools's How To - Flip Card
CSS Basics
selectors
CSS pseudo class
transform-style
transform-origin
transition
position: absolute
Stranger Things Logo
PostImages: Get permanent links for Facebook, Twitter, message boards and blogs.

DEV Community: Maria del Carmen Santiago

How to avoid infinite loops onIonChange.

Filtering Component using Vanilla JS and HTML Content Template Element.

TailWindCSS

HTML

JavaScript

Demo

The 3Gs of CSS3: Grid Edition

Grid

Guide

Games

GridGarden

GridCritters

CSS Diner

Generator

Bonus: Video Tutorials

The 3Gs of CSS3: FlexBox Edition

Flexbox

Guide

Games

Generator

Bonus: VS Code Extension

Exploring Github: Developer RoadMaps, Octocats, and more!

Learn to Code

kamranahmedse / developer-roadmap

Roadmap to becoming a web developer in 2020

Purpose of these Roadmaps

Trending

Front End Libraries and Frameworks

Social Impact

Events

Bonus

Hackathon

Presentations

Build your own Octocat!

In case you missed it... Github Profile Readme.

Speed up your Website: Tools and Tricks for Visual Media Files

Free Tools

Reduce File Size

Remove Background

Free Stock Photos and Videos

Placeholder

Train your brain

Links

HTML Tricks for Web Optimization

GIFs

Video

Images

Img || Picture || Figure

Performance

Top 10 Essential VS Code Extensions

1. Live Server

2. Live Share

3. Prettier

4. Rainbow Brackets

5. Peacock

6. GitLens

7. Code Spell Checker

8. REST Client

9. IntelliSense for CSS class names in HTML

10. Visual Studio IntelliCode

A Look into Processing MultiDimensional Arrays Using Javascript

The Challenge

Arrays

Accessing HTML Elements

Adding Elements to Multidimensional Arrays

Removing Elements from Multidimensional Arrays

Reduce Multidimensional Arrays

Next Station!

Submit Passenger Log

Demo

Resources

Multi-faced Flip Card with a Click (Bonus: Going further into 3D space)

Bonus: Going further into 3D space

Recap

.card__face

.card__front

.card__back

.card__content

.card__container

`.card__face`

`.card__front`

`.card__back`

`.card__content`

`.card__container`