Tag: Snippets

10 Aug

Cookieless Alternative To Embed HTML, CSS And JS Code Snippets

by TBSCategories: News

When we implement websites today, we are confronted by a lot of things we need to take care of. Ideally, we want to have a fast, secure, accessible, and fair website. At the same time, we want to have an interactive website with comments, polls, videos, code examples, and many more.

Together with a friend, I launched a tech blog last year and we ran exactly into that issue. We wanted to have a simple solution to embedding HTML, CSS, and JavaScript code examples but existing solutions often include tracking, cookies, a ton of features or bad performance. After some research, we realized that we had to build an alternative.

Let’s have a look:

Indiepen is a privacy-friendly, lightweight, and accessible solution to embed code examples. In fact, we don’t set any cookies or tracking!

Get Started

Indiepen can preview every website that follows a very simple convention. You need to provide a website with the following file structure: 

. ├── index.html ├── main.js └── styles.css

Deploy the code example with your favorite hosting provider (e.g. GitHub Pages, Netlify, or Vercel) and copy the URL. After that, go to our start page and use the code snippet generator.

The generated code looks like this:

<iframe class="indiepen"   src="https://indiepen.tech/embed/?url=https%3A%2F%2Findiepen.tech%2Fexample%2F&tab=result"   style="width: 100%; overflow: hidden; display: block; border: 0;"   title="Indiepen Embed"   loading="lazy"   width="100%"   height="450"> </iframe>

You can now use the code snippet and integrate it on your website. That’s it! You should now see your code example with an editor to discover the code.

Under The Hood

It sounds a bit strange nowadays but we haven’t used any JavaScript framework like React or Vue.js. It’s pure HTML, CSS and JavaScript with some help from Lea Verou’s Prism.js for syntax highlighting. Those libraries are very helpful to implement and maintain complex web applications but in our case, we just have three files we need to fetch and pass onto Prism.js.

Additionally, we have three buttons in the upper right corner to switch between the HTML, CSS, and JavaScript views. By introducing a UI framework, we couldn’t deliver a lightweight solution with less than 20 kb in size. For us, it was good learning, that UI libraries are important in our day-to-day business but we should carefully consider them and don’t forget the good old vanilla JavaScript.

Final Words

Indiepen is our first open-source project and we are very excited to share our ideas with you. We would love to get feedback and have discussions about a fair web. Get in touch with me on Twitter or check out the project on GitHub.

Last but not least, I’d like to mention that Indiepen has a limited scope and we want to keep it simple by design. If you need to deal with more complex code examples, preprocessors for CSS or JavaScript, or you want to benefit from a platform to share your ideas, then please consider more sophisticated solutions like CodePen or JSFiddle.

Happy coding, everyone!

Articles on Smashing Magazine — For Web Designers And Developers

29 Jun

Creating Custom Emmet Snippets In VS Code

by TBSCategories: News

