Effective Laziness – Web Dev – Miko Sramek Developer Logs

Writing repetitive code is usually not very much fun. So finding the best way to cut this down can be a huge time-saver and thankfully vsCode- and other IDEs – have major saving graces called Snippets.

If you want to skip reading all of this, you can just checkout some of my snippets here!

Snippets and Emmet!

Visual Studios Code already comes with a bunch of handy shortcuts that speedup project setup, and make creating the boilerplate for a website come to mere seconds.

In comes the amazing: !
This sets up the basic HTML5 structure, and even includes the proper meta tag enabling responsive design.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Now that’s what I call fast.

Likewise, we can use emmet to speed up typing boilerplate code we know we’re going to write. For example, writing:

header>div.wrapper>h1+nav>ul>li*5>a

will let you create the simple header structure of:

<header>
  <div class="wrapper">
    <h1></h1>
    <nav>
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </nav>
  </div>
</header>

These are great, but they’re also just the tip of the iceberg. As I’ve been writing more and more code, I keep noticing code that I need to re-write every project, sometimes multiple times per project.

So, I’ll quickly just cover what snippets I’ve used in many different projects.

Commenting

"Create Start Of Div Comment": {
	"prefix": "s-o-d",
	"body": "<!-- Start of $1 Div -->",
	"description": "Create a Comment"
},
"Create End Of Div Comment": {
	"prefix": "e-o-d",
	"body": "<!-- End of $1 Div -->",
	"description": "Create a Comment"
}

"Create an HTML reminder comment": {
	"prefix": "reminder",
	"body": "<!-- !!!! TO DO: $1 !!!! -->",
	"description": "Create a comment that will shout at you to do something",
	"scope": "html"
},
"Create a CSS reminder comment": {
	"prefix": "reminder",
	"body": "/* !!!! TO DO: $1 !!!! */",
	"description": "Create a comment that will shout at you to do something",
	"scope": "css,scss"
}

One thing to note here, is that snippets in a custom .code-snippets file can contain the “scope” parameter. This restricts the snippet to only be recognized in those file types. Super handy if you need it in multiple file types.

React

React has some fairly intense boilerplate code that needs to be written. So to shortcut that, snippets are great.

"React Axios": {
	"prefix": "r-axios",
	"body": [
		"axios({",
		"\tmethod: 'GET',",
		"\turl: '',",
		"\tdataResponse: 'json',",
		"\tparams: {",
		"\t\tkey:'',",
		"\t}",
		"}).then( (result) => {",
		"\t",
		"}).catch( (error) => {",
		"\t",
		"});"
	],
	"description": "React axios call",
	"scope": "javascriptreact, javascript"
},
"React Class": {
	"prefix": "r-class",
	"body": [
		"class $1 extends React.Component {",
		"\tconstructor() {",
		"\t\tsuper();",
		"\t\tconsole.trace(`This has an unused constructor!`);",
		"\t}",
		"\tcomponentDidMount() {",
		"\t\t",
		"\t}",
		"\trender() {",
		"\t\treturn(",
		"\t\t\t<>",
		"\t\t\t\t",
		"\t\t\t</>",
		"\t\t);",
		"\t}",
		"};",
		"",
		"export default $2;"
	],
	"description": "Create a react class with the basic lifecycle methods",
	"scope": "javascriptreact, javascript"
},
"React Ternary": {
	"prefix": "r-?:",
	"body": [
		"{ ",
		"\t$1",
		"\t\t? $2",
		"\t\t: $3",
		"}"
	],
	"description": "Create a ternary thingamajig",
	"scope": "javascriptreact, javascript"
},
"React Map": {
	"prefix": "r-map",
	"body": [
		"{", 
		"\t$1.map( (item) => {",
		"\t\treturn <div>{item}</div>",
		"\t})",
		"}"
	],
	"description": "Create a map for react",
	"scope": "javascriptreact, javascript"
},
"React Import": {
	"prefix": "import-react-component",
	"body": "import React from 'react';",
	"description": "The important import statement",
	"scope": "javascriptreact, javascript"
}

Font-Awesome

Font awesome is an amazing resource, and it’s great for quick icons. So why not make that even faster? We just need the base kit CDN, and then can freely link other icons. I’ve added a bunch if icons that I regularly use, so it’s quite a big file now.

"Font Awesome Kit" : {
	"prefix": "font-awesome-kit",
	"body": "<script src='<your-kit-link>' crossorigin='anonymous'></script>",
	"description": "Font awesome icon for ",
	"scope": "html"
}

And then just have your icon snippets:

"Square Icon" : {
	"prefix": "font-awesome-square",
	"body": "<i class='far fa-square'></i>",
	"description": "Font awesome icon for a square",
	"scope": "html, javascriptreact, javascript"
},
"Check Square Icon" : {
	"prefix": "font-awesome-square-check",
	"body": "<i class='far fa-check-square'></i>",
	"description": "Font awesome icon for a checked square",
	"scope": "html, javascriptreact, javascript"
}

And I like having a blank template at the bottom of my snippet file, to easily add more icons:

" Icon" : {
	"prefix": "font-awesome-",
	"body": "<i class='fa$1 fa-$2'></i>",
	"description": "Font awesome icon for ",
	"scope": "html, javascriptreact, javascript"
}

One of the especially nice things about snippets, is that you don’t even need to write out the whole thing! You just need to write out the starting letters of each word, so for a square – “fasq” and for a square with a check – “fasqc.”

Snippets are powerful because you can customize them to be however you want! They can be simple, they can be complex, they can save a couple words. But that all adds up, and personally I’d rather thinking about what to type, rather than typing it!