Javascript-Development on Janik von Rotz

JavaScript: Get array with unique objects

Tue, 18 Jan 2022 11:38:00 +0100

In JavaScript you can use Set to get an array with unique items. However, this does not work with objects. Converting the object to a string before creating the set is the solution.

Apollo GraphQl server and client sorting

Wed, 29 Jan 2020 14:05:23 +0100

GraphQl is not opinionated about sorting and pagination. It is up to you to implement the sorting for your query. I’ve seen various approaches doing that, but none seemed elegant. After compiling a few blog posts and tutorials I came up with the following solution.

Build an Apollo Graphql user authentication for your React app - part 3

Thu, 26 Sep 2019 10:31:27 +0200

This is the final post of my GraphQL Auth series. Before reading this post checkout post 1 and post 2.

As mentioned in my last post we need to polish our authentication solution. First we wanna ensure that the JWT token expires. Second, I think the isAuthenticated directive is insufficient for proper permission management on our types, queries and mutations. We need a role based solution. While the first point is simple to implement, the second is more complex and definitely requires walking through the previous posts.

Build an Apollo Graphql user authentication for your React app - part 2

Thu, 29 Aug 2019 19:34:07 +0200

In my last post we built a Graphql API that handles user authentication and authorization. In particular we added a loginUser query that returns a JWT token. This token can be used to access restricted resources. In this post I will show what the implementation looks like on Reacts side.

Build an Apollo Graphql user authentication for your React app - part 1

Tue, 27 Aug 2019 18:35:12 +0200

I am currently building an Apollo Graphql API and a React web application. The application requires a user authentication functionality in order to enforce access restrictions on the Graphql endpoint. Apollo Graphql does not provide an out-of-the-box-solution and therefore I would like to present my solution.

Simple Hugo page search with Lunr.js

Mon, 10 Jun 2019 12:11:31 +0200

Hugo is static website engine and acutally used to generated this blog post. Due to its static nature, there is now way to provide serverside capablities for dynamic lookups such as used by a search feature. Everything dynamically has to be done client side. In this post I am going to setup a search page for a Hugo site the most simple way.

State of JavaScript 2018

Mon, 19 Nov 2018 11:16:09 +0100

State of JavaScript 2018 has just been released. It is one of the biggest survey about JavaScript development. If you wanna know what is going on in the confusing world of JS, make sure to pay a visit. They did a great job at visualizing and showcasing the results.

JS snippet: Set tallest height on siblings

Sun, 06 Aug 2017 20:40:15 +0000

This post is another contribution to “I hope that I never have to use jQuery again”. The problem solved this time is quite simple. We want to set the same height for a group of divs. So not like this:

The most simple access control for your Meteor React app

Fri, 12 May 2017 09:46:48 +0000

For my last Meteor React app I’ve designed the most simple role based access control. The basic idea is that users can have multiple roles and every action possible is only allowed by a specified set of roles. For my Meteor React app the following scenarios were considered:

Debounce a redux dispatch method in a react component

Thu, 20 Apr 2017 12:46:18 +0000

Tightly connected reactivity in a react application has the side effect that it is sometimes necessary to delay the execution of a method. Assume you have a search input field that filters elements while typing, every field input creates a search request. In order to get rid of unnecessary search requests you have to wait until a user has finished typing and then start the search. To make this work without a search button, you have to intercept repeating executions (debounce) of the search method within a specified time frame and delay the execution of the last call.

Meteor project structure

Tue, 28 Mar 2017 16:20:06 +0000

Get the latest version of this specification here: https://gist.github.com/d4755eb1b7a9d6b08515408ea6fd69bb

The Meteor project structure (MPS) is a proposal for a simple file and folder naming specification.

There are several basic distinctions when building a Meteor project structure. First there is a client, server and an imports folder. All folders have specific naming rules and differ in their structure.

Deploy your Meteor app with PM2

Tue, 14 Mar 2017 14:12:42 +0000

PM2 is a well-known node process manager. Not so well-known is its deployment feature. With pm2 you can reasonable easy deploy any node application. As Meteor is always a node app at its heart I’ve decided to deploy my current Meteor project with PM2.

Make your Redux React app multilingual

Thu, 02 Mar 2017 12:51:10 +0000

