Thanks to mobile device and network proliferation, more people are using the web than ever before. As this user base grows, performance is more important than ever. In this article, find out why performance matters, and learn what you can do to make the web faster for everyone.
It has come time to read the liner notes and write some conclusions. When we started writing this blog series, we knew that JavaScript/web application frameworks were not easy to summarize.
Two weeks ago at EmberConf, we announced Glimmer.js, a component-based library for writing superfast web applications. In the demo video, we use TypeScript to write our Glimmer components. Some…
In 2016 React cemented its position as king of the Javascript web frameworks. This year saw rapid growth of both its web and native mobile libraries, and a comfortable lead over main rival Angular…
This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.
Continuing on from my previous article Want to learn JavaScript in 2015 / 2016. I’m going to walk you through what else I’ve been up to in the world of Javascript. Initially I’d planned to talk about…
There’s one question that comes up again and again on stackoverflow. The question is about ngDoCheck lifecycle hook that is triggered for a component that implements OnPush change detection strategy…
In the last couple of years there has been an explosion in JavaScript frameworks. How is a developer or business to make a wise choice? What are the advantages, trade-offs and differences? In this talk we’ll compare and contrast six popular front-end frameworks: Angular 1, Angular 2, Polymer, React, Ember and Aurelia.
Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (< 8kb gzip), fast and provides routing and XHR utilities out of the box.
Web components are made up of 4 separate specs, custom elements, shadow DOM, HTML imports, and the template tag. For the purposes of this article we will focus specifically on custom elements.
When React came out I was really amazed with his easiness of use and learning curve. At starting point of learning React I did not know that React is just a library and not fully fledged framework. I…
Polymer-redux makes using Redux with Polymer as easy as pie (learn in this post why and how). Unfortunately, the library doesn’t allow to bind Polymer properties to Redux selectors. This post discusses approaches to simulate Redux selectors in polymer-redux.
The new context API that comes with React 16.3 is pretty neat. It was built in the render props style trending over these last months. Let’s explore it: This talk from the excellent Jing Chen has…
People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux introduced to their code. “Why do I have to touch three…
Imagine you have a form for editing a user. It’s common to create a single change handler to handle changes to all form fields. It may look something like this…
This is the second part of our full-stack tutorial series that will walk you step by step through building an instant messaging app with React and GraphQL. Last week, in the first part of this…
One of the promising reasons I started learning rust is that it can be used to build modules for web using web-assembly. This blog post will cover how you can build a rust module and use it as…
We have been using Vue instead of Angular for nearly a year now. In this article, I will highlight my impressions on Vue and differences compared to Angular.
A few days ago Netflix tweeted that they'd removed client-side React.js from their landing page and they saw a 50% performance improvement. It caused a bit of a stir.
Once we were over the infamous Haskell learning-curve, we began looking for functional programming, immutability, and types everywhere! Given that one-third of our code runs in the browser (via Angular v1 — for now!), it is only a matter of time before we make the switch to typed-FP for front-end development as well.
It’s been a while since I’ve been working with React — a Facebook library to build user interfaces using JavaScript — and there are a few concepts I wish I knew when I was just starting. This text is…
We will be building a user authentication in a single page application with Node, React, Redux and Koa combined with Passport. We will implement local authentication, where users can log in using an email and passport, and authentication with Facebook, which can be used with other social networks and OAuth providers.
Riot lets you build user interfaces with custom tags using simple and enjoyable syntax. It uses a virtual DOM similar to React but faster. Riot is very tiny compared to industry standards. We think there is a clear need for another UI library.
VDOM is amazing, but it is still the DOM we are working with which is pretty slow. HyperHTML overcomes the drawbacks of VDOM. Here we compared both in details with examples.
This dissertation introduces and elaborates the Representational State Transfer (REST) architectural style for distributed hypermedia systems, describing the software engineering principles guiding REST and the interaction constraints chosen to retain those principles, while contrasting them to the constraints of other architectural styles.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them.
Tim Griesser As JavaScript applications increase in complexity, consistent patterns for managing state becomes considerably more important, and difficult to ...
An npm package to create and expose CRUD APIs in Node.js ExpressJS projects for mongoose models. Automatically creates swagger documentation for each API.
Most of Node’s objects — like HTTP requests, responses, and streams — implement the EventEmitter module so they can provide a way to emit and listen to events. The simplest form of the event-driven…
This article comes from Tomislav Capan, technical consultant and Node.js enthusiast. Tomislav originally published this in August 2013 in the Toptal blog — you can find the original post here; the…
Those of you upgrading npm to its latest version, npm@5.2.0, might notice that it installs a new binary alongside the usual npm: npx. npx is a tool intended to help round out the experience of using…
JS Bin is a tool for experimenting with web languages. In particular HTML, CSS and JavaScript, but JS Bin also supports other languages too (like Markdown, Jade and Sass).
React is incredible because it allows you to build your UI using a declarative API. You tell React what you want the interface to look like, and it handles the rest. As users interact with the…
This is the story of how frontend engineers at Podio improved productivity, developer experience and reduced technical debt simply by ditching Karma and Jasmine in favour of Mocha and jsdom. Testing…
Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors is that they enable you to use variables. This helps you to avoid copying and pasting code, and it simplifies development and refactoring.
These charts were created by GitHub user Kamranahmedse. They visualize three roadmaps to becoming a web developer. Even though I disagree with some of his suggestions (I recommend you starting…
There's a ton of interest these days in 'CSS in JS'. The premise is simple: CSS operates in a global namespace, which can result in undesirable side effects, spaghetti code, and extremely difficult to maintain codebases. JavaScript used to do this, and we fixed it by encapsulating everything in modules and using tools like webpack to stitch everything together. And hey look, our JavaScript tools can handle CSS too, why don't we move all of our CSS into JavaScript and encapsulate everything by module!
I have recently started playing around with PureScript. In this post I want to document some of the learnings I had when writing a first tiny app with PureScript and Pux. As I walk through the code of the app I'll cover the basics of Pux. I will not attempt to provide a full tutorial here, nor will I cover the very basics of PureScript. But I will provide some pointers to useful resources where I found some.
WebSockets can be very beneficial for building realtime communication or data streaming applications on the web, such as chat apps and applications that stream images or other types of media…
Golang have a great http server package: net/http As always, it’s simple and very powerful. Define the function that handle a route, and let’s listen to port 80. Nice, but let’s use a more powerfull…
I’ve been writing Go (Golang when not spoken) since r59 — a pre 1.0 release — and have been building HTTP APIs and services in Go for the past seven years. At Machine Box, most of my technical work…
Vue is a very popular JavaScript front-end framework, one that’s experiencing a huge amount of growth. It is simple, tiny (~24KB), and very performant. It feels different from all the other…
Let me start with this — this is by all means not a comparison of what should be your next choice for Front-End. It’s a small, relatively unsophisticated, comparison of three things: Performance, Size, and Lines of Code of pretty similar application.
Modals, there are a thousand ways of implementing them, but the biggest challenge is to keep them simple and flexible. Let’s do that with React Hooks and Portals!
This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content. This setup is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere like a normal person.
I have my own biases and preconceptions, but I want to state them openly and then make a sincere attempt to discuss other frameworks. I’m also trying to discuss these not with reference to myself but to a large degree as whether I recommend them to someone learning.
I’ve seen many, many people using a modern framework like React, Angular or Vue.js blindly. These frameworks provide lots of interesting things, but usually people miss the point about the deepest…
Having a monolithic approach to a large front-end app becomes unwieldly. There needs to be a way of breaking it up into smaller modules that can act independently.
React's future is going to be more functional, and less OOP. What if that future is already reality? How would it look like? React's foundations are reactive...
These are 3 situations that we can come across while building Angular apps using RxJs. We are going to go over why the issue happens and how to fix it.
This post is about an experimental approach and I am sure there are other approaches for solving a similar problem. If so, please comment on this article. Demo…
The ngrx team decided that we don’t need middleware anymore, in most cases, we can use meta-reducers to achieve the same effects. higher order function is a function that may receive a function as…
Mithril positions itself as a compact but powerful modern client-side JavaScript framework. In this tutorial, we are going to use Mithril to build a fairly complex web interface to store data about conferences and authenticate it with Auth0.