Get Query String Parameters

For years we wrote gross regular expressions to get query string values but those days are gone — enter the amazing URLSearchParams API:

// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

Thank you for reading!

CSS-Tricks: Myth Busting: CSS Animations vs. JavaScript

Conclusion

Are CSS animations “bad”? Certainly not. In fact, they’re great for simple transitions between states (like rollovers) when compatibility with older browsers isn’t required. 3D transforms usually perform very well (iOS7 being a notable exception), and CSS animations can be very attractive for developers who prefer putting all of their animation and presentation logic in the CSS layer. However, JavaScript-based animation delivers far more flexibility, better workflow for complex animations and rich interactivity, and it often performs just as fast (or even faster) than CSS-based animation despite what you may have heard.

Myth Busting: CSS Animations vs. JavaScript

Thank you for reading!

Get Started with ECMAScript 6

Really good article on the new features of ES6

ECMAScript 6 or ES6 is the latest standardized version of JavaScript. The exciting thing is it’s been approved today by the standards body and that means broader browser support is coming. ECMAScript 6 has been in the works for some time now – it was first announced in 2008. An ever increasing amount of JavaScript developers have been preparing for ECMAScript’s launch, and soon it’ll be unavoidable. It’s also worth noting not all versions of ECMAScript will take this long to release. They plan on doing smaller, yearly releases, so now’s a good time to get up to speed.

Many developers have switched to ECMAScript 6 in development and use a transpiler, a ES6 source to ES5 source compiler, to publish their code to browsers and environments that don’t support ES6 features yet.

Get Started with ECMAScript 6

Thank you for reading!

The Best Explanation of JavaScript Reactivity

Interesting article on JavaScript Reactivity.

“Many front-end JavaScript frameworks (Ex. Angular, React, and Vue) have their own Reactivity engines. By understanding what reactivity is and how it works, you can improve your development skills and more effectively use JavaScript frameworks. In the video and the article below, we build the same sort of Reactivity you see in the Vue source code.”

Read more.
https://medium.com/vue-mastery/the-best-explanation-of-javascript-reactivity-fea6112dd80d

Thank you for reading!

Force browser to print background images

I was working on a page with coupons and the coupon had check boxes that the user could check and then print the page to take to the store. I had some trouble styling the checkboxes as the art director wanted the checkbox border to be red. That sounds simple, but I struggled for a little while, then decided to use JS and background images to make this work. It was a pretty easy solution, until I printed the page. By default, browsers do not print background images. There is not a straightforward solution for this, as it is meant to be in the control of the user. Well, I found what looks to be a good solution. Keep in mind that this probably doesn’t work in old browsers, but I will test soon.

As of now, it works in all current versions of the following browsers, at the time of this post (5-10-18):

IE, Edge, FireFox, Chrome, Safari, Opera

@media print {
.checkbox_checked:before {
content: url(images/check-mark.gif);
}
}

If you are interested in my solution to style the checkbox borders, I created a DIV and used a background image of a check mark. I used JavaScript (JQuery) to change the class when you click on the DIV. One class had the background image of the check mark, and the other did not. I just toggled between the two.

HTML
<span class="checkbox"></span> 

CSS
.checkbox {
	border: 2px solid #EC1D25; 
	width:15px; 
	height:15px;
	display:inline-block;	
	cursor:pointer;
}

.checkbox_not-checked {
	background-image:none;
}
.checkbox_checked {
	background-image:url(images/check-mark.gif);
}

JavaScript
	$(".checkbox").on("click", function() {
		if($(this).hasClass("checkbox_not-checked"))
			{ 
				$(this).removeClass("checkbox_not-checked");
				$(this).addClass("checkbox_checked");
				console.log('checked');
			}
		else if($(this).hasClass("checkbox_checked"))
			{
				$(this).removeClass("checkbox_checked");
				$(this).addClass("checkbox_not-checked");
				console.log('not checked');
			}
		else
			{
				$(this).addClass("checkbox_checked");
				console.log('checked');
			}
  });

Thank you for reading!