Earlier this year, I shared the HTML boilerplate I like to use when starting new web projects with line-by-line explanations on my blog. It’s a collection of mostly <head> tags and attributes I usually use on every website I build. Until recently, I would just copy and paste the boilerplate whenever I needed it, but I’ve decided to improve my workflow by adding it as a snippet to VS Code — the editor of my choice.

  • Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier and press “OK”.

    • That’s it. Now we’re ready to create snippets by adding properties to the html and css objects where the key is the name of the snippet and the value an abbreviation or a string.

    Some Of My Custom HTML Snippets

    Before we dive deep into snippet creation and I show you how I created a snippet for my HTML boilerplate, let’s warm up first with some small, but useful snippets I’ve created, as well.

    Lazy Loading

    Out of the box, there’s an img abbreviation, but there’s none for lazily loaded images. We can use the default abbreviation and just add the additional attributes and attribute values we need in square brackets.

    {   "html": {     "snippets": {       "img:l": "img[width height loading='lazy']"     }   } }

    img:l + Enter/Tab now creates the following markup:

    <img src="" alt="" width="" height="" loading="lazy">

    Page

    Most pages I create consist of <header>, <main> and <footer> landmarks and an <h1>. The custom page abbreviation lets me create that structure quickly.

    "snippets": {   "page": "header>h1^main+footer{$  {0:©}}" }

    page + Enter/Tab creates the following markup:

    <header>   <h1></h1> </header> <main></main> <footer>©</footer>

    That abbreviation is quite long, so let’s break it down into smaller bits.

    Breakdown

    Create an <header> element and a child <h1>.

    header>h1

    Move up, back to the level of the <header>, and create a <footer> that follows <main>.

    ^main+footer

    Set the final tab stop within the <footer> and set the default text to &copy.

    {$  {0:©}}

    Navigation

    The abbreviation nav just creates a <nav> start and end tag by default, but what I usually need is a <nav> with a nested <ul>, <li> elements and links ( <a>). If there are multiple <nav> elements on a page, they should also be labeled, for example by using aria-label.

    "nav": "nav[aria-label='$  {1:Main}']>ul>(li>a[aria-current='page']{$  {2:Current Page}})+(li*3>a{$  {0:Another Page}})"

    That looks wild, so let’s break it down again.

    Breakdown

    We start with a <nav> element with an aria-label attribute and a nested <ul>. $ {1:Main} populates the attribute with the text “Main” and creates a tab stop at the attribute value by moving the cursor to it and highlighting it upon creation.

    nav[aria-label='$  {1:Main}']>ul

    Then we create four list items with nested links. The first item is special because it marks the active page using aria-current="page". We create another tab stop and populate the link with the text “Current Page”.

    (li>a[aria-current='page']>{$  {2:Current Page}})

    Finally, we add three more list items with links and the link text “Another page”.

    (li*3>a>{$  {0:Another Page}})

    Before our adaptations, we got this:

    Now we get this:

    <-- After: nav + TAB/Enter -->  <nav aria-label="Main">   <ul>     <li><a href="" aria-current="page">Current Page</a></li>     <li><a href="">Another Page</a></li>     <li><a href="">Another Page</a></li>     <li><a href="">Another Page</a></li>   </ul> </nav>

    Style

    The default style abbreviation only creates the <style> start and end tag, but usually when I use the <style> element I do it because I quickly want to test or debug something.

    Let’s add some default rules to the <style> tag:

    "style": "style>{\* { box-sizing: border-box; \}}+{\n$  {1:*}:focus \{$  {2: outline: 2px solid red; }\} }+{\n$  {0}}"
    Breakdown

    Some characters (e.g. $ , *, { or }) have to be escaped using \.

    style>{\* { box-sizing: border-box; \}}

    \n creates a linebreak and $ {1:*} places the first tab stop at the selector *.

    {\n$  {1:*}:focus \{$  {2: outline: 2px solid red; }\}}
    • Before: <style><style>
    • After: 
      <style> * { box-sizing: border-box; }   *:focus { outline: 2px solid red; } </style>

    Alright, enough warming-up. Let’s create complex snippets. At first, I wanted to create a single snippet for my boilerplate, but I created three abbreviations that serve different needs.

    1. Small
    2. Medium
    3. Full

    Boilerplate Small

    This is a boilerplate for quick demos, it creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • <style> element,
    • A <h1>.
    {   "!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}]>(head>meta:utf+meta:vp+{}+title{$  {2:New document}}+{}+style)+body>(h1>{$  {3: New Document}})+{$  {0}}" }

    Breakdown

    A string with the doctype:

    {<!DOCTYPE html>}

    The <html> element with a lang attribute. The value of the lang attribute is a variable you can change in the VS code settings (Code → Preferences → Settings).

    html[lang=$  {1}$  {lang}]

    You can change the default natural language of the page by searching for “emmet variables” in VS Code settings and changing the lang variable. You can add your custom variables here, too.

    The <head> includes the charset meta tag, viewport meta tag, <title>, and <style> tag. {} creates a new line.

    (head>meta:utf+meta:vp+{}+title{$  {2:New document}}+{}+style)

    Let’s have a first quick look at what this gives us.

    <!DOCTYPE html> <html lang="en"> <head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>New document</title> </head> </html>

    Looks okay, but the meta:utf abbreviation creates the old way in HTML to define the charset and meta:vp creates two tab stops I don’t need because I never use a different setting for the viewport.

    Let’s overwrite these snippets before we move on.

    {   "meta:vp": "meta[name=viewport content='width=device-width, initial-scale=1']",   "meta:utf": "meta[charset=$  {charset}]" }

    Last but not least, the <body> element, an <h1> with default text, followed by the final tab stop.

    body>(h1>{$  {3: New Document}})+{$  {0}}

    The final boilerplate:

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1">    <title>New document</title>    <style>     * { box-sizing: border-box; }      *:focus { outline: 2px solid red; }      </style> </head> <body>   <h1> New Document</h1>  </body> </html>

    For me, that’s the perfect minimal debugging setup.

    Boilerplate Medium

    While I use the first boilerplate only for quick demos, the second boilerplate can be used for complex pages. The snippet creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • .no-js/.js classes,
    • External screen and print stylesheets,
    • description and theme-color meta tag,
    • Page structure.
    {   "!!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[name=\"description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+{<!-- TODO: Change page description --> }+meta[name=\"theme-color\"][content=\"$  {2:#FF00FF}\"])+body>page" }

    Yeaaah, I know, that looks like gibberish. Let’s dissect it.

    Breakdown

    The doctype and the root element are like in the first example, but with an additional no-js class and a comment that reminds me to change the lang attribute, if necessary.

    {<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{ }

    The TODO Highlight extension makes the comment really pop.

    The <head> includes the charset meta tag, viewport meta tag, <title>. {} creates a new line.

    (head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}

    A script with a line of JavaScript. I’m cutting the mustard at the JS module support. If a browser supports JavaScript modules, it means that it’s a browser that supports modern JavaScript (e.g. modules, ES 6 syntax, fetch, and so on). I ship most JS only to these browsers, and I use the js class in CSS, if the styling of a component is different, when JavaScript is active.

    (script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}

    Two <link> elements; the first links to the main stylesheet and the second to a print stylesheet.

    link:css+link:print+{}

    The page description:

    meta[name=\"description\"\][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+{ }

    The theme-color meta tag:

    meta[name=\"theme-color\"\][content=\"$  {2:#FF00FF}\"])

    The body element and the basic page structure:

    body>page

    The final boilerplate looks like this:

    <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute -->  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>🛑 Change me</title>    <script type="module">     document.documentElement.classList.replace('no-js', 'js');   </script>    <link rel="stylesheet" href="style.css">   <link rel="stylesheet" href="print.css" media="print">    <meta name="description" content="🛑 Change me (up to ~155 characters)">   <!-- TODO: Change page description -->    <meta name="theme-color" content="#FF00FF"> </head> <body>   <header>     <h1></h1>   </header>   <main></main>   <footer>©</footer> </body> </html>

    Full Boilerplate

    The full boilerplate is similar to the second boilerplate; the differences are additional meta tags and a script tag.

    The snippet creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • js/no-js classes,
    • External screen and print stylesheets,
    • description and open graph meta tags,
    • theme-color meta tag,
    • canonical <link> tag,
    • Favicon tags,
    • Page structure,
    • <script> tag.
    {   "!!!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[property=\"og:title\"][content=\"$  {1:🛑 Change me}\"]+meta[name=\"description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+meta[property=\"og:description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+meta[property=\"og:image\"][content=\"$  {1:https://}\"]+meta[property=\"og:locale\"][content=\"$  {1:en_GB}\"]+meta[property=\"og:type\"][content=\"$  {1:website}\"]+meta[name=\"twitter:card\"][content=\"$  {1:summary_large_image}\"]+meta[property=\"og:url\"][content=\"$  {1:https://}\"]+{<!-- TODO: Change social media stuff --> }+{}+link[rel=\"canonical\"][href=\"$  {1:https://}\"]+{<!-- TODO: Change canonical link --> }+{}+link[rel=\"icon\"][href=\"$  {1:/favicon.ico}\"]+link[rel=\"icon\"][href=\"$  {1:/favicon.svg}\"][type=\"image/svg+xml\"]+link[rel=\"apple-touch-icon\"][href=\"$  {1:/apple-touch-icon.png}\"]+link[rel=\"manifest\"][href=\"$  {1:/my.webmanifest}\"]+{}+meta[name=\"theme-color\"][content=\"$  {2:#FF00FF}\"])+body>page+{}+script:src[type=\"module\"]" }

    This incredibly long snippet creates this:

    <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute -->  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>🛑 Change me</title>    <script type="module">     document.documentElement.classList.replace('no-js', 'js');   </script>    <link rel="stylesheet" href="style.css">   <link rel="stylesheet" href="print.css" media="print">    <meta property="og:title" content="🛑 Change me">   <meta name="description" content="🛑 Change me (up to ~155 characters)">   <meta property="og:description" content="🛑 Change me (up to ~155 characters)">   <meta property="og:image" content="https://">   <meta property="og:locale" content="en_GB">   <meta property="og:type" content="website">   <meta name="twitter:card" content="summary_large_image">   <meta property="og:url" content="https://">   <!-- TODO: Change social media stuff -->     <link rel="canonical" href="https://">   <!-- TODO: Change canonical link -->     <link rel="icon" href="/favicon.ico">   <link rel="icon" href="/favicon.svg" type="image/svg+xml">   <link rel="apple-touch-icon" href="/apple-touch-icon.png">   <link rel="manifest" href="/my.webmanifest">    <meta name="theme-color" content="#FF00FF"> </head> <body>   <header>     <h1></h1>   </header>   <main></main>   <footer>©</footer>    <script src="" type="module"></script> </body> </html>

    Custom CSS Snippets

    For the sake of completeness, here are some of the CSS snippets I’m using.

    Debugging

    This snippet creates a 5px red outline with a custom offset.

    "debug": "outline: 5px solid red;\noutline-offset: -5px;"

    Centering

    A snippet that sets display to flex, and centers its child items.

    "center": "display: flex;\njustify-content: center;\nalign-items: center;"

    Sticky

    Sets the position property to sticky, with two tab stops at the top and left property.

    "sticky": "position: sticky;\ntop: $  {1:0};\nleft: $  {2:0};"

    User Snippets

    At the beginning of this article, I mentioned that VS Code also provides custom snippets. The difference to Emmet snippets is that you can’t use abbreviations, but you can also define tab stops and make use of internal variables.

    How to get the best out of user snippets could be a topic for another article, but here’s an example of a custom CSS snippet I’ve defined:

    "Visually hidden": { "prefix": "vh", "body": [   ".u-vh {",   "  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  border: 0;\n  padding: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  margin: -1px;",   "}" ], "description": "A utility class for screen reader accessible hiding." }

    This snippet doesn’t just create CSS rules, but a whole declaration block when we type vh and press Enter or Tab.

    .u-vh {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }

    Final Words

    It takes some time to create these snippets, but it’s worth the effort because you can customize Emmet to your personal preferences, automate repetitive tasks and save time in the long run.

    I’d love to see which snippets you use, so please share them with us in the comments. If you want to use my settings, you can find my final snippets.json on GitHub.

    Resources

    Articles on Smashing Magazine — For Web Designers And Developers

    28 Jun

    Creating Custom Emmet Snippets In VS Code

    by TBSCategories: News

    Earlier this year, I shared the HTML boilerplate I like to use when starting new web projects with line-by-line explanations on my blog. It’s a collection of mostly <head> tags and attributes I usually use on every website I build. Until recently, I would just copy and paste the boilerplate whenever I needed it, but I’ve decided to improve my workflow by adding it as a snippet to VS Code — the editor of my choice.

  • Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier and press “OK”.

    • That’s it. Now we’re ready to create snippets by adding properties to the html and css objects where the key is the name of the snippet and the value an abbreviation or a string.

    Some Of My Custom HTML Snippets

    Before we dive deep into snippet creation and I show you how I created a snippet for my HTML boilerplate, let’s warm up first with some small, but useful snippets I’ve created, as well.

    Lazy Loading

    Out of the box, there’s an img abbreviation, but there’s none for lazily loaded images. We can use the default abbreviation and just add the additional attributes and attribute values we need in square brackets.

    {   "html": {     "snippets": {       "img:l": "img[width height loading='lazy']"     }   } }

    img:l + Enter/Tab now creates the following markup:

    <img src="" alt="" width="" height="" loading="lazy">

    Page

    Most pages I create consist of <header>, <main> and <footer> landmarks and an <h1>. The custom page abbreviation lets me create that structure quickly.

    "snippets": {   "page": "header>h1^main+footer{$  {0:©}}" }

    page + Enter/Tab creates the following markup:

    <header>   <h1></h1> </header> <main></main> <footer>©</footer>

    That abbreviation is quite long, so let’s break it down into smaller bits.

    Breakdown

    Create an <header> element and a child <h1>.

    header>h1

    Move up, back to the level of the <header>, and create a <footer> that follows <main>.

    ^main+footer

    Set the final tab stop within the <footer> and set the default text to &copy.

    {$  {0:©}}

    Navigation

    The abbreviation nav just creates a <nav> start and end tag by default, but what I usually need is a <nav> with a nested <ul>, <li> elements and links ( <a>). If there are multiple <nav> elements on a page, they should also be labeled, for example by using aria-label.

    "nav": "nav[aria-label='$  {1:Main}']>ul>(li>a[aria-current='page']{$  {2:Current Page}})+(li*3>a{$  {0:Another Page}})"

    That looks wild, so let’s break it down again.

    Breakdown

    We start with a <nav> element with an aria-label attribute and a nested <ul>. $ {1:Main} populates the attribute with the text “Main” and creates a tab stop at the attribute value by moving the cursor to it and highlighting it upon creation.

    nav[aria-label='$  {1:Main}']>ul

    Then we create four list items with nested links. The first item is special because it marks the active page using aria-current="page". We create another tab stop and populate the link with the text “Current Page”.

    (li>a[aria-current='page']>{$  {2:Current Page}})

    Finally, we add three more list items with links and the link text “Another page”.

    (li*3>a>{$  {0:Another Page}})

    Before our adaptations, we got this:

    Now we get this:

    <-- After: nav + TAB/Enter -->  <nav aria-label="Main">   <ul>     <li><a href="" aria-current="page">Current Page</a></li>     <li><a href="">Another Page</a></li>     <li><a href="">Another Page</a></li>     <li><a href="">Another Page</a></li>   </ul> </nav>

    Style

    The default style abbreviation only creates the <style> start and end tag, but usually when I use the <style> element I do it because I quickly want to test or debug something.

    Let’s add some default rules to the <style> tag:

    "style": "style>{\* { box-sizing: border-box; \}}+{\n$  {1:*}:focus \{$  {2: outline: 2px solid red; }\} }+{\n$  {0}}"
    Breakdown

    Some characters (e.g. $ , *, { or }) have to be escaped using \.

    style>{\* { box-sizing: border-box; \}}

    \n creates a linebreak and $ {1:*} places the first tab stop at the selector *.

    {\n$  {1:*}:focus \{$  {2: outline: 2px solid red; }\}}
    • Before: <style><style>
    • After: 
      <style> * { box-sizing: border-box; }   *:focus { outline: 2px solid red; } </style>

    Alright, enough warming-up. Let’s create complex snippets. At first, I wanted to create a single snippet for my boilerplate, but I created three abbreviations that serve different needs.

    1. Small
    2. Medium
    3. Full

    Boilerplate Small

    This is a boilerplate for quick demos, it creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • <style> element,
    • A <h1>.
    {   "!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}]>(head>meta:utf+meta:vp+{}+title{$  {2:New document}}+{}+style)+body>(h1>{$  {3: New Document}})+{$  {0}}" }

    Breakdown

    A string with the doctype:

    {<!DOCTYPE html>}

    The <html> element with a lang attribute. The value of the lang attribute is a variable you can change in the VS code settings (Code → Preferences → Settings).

    html[lang=$  {1}$  {lang}]

    You can change the default natural language of the page by searching for “emmet variables” in VS Code settings and changing the lang variable. You can add your custom variables here, too.

    The <head> includes the charset meta tag, viewport meta tag, <title>, and <style> tag. {} creates a new line.

    (head>meta:utf+meta:vp+{}+title{$  {2:New document}}+{}+style)

    Let’s have a first quick look at what this gives us.

    <!DOCTYPE html> <html lang="en"> <head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>New document</title> </head> </html>

    Looks okay, but the meta:utf abbreviation creates the old way in HTML to define the charset and meta:vp creates two tab stops I don’t need because I never use a different setting for the viewport.

    Let’s overwrite these snippets before we move on.

    {   "meta:vp": "meta[name=viewport content='width=device-width, initial-scale=1']",   "meta:utf": "meta[charset=$  {charset}]" }

    Last but not least, the <body> element, an <h1> with default text, followed by the final tab stop.

    body>(h1>{$  {3: New Document}})+{$  {0}}

    The final boilerplate:

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1">    <title>New document</title>    <style>     * { box-sizing: border-box; }      *:focus { outline: 2px solid red; }      </style> </head> <body>   <h1> New Document</h1>  </body> </html>

    For me, that’s the perfect minimal debugging setup.

    Boilerplate Medium

    While I use the first boilerplate only for quick demos, the second boilerplate can be used for complex pages. The snippet creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • .no-js/.js classes,
    • External screen and print stylesheets,
    • description and theme-color meta tag,
    • Page structure.
    {   "!!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[name=\"description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+{<!-- TODO: Change page description --> }+meta[name=\"theme-color\"][content=\"$  {2:#FF00FF}\"])+body>page" }

    Yeaaah, I know, that looks like gibberish. Let’s dissect it.

    Breakdown

    The doctype and the root element are like in the first example, but with an additional no-js class and a comment that reminds me to change the lang attribute, if necessary.

    {<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{ }

    The TODO Highlight extension makes the comment really pop.

    The <head> includes the charset meta tag, viewport meta tag, <title>. {} creates a new line.

    (head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}

    A script with a line of JavaScript. I’m cutting the mustard at the JS module support. If a browser supports JavaScript modules, it means that it’s a browser that supports modern JavaScript (e.g. modules, ES 6 syntax, fetch, and so on). I ship most JS only to these browsers, and I use the js class in CSS, if the styling of a component is different, when JavaScript is active.

    (script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}

    Two <link> elements; the first links to the main stylesheet and the second to a print stylesheet.

    link:css+link:print+{}

    The page description:

    meta[name=\"description\"\][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+{ }

    The theme-color meta tag:

    meta[name=\"theme-color\"\][content=\"$  {2:#FF00FF}\"])

    The body element and the basic page structure:

    body>page

    The final boilerplate looks like this:

    <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute -->  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>🛑 Change me</title>    <script type="module">     document.documentElement.classList.replace('no-js', 'js');   </script>    <link rel="stylesheet" href="style.css">   <link rel="stylesheet" href="print.css" media="print">    <meta name="description" content="🛑 Change me (up to ~155 characters)">   <!-- TODO: Change page description -->    <meta name="theme-color" content="#FF00FF"> </head> <body>   <header>     <h1></h1>   </header>   <main></main>   <footer>©</footer> </body> </html>

    Full Boilerplate

    The full boilerplate is similar to the second boilerplate; the differences are additional meta tags and a script tag.

    The snippet creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • js/no-js classes,
    • External screen and print stylesheets,
    • description and open graph meta tags,
    • theme-color meta tag,
    • canonical <link> tag,
    • Favicon tags,
    • Page structure,
    • <script> tag.
    {   "!!!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[property=\"og:title\"][content=\"$  {1:🛑 Change me}\"]+meta[name=\"description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+meta[property=\"og:description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+meta[property=\"og:image\"][content=\"$  {1:https://}\"]+meta[property=\"og:locale\"][content=\"$  {1:en_GB}\"]+meta[property=\"og:type\"][content=\"$  {1:website}\"]+meta[name=\"twitter:card\"][content=\"$  {1:summary_large_image}\"]+meta[property=\"og:url\"][content=\"$  {1:https://}\"]+{<!-- TODO: Change social media stuff --> }+{}+link[rel=\"canonical\"][href=\"$  {1:https://}\"]+{<!-- TODO: Change canonical link --> }+{}+link[rel=\"icon\"][href=\"$  {1:/favicon.ico}\"]+link[rel=\"icon\"][href=\"$  {1:/favicon.svg}\"][type=\"image/svg+xml\"]+link[rel=\"apple-touch-icon\"][href=\"$  {1:/apple-touch-icon.png}\"]+link[rel=\"manifest\"][href=\"$  {1:/my.webmanifest}\"]+{}+meta[name=\"theme-color\"][content=\"$  {2:#FF00FF}\"])+body>page+{}+script:src[type=\"module\"]" }

    This incredibly long snippet creates this:

    <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute -->  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>🛑 Change me</title>    <script type="module">     document.documentElement.classList.replace('no-js', 'js');   </script>    <link rel="stylesheet" href="style.css">   <link rel="stylesheet" href="print.css" media="print">    <meta property="og:title" content="🛑 Change me">   <meta name="description" content="🛑 Change me (up to ~155 characters)">   <meta property="og:description" content="🛑 Change me (up to ~155 characters)">   <meta property="og:image" content="https://">   <meta property="og:locale" content="en_GB">   <meta property="og:type" content="website">   <meta name="twitter:card" content="summary_large_image">   <meta property="og:url" content="https://">   <!-- TODO: Change social media stuff -->     <link rel="canonical" href="https://">   <!-- TODO: Change canonical link -->     <link rel="icon" href="/favicon.ico">   <link rel="icon" href="/favicon.svg" type="image/svg+xml">   <link rel="apple-touch-icon" href="/apple-touch-icon.png">   <link rel="manifest" href="/my.webmanifest">    <meta name="theme-color" content="#FF00FF"> </head> <body>   <header>     <h1></h1>   </header>   <main></main>   <footer>©</footer>    <script src="" type="module"></script> </body> </html>

    Custom CSS Snippets

    For the sake of completeness, here are some of the CSS snippets I’m using.

    Debugging

    This snippet creates a 5px red outline with a custom offset.

    "debug": "outline: 5px solid red;\noutline-offset: -5px;"

    Centering

    A snippet that sets display to flex, and centers its child items.

    "center": "display: flex;\njustify-content: center;\nalign-items: center;"

    Sticky

    Sets the position property to sticky, with two tab stops at the top and left property.

    "sticky": "position: sticky;\ntop: $  {1:0};\nleft: $  {2:0};"

    User Snippets

    At the beginning of this article, I mentioned that VS Code also provides custom snippets. The difference to Emmet snippets is that you can’t use abbreviations, but you can also define tab stops and make use of internal variables.

    How to get the best out of user snippets could be a topic for another article, but here’s an example of a custom CSS snippet I’ve defined:

    "Visually hidden": { "prefix": "vh", "body": [   ".u-vh {",   "  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  border: 0;\n  padding: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  margin: -1px;",   "}" ], "description": "A utility class for screen reader accessible hiding." }

    This snippet doesn’t just create CSS rules, but a whole declaration block when we type vh and press Enter or Tab.

    .u-vh {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }

    Final Words

    It takes some time to create these snippets, but it’s worth the effort because you can customize Emmet to your personal preferences, automate repetitive tasks and save time in the long run.

    I’d love to see which snippets you use, so please share them with us in the comments. If you want to use my settings, you can find my final snippets.json on GitHub.

    Resources

    Articles on Smashing Magazine — For Web Designers And Developers

    28 Jun

    Creating Custom Emmet Snippets In VS Code

    by TBSCategories: News

    Earlier this year, I shared the HTML boilerplate I like to use when starting new web projects with line-by-line explanations on my blog. It’s a collection of mostly <head> tags and attributes I usually use on every website I build. Until recently, I would just copy and paste the boilerplate whenever I needed it, but I’ve decided to improve my workflow by adding it as a snippet to VS Code — the editor of my choice.

  • Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier and press “OK”.

    • That’s it. Now we’re ready to create snippets by adding properties to the html and css objects where the key is the name of the snippet and the value an abbreviation or a string.

    Some Of My Custom HTML Snippets

    Before we dive deep into snippet creation and I show you how I created a snippet for my HTML boilerplate, let’s warm up first with some small, but useful snippets I’ve created, as well.

    Lazy Loading

    Out of the box, there’s an img abbreviation, but there’s none for lazily loaded images. We can use the default abbreviation and just add the additional attributes and attribute values we need in square brackets.

    {   "html": {     "snippets": {       "img:l": "img[width height loading='lazy']"     }   } }

    img:l + Enter/Tab now creates the following markup:

    <img src="" alt="" width="" height="" loading="lazy">

    Page

    Most pages I create consist of <header>, <main> and <footer> landmarks and an <h1>. The custom page abbreviation lets me create that structure quickly.

    "snippets": {   "page": "header>h1^main+footer{$  {0:©}}" }

    page + Enter/Tab creates the following markup:

    <header>   <h1></h1> </header> <main></main> <footer>©</footer>

    That abbreviation is quite long, so let’s break it down into smaller bits.

    Breakdown

    Create an <header> element and a child <h1>.

    header>h1

    Move up, back to the level of the <header>, and create a <footer> that follows <main>.

    ^main+footer

    Set the final tab stop within the <footer> and set the default text to &copy.

    {$  {0:©}}

    Navigation

    The abbreviation nav just creates a <nav> start and end tag by default, but what I usually need is a <nav> with a nested <ul>, <li> elements and links ( <a>). If there are multiple <nav> elements on a page, they should also be labeled, for example by using aria-label.

    "nav": "nav[aria-label='$  {1:Main}']>ul>(li>a[aria-current='page']{$  {2:Current Page}})+(li*3>a{$  {0:Another Page}})"

    That looks wild, so let’s break it down again.

    Breakdown

    We start with a <nav> element with an aria-label attribute and a nested <ul>. $ {1:Main} populates the attribute with the text “Main” and creates a tab stop at the attribute value by moving the cursor to it and highlighting it upon creation.

    nav[aria-label='$  {1:Main}']>ul

    Then we create four list items with nested links. The first item is special because it marks the active page using aria-current="page". We create another tab stop and populate the link with the text “Current Page”.

    (li>a[aria-current='page']>{$  {2:Current Page}})

    Finally, we add three more list items with links and the link text “Another page”.

    (li*3>a>{$  {0:Another Page}})

    Before our adaptations, we got this:

    Now we get this:

    <-- After: nav + TAB/Enter -->  <nav aria-label="Main">   <ul>     <li><a href="" aria-current="page">Current Page</a></li>     <li><a href="">Another Page</a></li>     <li><a href="">Another Page</a></li>     <li><a href="">Another Page</a></li>   </ul> </nav>

    Style

    The default style abbreviation only creates the <style> start and end tag, but usually when I use the <style> element I do it because I quickly want to test or debug something.

    Let’s add some default rules to the <style> tag:

    "style": "style>{\* { box-sizing: border-box; \}}+{\n$  {1:*}:focus \{$  {2: outline: 2px solid red; }\} }+{\n$  {0}}"
    Breakdown

    Some characters (e.g. $ , *, { or }) have to be escaped using \.

    style>{\* { box-sizing: border-box; \}}

    \n creates a linebreak and $ {1:*} places the first tab stop at the selector *.

    {\n$  {1:*}:focus \{$  {2: outline: 2px solid red; }\}}
    • Before: <style><style>
    • After: 
      <style> * { box-sizing: border-box; }   *:focus { outline: 2px solid red; } </style>

    Alright, enough warming-up. Let’s create complex snippets. At first, I wanted to create a single snippet for my boilerplate, but I created three abbreviations that serve different needs.

    1. Small
    2. Medium
    3. Full

    Boilerplate Small

    This is a boilerplate for quick demos, it creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • <style> element,
    • A <h1>.
    {   "!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}]>(head>meta:utf+meta:vp+{}+title{$  {2:New document}}+{}+style)+body>(h1>{$  {3: New Document}})+{$  {0}}" }

    Breakdown

    A string with the doctype:

    {<!DOCTYPE html>}

    The <html> element with a lang attribute. The value of the lang attribute is a variable you can change in the VS code settings (Code → Preferences → Settings).

    html[lang=$  {1}$  {lang}]

    You can change the default natural language of the page by searching for “emmet variables” in VS Code settings and changing the lang variable. You can add your custom variables here, too.

    The <head> includes the charset meta tag, viewport meta tag, <title>, and <style> tag. {} creates a new line.

    (head>meta:utf+meta:vp+{}+title{$  {2:New document}}+{}+style)

    Let’s have a first quick look at what this gives us.

    <!DOCTYPE html> <html lang="en"> <head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>New document</title> </head> </html>

    Looks okay, but the meta:utf abbreviation creates the old way in HTML to define the charset and meta:vp creates two tab stops I don’t need because I never use a different setting for the viewport.

    Let’s overwrite these snippets before we move on.

    {   "meta:vp": "meta[name=viewport content='width=device-width, initial-scale=1']",   "meta:utf": "meta[charset=$  {charset}]" }

    Last but not least, the <body> element, an <h1> with default text, followed by the final tab stop.

    body>(h1>{$  {3: New Document}})+{$  {0}}

    The final boilerplate:

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1">    <title>New document</title>    <style>     * { box-sizing: border-box; }      *:focus { outline: 2px solid red; }      </style> </head> <body>   <h1> New Document</h1>  </body> </html>

    For me, that’s the perfect minimal debugging setup.

    Boilerplate Medium

    While I use the first boilerplate only for quick demos, the second boilerplate can be used for complex pages. The snippet creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • .no-js/.js classes,
    • External screen and print stylesheets,
    • description and theme-color meta tag,
    • Page structure.
    {   "!!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[name=\"description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+{<!-- TODO: Change page description --> }+meta[name=\"theme-color\"][content=\"$  {2:#FF00FF}\"])+body>page" }

    Yeaaah, I know, that looks like gibberish. Let’s dissect it.

    Breakdown

    The doctype and the root element are like in the first example, but with an additional no-js class and a comment that reminds me to change the lang attribute, if necessary.

    {<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{ }

    The TODO Highlight extension makes the comment really pop.

    The <head> includes the charset meta tag, viewport meta tag, <title>. {} creates a new line.

    (head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}

    A script with a line of JavaScript. I’m cutting the mustard at the JS module support. If a browser supports JavaScript modules, it means that it’s a browser that supports modern JavaScript (e.g. modules, ES 6 syntax, fetch, and so on). I ship most JS only to these browsers, and I use the js class in CSS, if the styling of a component is different, when JavaScript is active.

    (script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}

    Two <link> elements; the first links to the main stylesheet and the second to a print stylesheet.

    link:css+link:print+{}

    The page description:

    meta[name=\"description\"\][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+{ }

    The theme-color meta tag:

    meta[name=\"theme-color\"\][content=\"$  {2:#FF00FF}\"])

    The body element and the basic page structure:

    body>page

    The final boilerplate looks like this:

    <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute -->  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>🛑 Change me</title>    <script type="module">     document.documentElement.classList.replace('no-js', 'js');   </script>    <link rel="stylesheet" href="style.css">   <link rel="stylesheet" href="print.css" media="print">    <meta name="description" content="🛑 Change me (up to ~155 characters)">   <!-- TODO: Change page description -->    <meta name="theme-color" content="#FF00FF"> </head> <body>   <header>     <h1></h1>   </header>   <main></main>   <footer>©</footer> </body> </html>

    Full Boilerplate

    The full boilerplate is similar to the second boilerplate; the differences are additional meta tags and a script tag.

    The snippet creates the following:

    • Basic site structure,
    • viewport meta tag,
    • Page title,
    • js/no-js classes,
    • External screen and print stylesheets,
    • description and open graph meta tags,
    • theme-color meta tag,
    • canonical <link> tag,
    • Favicon tags,
    • Page structure,
    • <script> tag.
    {   "!!!": "{<!DOCTYPE html>}+html[lang=$  {1}$  {lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{$  {1:🛑 Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[property=\"og:title\"][content=\"$  {1:🛑 Change me}\"]+meta[name=\"description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+meta[property=\"og:description\"][content=\"$  {2:🛑 Change me (up to ~155 characters)}\"]+meta[property=\"og:image\"][content=\"$  {1:https://}\"]+meta[property=\"og:locale\"][content=\"$  {1:en_GB}\"]+meta[property=\"og:type\"][content=\"$  {1:website}\"]+meta[name=\"twitter:card\"][content=\"$  {1:summary_large_image}\"]+meta[property=\"og:url\"][content=\"$  {1:https://}\"]+{<!-- TODO: Change social media stuff --> }+{}+link[rel=\"canonical\"][href=\"$  {1:https://}\"]+{<!-- TODO: Change canonical link --> }+{}+link[rel=\"icon\"][href=\"$  {1:/favicon.ico}\"]+link[rel=\"icon\"][href=\"$  {1:/favicon.svg}\"][type=\"image/svg+xml\"]+link[rel=\"apple-touch-icon\"][href=\"$  {1:/apple-touch-icon.png}\"]+link[rel=\"manifest\"][href=\"$  {1:/my.webmanifest}\"]+{}+meta[name=\"theme-color\"][content=\"$  {2:#FF00FF}\"])+body>page+{}+script:src[type=\"module\"]" }

    This incredibly long snippet creates this:

    <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute -->  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>🛑 Change me</title>    <script type="module">     document.documentElement.classList.replace('no-js', 'js');   </script>    <link rel="stylesheet" href="style.css">   <link rel="stylesheet" href="print.css" media="print">    <meta property="og:title" content="🛑 Change me">   <meta name="description" content="🛑 Change me (up to ~155 characters)">   <meta property="og:description" content="🛑 Change me (up to ~155 characters)">   <meta property="og:image" content="https://">   <meta property="og:locale" content="en_GB">   <meta property="og:type" content="website">   <meta name="twitter:card" content="summary_large_image">   <meta property="og:url" content="https://">   <!-- TODO: Change social media stuff -->     <link rel="canonical" href="https://">   <!-- TODO: Change canonical link -->     <link rel="icon" href="/favicon.ico">   <link rel="icon" href="/favicon.svg" type="image/svg+xml">   <link rel="apple-touch-icon" href="/apple-touch-icon.png">   <link rel="manifest" href="/my.webmanifest">    <meta name="theme-color" content="#FF00FF"> </head> <body>   <header>     <h1></h1>   </header>   <main></main>   <footer>©</footer>    <script src="" type="module"></script> </body> </html>

    Custom CSS Snippets

    For the sake of completeness, here are some of the CSS snippets I’m using.

    Debugging

    This snippet creates a 5px red outline with a custom offset.

    "debug": "outline: 5px solid red;\noutline-offset: -5px;"

    Centering

    A snippet that sets display to flex, and centers its child items.

    "center": "display: flex;\njustify-content: center;\nalign-items: center;"

    Sticky

    Sets the position property to sticky, with two tab stops at the top and left property.

    "sticky": "position: sticky;\ntop: $  {1:0};\nleft: $  {2:0};"

    User Snippets

    At the beginning of this article, I mentioned that VS Code also provides custom snippets. The difference to Emmet snippets is that you can’t use abbreviations, but you can also define tab stops and make use of internal variables.

    How to get the best out of user snippets could be a topic for another article, but here’s an example of a custom CSS snippet I’ve defined:

    "Visually hidden": { "prefix": "vh", "body": [   ".u-vh {",   "  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  border: 0;\n  padding: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  margin: -1px;",   "}" ], "description": "A utility class for screen reader accessible hiding." }

    This snippet doesn’t just create CSS rules, but a whole declaration block when we type vh and press Enter or Tab.

    .u-vh {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }

    Final Words

    It takes some time to create these snippets, but it’s worth the effort because you can customize Emmet to your personal preferences, automate repetitive tasks and save time in the long run.

    I’d love to see which snippets you use, so please share them with us in the comments. If you want to use my settings, you can find my final snippets.json on GitHub.

    Resources

    Articles on Smashing Magazine — For Web Designers And Developers

    1-vanilla-javascript-code-snippets
    05 Apr

    Vanilla JavaScript Code Snippets

    by TBSCategories: News

    Every now and again we have to deal with legacy code, wading through dark and eerie sides of the code base, often with a vague, ambiguous and unsettling documentation — if any is provided at all. In such cases, refactoring the component seems inevitable.

    Or perhaps you need to manage dates and arrays, or manipulate DOM — there is just no need to add an external dependency for a simple task of that kind, but we need to figure out the best way to do that. It’s always a good idea to explore lightweight vanilla JavaScript snippets as well — preferably the ones that don’t have any third-party dependencies. Fortunately, there is no shortage in tooling to do just that.

    30 Seconds Of Code

    30 Seconds of Code features a huge repository of short code snippets for JavaScript, including helpers for dealing with primitives, arrays and objects, as well as algorithms, DOM manipulation functions and Node.js utilities. You can also find plenty of small utilities for Python, React Hooks, React Components and Node.js. It also features useful JavaScript cheatsheets.

    HTML Dom

    HTML Dom provides over 120 bulletproof, plain JavaScript snippets for everything from toggling password visibility to creating resizable split views — all supported for modern browsers and IE11+.

    Vanilla JavaScript Toolkit

    Vanilla JavaScript Toolkit provides a growing collection of vanilla JavaScript methods, helper functions, plugins, boilerplates, polyfills, and learning resources. Also, Chris Ferdinandi runs a Vanilla JS Academy, with plenty of daily developer tips on Vanilla JS sent in his newsletter.

    Micro-Libraries Under 5K

    Micro.js is a curated repository of small JavaScript libraries and utilities, collected by Thomas Fuchs. All libraries are grouped, and are below 5k in size, doing one thing and one thing only — and doin it well.

    Single Line Of Code

    Phuoc Nguyen has released Single-Line-Of-Code, a repository of JavaScript utilities for everything around arrays, date and time, DOM manipulations, functions, numbers and objects.

    Vanilla JS Code Challenge

    30 Days Vanilla JS Code Challenge is a free video course by Wes Bos where you’ll learn to build 30 things in 30 days, with 30 tutorials — without any frameworks, compilers, libraries or boilerplates. That’s a great way to boost your JavaScript skills. You can also get all 30 days challenges and solutions as a GitHub repo.

    Vanilla JavaScript video crash course is another free video course with 43 sessions, starting out with JavaScript DOM all the way to async JS, Babel and Webpack and a JavaScript password generator.

    Migrating from jQuery to Vanilla JavaScript

    If you still find yourself in the land of legacy systems running on jQuery, there is a number of resources that allow you to slowly move away from jQuery with more lightweight and standardized options:

    • PlainJS, You Might Not Need jQuery and You Don’t Need jQuery are great references for vanilla JavaScript snippets. The sites feature repositories of code snippets for everything from UI and inputs to media, navigation and visual effects (with use cases not just for jQuery, but pretty much any legacy code).
    • Learn Vanilla JS features books, courses, evergreen resources, communities, podcasts all around vanilla JS. A fantastic repository that’s worth keeping close.
    • JavaScript Framework Diet is Sebastian De Deyne’s ongoing series on common tasks, solved without JavaScript frameworks. You’ll learn about selecting element, event delegation, file structure, dropdowns and enter and leave transitions.

    Natively Format JavaScript Dates And Times

    Do we still need libraries like Moment.js or date-fns to format JavaScript dates and times? With native browser capabilities being quite good these days and browser support being great, too, not necessarily, as Elijah Manor points out.

    Elijah summarized three different methods for dealing with time and dates. The toLocaleDateString method comes in handy when you want a date that contains only numbers, a long wordy date, or one that outputs in a different language. If you only need to output the time portion of a JavaScript date object, there’s toLocaleTimeString.

    Finally, the generic method toLocaleString lets you pass one or all of the options from the former ones into one method. Elijah built a CodeSandbox playground where you can experiment with the different approaches.

    this vs. that

    The deep knowledge of a subject really lies in understanding subtle differences between alternate ways of solving the same problem. How is nodeName different from tagName? How are the two increment operators different, e.g. ++value and value++? this vs. that is a friendly reference site for sorting out just this kind of questions.

    The growing little repository by Phuoc Nguyen explains differences between properties and functions for JavaScript and TypeScript, as well as DOM, HTML and CSS. Also, WTF.js is a growing repository of common headaches, gotchas and unexpected behaviors around JavaScript.

    Writing Clean, Reusable Code

    No one likes to deal with badly written code, but in reality it happens all too often. To help us do better, Ryan McDermott adapted the software engineering principles from Robert C. Martin’s book Clean Code for JavaScript. The result is a practical guide to producing readable, reusable, and refactorable software in JavaScript.

    From making variables meaningful and explanatory to limiting the amount of functions and dealing with error handling, the guide compares good and bad code examples. Of course, not every principle has to be strictly followed, but the guidelines help you assess the quality of the JavaScript code you and your team produce.

    JavaScript The Right Way

    Learning a new language can be quite a challenge, especially when there are so many tools and frameworks out there to get the most out of it as there are in the case of JavaScript. To prevent you from getting lost in all the possibilities and help you learn the best practices from the ground up instead, William Oliveira and Allan Esquina put together the guide “JavaScript The Right Way”.

    Aimed at both beginners and experienced developers who want to dive deeper into JavaScript best practices, the guide gathers articles, tips, and tricks from top developers, covering everything from the very basics to code style, tools, frameworks, game engines, reading resources, screencasts, and much more to make a developer’s life easier. The guide is available in eight languages. A gold mine full of JavaScript wisdom.

    And if you need another deep dive into JavaScript, Kyle Simpson’s You Don’t Know JS is always a good starting point (Kyle is working on the second edition at the moment, and also has plenty of books and video courses to explore).

    Picking The Right JavaScript Framework

    There are plenty of options when choosing a new JavaScript framework. But do you need one? And if so, how do you pick the right one? Sacha Greif’s 12-Points-Checklist highlights 12 things to keep in mind when evaluating any new JavaScript library. Most notably, features, performance, learning curve, compatibility and track record.

    Perf-Track tracks framework performance at scale. It basically tracks the performance in terms of Core Web Vitals for Angular, React, Vue, Polymer, Preact, Ember, Svelte and AMP — on mobile and on desktop. The data set is currently still from 2020, but it gives us some insights into how well sites with these frameworks perform in the wild. For example, React with Gatsby perform better than the ones created with Create React app.

    Tim Kadlec also conducted some research around that, comparing jQuery, Vue.js, Angular and React. The end result: the current crop of frameworks isn’t doing enough to prioritize less powerful devices and help to close the gap between desktop and mobile. These figures might give you at least some context to make a more informed decision.

    Standalone Vanilla JS Libraries

    The libraries below are tiny, vanilla JavaScript libraries without any dependencies. Just as they are lightweight, sometimes you might need to make some adjustments, e.g. to provide announcements to screen readers, or support legacy browsers. You might want to check a Complete Guide To Accessible Front-End Components as well.

    • 360-degree view
      ThreeSixty.js is a tool for turning an image sprite into 360 degree image.
    • Animation
      Anime.js is a lightweight animation library that works with CSS properties, SVG, Dom attributes and JavaScript objects. Also, Sal.js is a lightweight scroll animation library.
    • Data Visualization
      Clusterize.js is a small JavaScript library for displaying large data sets.
    • Filtering
      MixItUp 3 provides animated filtering, sorting, insertion and removal.
    • Forms
      Choices.js is a configurable <select>-box/text input plugin.
    • Image full screen preview
      Intense Image Viewer, a library for viewing images in full screen.
    • Image gallery
      PhotoSwipe, supports touch gestures and Browser History API.
    • Masonry Layout
      Columns.js and Waterfall.js are options for Masonry layout written in Vanilla JavaScript.
    • Media Player
      Media Player, a cross browser, accessible, customizable media player written in plain JavaScript.
    • Modals
      accessible_modal_window by Scott O’Hara.
    • Parallax
      Rellax.js is a lightweight vanilla JavaScript parallax library (if you absolutely need one).
    • Reactive states
      Reef, a lightweight library for creating reactive, state-based UI.
    • Search
      InstantSearch.js is an an open-source UI library that lets you build a search interface in your front-end application.
    • Sliders and carousels
      Siema, Glide, Splide.js and Swipe.js.
    • Slideout navigation
      Slideout.js is a touch slideout navigation menu for mobile views.
    • Spinners
      Spin.js dynamically creates spinning activity indicators, no images or dependencies needed, distributed as a native ES module.
    • Sticky elements
      HC-Sticky makes any element on the page visible while a custom is scrolling. (Also consider using position="sticky" in CSS instead).
    • Sticky navigation
      MenuSpy, a small JavaScript for sticky navigation bars that change as a user scrolls pas the parts of the page.
    • Table filters and lists
      List.js adds search, sort and filters to plain HTML lists and tables.
    • Table sorting
      Tablesort is a simple sorting component for tables.
    • Transitions
      Barba.js is a great alternative to parallax, with fluid and smooth transitions between pages.
    • Tilting
      Tilt-Vanilla.js is a smooth 3D tilt JavaScript library.
    • Typewriter Text Effect
      Typewriter JS generates a typewriter effect.
    • Visual sparkles
      Speckle.js is a JavaScript module that adds responsive, stylized speckles to any element.
    • WYSIWIG Text Editors
      Froala, Etherpad and SunEditor are vanilla JavaScript WYSIWIG text editors. And if you want to build your own, ContentTools is a library for building WYSIWIG editors for HTML content.

    Articles on Smashing Magazine — For Web Designers And Developers

    Newer postsOlder posts
    ×

    Powered by WhatsApp Chat

    WhatsApp Chat is free, download and try it now here!

    × Chat with Us