Progressive Web Apps

The PWA Resource list

Recently I started getting asked more and more about the development of Progressive Web Apps. After the basic explanation about what they are I usually point to various places on the web. So, I decided to create this list of resources to have them available for everyone… Resources Progressive Web Apps A new way to deliver amazing user experiences on the web. https://developers.google.com/web/progressive-web-apps/ What are Progressive Web Apps? http://blog.ionic.io/what-is-a-progressive-web-app/ Progressive Web App Checklist https://developers.google.com/web/progressive-web-apps/checklist iOS doesn’t support Progressive Web Apps, so what? https://cloudfour.com/thinks/ios-doesnt-support-progressive-web-apps-so-what/ Progressive Web Apps — Yeh or Meh? http://developer.telerik.com/topics/web-development/progressive-web-apps-yeh-meh/ Production Progressive Web Apps with JavaScript Frameworks https://css-tricks.com/production-progressive-web-apps-javascript-frameworks/ What, Exactly, Makes…

node.js

Live-LiveCoding: node.js @ SDN event

Hello Coders! Here’s the recording of my LiveCoding session at the SDN Event. In this session I’ve build a very basic website using node.js and express.js. I talk about Pug for templating and Sass for my css. I also explain some great features in Visual Studio Code. I also streamed the session to my LiveEdu.tv channel. Be sure to check that to find out when I’ll be streaming again. You can find the code build in the session at my GitHub. I want to thank SDN for organizing the event. Be sure to check their channel as well (it’s in Dutch).

node.js

The Express.js Route to Success | express.js router

Intro You probably want your node.js server to respond to requests that are coming in, specially when you are building a website. This can be complex and quite tedious to implement in vanilla node.js. Luckily express.js has done this for you.

node.js

How to build node.js apps effortlessly with express.js

Node.js is a pretty powerful and versatile framework to build sites and tools. But using the defaults to handle HTTP requests and such can be a pain. Express.js can make your life a lot easier. In the previous tutorial I showed you how to get started with node.js, this time I’m going to expand on that. We’re going to scaffold a new Express.js app.  Express.js is a web framework that makes it very easy to handle calls to the node.js server. It helps you with routing, error handling and it works very well other frameworks. Installing the express generator The…

node.js

Getting started with Node.js on ChakraCore

Intro Last year I started to use Node.js more and more. Personally I really like it. Using node.js on ChakraCore has some advantages over using V8. I’ve decided to get to know node.js a bit better and start a series of posts about it, beginning from the top. What is node.js? Node.js is described as interface to V8, Google’s JavaScript engine that also used in Chrome. Node.js enable you to write server-side code using JavaScript. It is uses an event-driven, non-blocking I/O mode.  This  very lightweight and efficient, but, as a trade off, you have have to implement every HTTP…

JavaScript

Poor Mans jQuery

A lot of people use jQuery in their HTML/JavaScript applications. There’s nothing wrong with that. But I’ve seen a lot of people use jQuery only to make it easy to find elements and they are not using any of the other jQuery functions. It’s pretty clear that writing a single ‘ $ ‘ instead of the way longer usages of various function on the ‘document‘ object, like getElementById. One of the functions on the ‘document’ object is the querySelectorAll function. This function brings a similar experience to vanilla JavaScript by taking selectors as a parameter.  So if we take a…

HTML5, Presentation, UWP app

Speaking about JavaScript UWP apps.

Last week I was invited by iSense to give a presentation about JavaScript Frameworks in Universal Windows Platform Apps. I decided my personal goal was to show people that JavaScript is a perfectly legit language of writing your apps for Windows 10, specially when you have a web development background. I started with an introduction about the way the JavaScript UWP apps work in Windows 10 and talked a bit about the great support of ES6 in Microsoft Edge. I then demonstrated how easy it is to convert a web application to a hosted UWP app, including what you could do in…

Video

OAuth in a JavaScript UWP app

A quick walkthrough on how to get authenticated with YouTube using oauth, in a JavaScript Universal Windows Platform (UWP) app. It uses a few classes from the Windows Runtime. The demo code can be found on my github account at: https://github.com/sorskoot/UWP-OAuth-demo Guide from YouTube for setting up oauth: https://developers.google.com/youtube/v3/guides/auth/installed-apps Documentation of the YouTube API: https://developers.google.com/youtube/v3/docs/ Getting your own client ID and client secret: Google developer console – https://console.developers.google.com/ How to obtain credentials – https://developers.google.com/youtube/registering_an_application More on the oauth flow – https://developers.google.com/youtube/v3/guides/auth/installed-apps Twitter: @Sorskoot Weblog: http://winjs.ninja Channel: http://youtube.com/c/winjsninja

CSS, Design, HTML5, UWP app

Styling default JavaScript UWP app controls

When working on my drum machine app I started changing the look and feel a little. I started my changing the black and gray to some more bright colors. Pretty quickly I ran into some issues with changing the look and feel of the default controls. The blue color is specified as a named color ‘Highlight’, which seems to be controlled by Windows. After searching for quite a while I came across some MSDN documentation that describe a couple of vendor specific CSS pseudo-classes to alter various elements of the controls. The whole list of pseudo-classes you can use to…