CategoryJavaScript

February 13, 2018 — Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery — with no build step necessary? Let’s cover some common use cases in jQuery and how we can switch them over to Vue, and why we’d even want to do so. In this article Sarah Drasner shows you that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Due to Vue’s flexibility, it’s also easy to transition this code to a build step and component structures if you’d like to adopt a more complex structure over time. It’s actually pretty fun to try it out! Read more…

February 1, 2018 — JavaScript is essential to any advanced web app, so a strong debugger is a key part of the toolset. In this article, Dustin Driver and Jason Laster find out how the new Firefox JavaScript debugger can help you write fast, bug-free code. They will crack open a very simple to-do app with Debugger divided into three panes: the source list pane, the source pane, and the tool pane.. Here’s how it works! Read more…

January 31, 2018 — GraphQL’s features are not a revolution, but what makes GraphQL powerful is that the level of polish, integration, and ease-of-use make it more than the sum of its parts. Many of the things GraphQL accomplishes can, with effort and discipline, be achieved using REST or RPC, but GraphQL brings state of the art APIs to the enormous number of projects that may not have the time, resources or tools to do this themselves. In this article, Eric Baer focuses almost entirely on why GraphQL exists and the problems it solves. Read more…

January 30, 2018 — Manually clicking through different browsers as they run your development code, either locally or remotely, is a quick way to validate that code. However, it’s not a solution for testing the full breadth of your site’s code base on the assortment of browsers and device types available to your customers. That’s where automated testing really comes into its own. In this article, Jason McConnell provides an overview of the concepts, technologies and coding techniques involved with running test scripts against browsers automatically using WebDriverJS on Windows 10 and Microsoft Edge. Read more…

January 30, 2018 — One of the toughest challenges Harris Schneiderman came across is the reorderable drag-and-drop list. While a reorderable list is a somewhat commonly used widget with intuitive conventions for mouse users, it’s not clear how keyboard-only assistive technology users can perform this simple task. Dragon Drop seeks to fill this gap by providing means for all users to perform this somewhat common task. Due to the absence of supported ARIA attributes, Dragon Drop utilizes live regions to convey the information needed for all users to reorder a list. Read more…

January 24, 2018 — Rather than exploring features first, it is helpful to put them into context and to understand how they came to exist. In this series, Eric Baer wants to introduce you to GraphQL. By the end, you should understand what it is and also its origins, its drawbacks and the basics of how to work with it. Today, Eric will go over how and why we have arrived at GraphQL by looking at the lessons learned from the last 60 years of API development, from RPC to now. Read more…

January 22, 2018 — Intersection information is needed for many reasons, such as lazy loading of images. But there’s so much more. It’s time to get a better understanding and different perspectives on the Intersection Observer API. In this article, Denys Mishunov is going to go out of the scroll darkness and talk about the modern way of lazy-loading resources. Not just lazy-loading images, but loading any asset for that matter. And the technique he is going to talk about today is capable of much more than just lazy-loading assets. Ready? Read more…

January 18, 2018 — In part two of this two-part series, Brian Holt explains why large refactors are easy by using the Elm Compiler, how to handle side-effects, and how to work with JavaScript. He’ll work through large refactors by relying on the Elm compiler, and set up recurring events that interact with JavaScript to trigger drum samples. Elm has been the most invigorating language Brian has worked in lately. Using the Elm Architecture helps you focus on what matters to your users. Read more…

January 17, 2018 — Everything you need to know about REST APIs, from start to finish. How and why to use REST APIs, how to deal with headers, error messages and API versions. In this article, Zell Liew will show you everything you need to know about REST APIs to be able to read API documentations and use them effectively. In addition, you will also learn how to authenticate your requests with the -u option, and what HTTP statuses mean. Let’s get started! Read more…

January 15, 2018 — File selection inputs are difficult to style the way developers want to, so many simply hide it and create a button that opens the file selection dialog instead. Nowadays, though, there is an even fancier way of handling file selection: drag and drop. In this article, Joseph Zimmerman will be using “vanilla” ES2015+ JavaScript (no frameworks or libraries) to complete this project, and it is assumed you have a working knowledge of JavaScript in the browser. This example should be compatible with every evergreen browser plus IE 10 and 11. Read more…