Thursday, April 18

Author: Samuel Oloruntoba

CSS Tricks

Building “Renderless” Vue Components

There's this popular analogy of Vue that goes like this: Vue is what you get when React and Angular come together and make a baby. I've always shared this feeling. With Vue’s small learning curve, it's no wonder so many people love it. Since Vue tries to give the developer power over components and their implementation as much as it possibly can, this sentiment has led to today's topic. The term renderless components refers to components that don’t render anything. In this article, we'll cover how Vue handles the rendering of a component. We'll also see how we can use the render() function to build renderless components. You may want to know a little about Vue to get the most out of this article. If you are a newbie Sarah Drasner's got your back. The official documentation is also a very ...
Web Tricks

Build Native Modals Using the Dialog Element

With release of HTML 5.2 comes the dialog element. The dialog element has been around for a while now but was an experimental technology. Previously, if we wanted to build a modal or a dialog box of any sort, we needed to arrange our markup in a way where we have a backdrop, a close button, keep events trapped within the dialog, find a way to pass message out of the dialog... It was really complicated. The dialog element solves all the problems above and more. Heads up: I'm going to interchange between modal and dialog a lot. Quick comparison between bootstrap modal and the new dialog element <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <d...