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…
Writing in a new language requires time and practice. Front-end developer Brian Holt guides readers through building a drum sequencer in Elm. In part one of this two-part series, he’ll walk through the foundational concepts in Elm, i.e. getting started, using types, rendering views, and updating state. You will learn how to work with the Elm architecture in order to create simple applications.
Read more…
Why is Visual Studio Code (VS Code) so popular, and do we really need another text editor? In this article, we’ll take a look at how VS Code extends traditional text editor concepts and opens up entirely new avenues of productivity for developers. These are all the best things about VS Code that nobody ever bothered to tell you.
Read more…
The UI development became difficult in the last couple of years. That is because we pushed the state management to the browser. And managing state is what makes our job a challenge. If we do it properly, we will see how our application scales easily with no bugs. In this article, Krasimir Tsonev will see how to use the state machine concept for solving state management problems.
Read more…
Once web apps function like native apps, the design interactions would also change to address the use case — namely, the ubiquity of animations. As web developers, we need a good foundation to create animations that are both performant and maintainable, which is paramount to the native web app landscape. In this article Christopher Ng will show you how to go from After Effects to CSS transitions, animations and keyframes.
Read more…
Most potential users will want to try out the software or service before committing any time and money. Often this is where the age-old demo account comes into play. However, anyone who has ever implemented a demo account can attest to the problems associated. In this article, James Pierce brings you a solution: SQLite. It’s commonly known that SQLite does not handle multiple threads since the entire database is locked during a write command, which is one of the reasons why you should not use it in a normal production environment. However, in his solution, a separate SQLite file is used for each user demoing the software.
Read more…
In this tutorial, Joseph Zimmerman aims to help you understand how v-model works on native inputs and on custom components by default. Also, you’ll learn how to create custom checkboxes and radios that emulate how v-model works on them natively.
Read more…
For every application Yury Dymov works on, he needs to decide how to manage the data. The problem can be broken down into the following three subproblems: Fetch data from the back end, store it somewhere locally in the front-end application, retrieve the data from the local store and format it as required by the particular view or screen. In this article, Yury sums up his experience with consuming data from JSON, the JSON API and GraphQL back ends, and it gives practical recommendations on how to manage front-end application data.
Read more…
Fuse is not only used to describe the UI and layout; you can also use it to add effects and animation. In this article, Wern Ancheta will show you what Fuse is all about. He’ll show you how it works and how it compares to other platforms such as React Native and NativeScript. In the second half of the article, you will create your first Fuse app. Specifically, you will create a weather app that shows the weather based on the user’s current location. Towards the end of the article, you will consolidate your learning by looking at the advantages and disadvantages of using Fuse for your next mobile app project.
Read more…
WebAssembly is a way of taking code written in programming languages other than JavaScript and running that code in the browser. When you’re talking about WebAssembly, the apples to apples comparison is with JavaScript. With WebAssembly, it is possible to run code on the web faster. There are a number of reasons why WebAssembly code runs faster than its JavaScript equivalent, but it is useful to compare the two, so you can understand the potential impact that WebAssembly will have.
Read more…