For my current React app in development I’m using Redux to manage the client state. As this is the first time using Redux I’m not quite sure what to put in the store yet. But I’ve decided to give the multilingual labels and wordings a try. Below you’ll find a simple approach on how I made my app multilingual using the Redux client state to store the translated content. I assume you are familiar with Redux and React.

Meteor register LDAP login request handler

Wed, 08 Feb 2017 20:53:56 +0000

One requirement for my current Meteor project was that a user must login with their ActiveDirectory account. This means that Meteor must be able to authenticate against LDAP. In atmosphere there are already a few packages available which implement and support LDAP authentication. However, they are either outdated or difficult to configure. This is why I’ve decided to build my own custom login request handler for Meteor.

Reactive subscriptions with Apollo and React

Mon, 28 Nov 2016 12:27:08 +0000

Apollo server and client support real-time subscriptions with web sockets. Compared to Meteor’s out of the box real-time communication this is a lot more difficult to set up. With this short tutorial I’ll give you an example of how you can get a simple reactive subscriptions into your Apollo/React app. The idea is that you use real-time communication for a specific case only, f.g. sending notifications. We will accomplish this in five steps.

Install project requirements.
Setup the server schema.
Add server resolvers.
Setup the client subscription.
Modify a component to receive data from a subscription.

Authenticate Meteor accounts with the Apollo GraphQL API

Sat, 12 Nov 2016 10:21:20 +0000

One of the popular features of Meteor is its accounts package. As you know, it makes it fairly easy to add a user authentication solution to your Meteor app or add support for different oAuth services. With the possibility to integrate an Apollo GraphQL API into your Meteor app this became a bit more difficult. The Apollo stack does not support an out of the box solutions to authenticate users with Meteor accounts. Jonas Helfer, one of the Apollo core devs, proposed two ways to authenticate users with your app:

Graphql with Apollo, Meteor and React

Sun, 09 Oct 2016 19:39:30 +0000

For my last project I had to build a web application to administrate a MongoDB database. Due to using Meteor quite a lot I heard about Graphql and the Apollostack. Graphql, which is a specification done by Facebook engineers, promises to be the better REST API (which I hope it is). I became curious and decided the build the server API with Apollo. First I tried to evade using the Meteor as build system as I don’t want to get too accustomed to this full-stack ecosystem. However, building a live-reload server and client build system in ES6 with Node.js, Babel and Webpack was simply too much work compared to building this simple web app. So in result this was my stack:

Node.js dynamic settings

Thu, 25 Aug 2016 19:43:31 +0000

As I’m relatively new to Node I had to wrap my head around a very basic thing. Getting external variables into my app. Loading settings for different environments from config files and via environment variables (for heroku deployment) should supposedly be an easy challenge. However, none of the solutions I’ve found were well enough for my scenario:

Store config in json file.
Have different configuration files (development, production, …).
Load configs from environment variables.
Fallback from environment to config file.
App lives in one folder.

OLMOTO - An app built by beginners

Tue, 02 Aug 2016 12:30:05 +0000

One month ago I started teaching a friend the basics of JavaScript with Meteor, Mantra and React. Together we’ve built an app to create and share events with friends. It was an awesome experience. Yesterday we launched a private version on heroku. For us this was a great accomplishment. I learned a lot from this project and thought about sharing it with world.

https://codeberg.org/janikvonrotz/olmoto

Some technical features and challenges we solved:

React image loader with a spinner

Sat, 23 Jul 2016 04:19:06 +0000

hey there, I’ve spent as usual a lot of time with React, Mantra and Meteor. While building a simple app I checked out the new Meteor standard for file handling Meteor-Files. It works great, I really recommend this awesome package. But that’s not what I want to show you. The app I’m working on loads pictures form the dropbox api. Downloading the pictures always takes a while. To make sure the user doesn’t get impatient the app is now displaying a spinner when the image is loading. I would to like to show you how I’ve built this image loader and spinner component.

Meteor create user with a profile and custom attributes

Mon, 11 Jul 2016 20:34:48 +0000

For Meteor there are not many options left when choosing a user account package. The built-in option is the only use- and successful solution so far. The package is well documented and works like a charm. However, whenever I set up the account system in Meteor I am confronted with these two scenarios:

