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

Posted in Animation, CSS3, JavsScript | Tagged , , , , , | Comments Off on CSS-Tricks: Myth Busting: CSS Animations vs. JavaScript

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

Posted in JavsScript | Tagged , , , , | Comments Off on Get Started with ECMAScript 6

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

Posted in Angular, JavsScript | Tagged , , | Comments Off on The Best Explanation of JavaScript Reactivity

Boost Your CSS Animation Performance with the Repaintless.css Library

The FLIP technique

  • Only animate transforms (translate, rotate, scale) and opacity.
  • It’s best to animate absolutely positioned elements

https://blog.lunarlogic.io/2016/boost-your-css-animation-performance-with-repaintless-css/

Posted in Animation, CSS3 | Tagged , , , , , | Comments Off on Boost Your CSS Animation Performance with the Repaintless.css Library

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');
			}
  });
Posted in CSS3, HTML/CSS, JavsScript, jQuery | Tagged , , , | Comments Off on Force browser to print background images