How can I extend the user profile object with data from a registration form? (A user should be able to edit the profile data himself later on.)
And how can I add other attributes to the user collection object? (A user should not be able to change a custom attribute himself later on.)

These are two fundamental obstacles almost every developer faces when setting up the account system. There are a lot of solutions out there on how to do this in Meteor properly, but a lot of them are poorly described and make it difficult the get the right idea of how the account system works. It got even more difficult due to API changes and Meteor itself that changed a lot over years. Now I would like to give a good example for this two questions.

Meteor productive deployment blank page

Tue, 21 Jun 2016 10:16:07 +0000

First some background. I’ve built a Meteor app and decided to deploy it to Heroku. There are many short and simple guides out there on how to do that. As I did so and opened the App for the first on Heroku I simply received a blank page. Where did my javascript code go? Heroku logs didn’t tell much.

How to publish a react component to the npm directory

Thu, 09 Jun 2016 12:33:36 +0000

This time I’ll show you how to publish react components to the npm directory. This guide does not cover testing it only shows the easiest way to use your components for different projects as npm dependency.

Meteor and Mantra - Routing redirect

Thu, 26 May 2016 10:03:22 +0000

Recently I started using Mantra to develop my Meteor apps. As with any other framework You’ll find a lot of answers to common questions in a related forum or any other resource. However I couldn’t get a good answer on how to implement routing logic properly. The Mantra specs also don’t tell much about how to approach it. So here’s my solution.

Meteor and React: Markdown editor with draft.js and marked.js

Tue, 05 Apr 2016 09:15:29 +0000

Recently I switched my current project from Meteor 1.2 to 1.3. While doing so I reworked the code for my markdown editor. When created the markdown editor in the first place I learned about the necessity of a solid platform to build web editors. So this time I used draft.js as base. Facebook open sourced draft.js a few months ago. They use it almost everywhere on Facebook page, so it should be well-tested.

The markdown editor you’re going to build has these features:

Instant html preview rendering
Support for GitHub flavoured syntax and markdown tables
Drag and drop file upload.
Copy and paste file upload.

Optionally: File upload with Meteor and FS Collection.

Meteor and React: Fullscreen Viewer Component

Tue, 08 Mar 2016 15:51:29 +0000

Another post as result of my Meteor React experience. This is a simple approach to build a fullscreen viewer for any React component.

Meteor and React: Bootstrap Modal

Sat, 05 Mar 2016 12:42:05 +0000

I would like to share my great experience I had with Meteor and React. This time I want to show how I’ve built a bootstrap modal component. There are already a lot of solutions out there, but none of them were suitable.

Here’s how you can get a neat bootstrap modal for your Meteor React project.

Meteor White Paper

Wed, 16 Dec 2015 21:05:20 +0000

Introduction

Today’s internet would not work without web applications. Web applications made the web dynamic and extended its targeted audience. The applications made it possible for companies to create new business models and sell their goods and services online. They became popular due to the ubiquity of web browsers, and the convenience of using a web browser as a client (Wikipedia, 2015). Undoubtedly, the technology to build web applications is the cornerstone to enabling the enterprises to keep up with the pace of business. Life cycles of products have become shorter while the demand raised at the same time. Enterprises have to accelerate their application development process to stay competitive in the future.

Install npm package forever

Fri, 28 Mar 2014 12:49:20 +0000

This post is part of my Your own Virtual Private Server hosting solution project.
Get the latest version of this article here: https://gist.github.com/9347463.

Introduction

A simple CLI tool for ensuring that a given script runs continuously (i.e. forever).

Install Node

Thu, 27 Mar 2014 16:46:14 +0000

This post is part of my Your own Virtual Private Server hosting solution project.
Get the latest version of this article here: https://gist.github.com/9346588.

Introduction

Node.js is a cross-platform runtime environment for server-side and networking applications.

How to debug your Node.js application

Fri, 21 Feb 2014 14:20:13 +0000

Recently I’ve started developing with Node.js. As a beginner I had to set up an IDE which meets my requirements such as debugging code. I’ve tried several IDE’s such as Microsofts’s WebMatrix or Eclipse Node.js extension. But all of them literally sucked, they were are a pain to install or didn’t work properly.

Luckily I came along this project: https://github.com/node-inspector/node-inspector