While I was working on 🎨 Colour Hunt I had to implement pagination at some point. No one wants to load a ton of color palettes at once. However I really like the lazy load approach instead of a classic pagination.
💪 Preparation
Colour Hunt is build with Nuxt.js, Graph.cool and vue-apollo. The stack is a dream for rapid development as you don’t need to fiddle around with a backend. The idea behind Colour Hunt is, that people can create and share color palettes. However you can use this techniques for all kind of graphql nodes. …
Second part of building a webapp which interacts with the npm api and generate charts
In case you missed the first part, you can find it here. First of all, wow! Thanks for all the feedback and twitter messages! 💝 I never imagined to reach such a wide audience. But enough of that. Let’s get to work 💪.
⚡ Quickstart
So, we are building npm-stats.org. A small web application build with Vue.js, vue-chartjs and the npm API, to grab the download statistics of packages and generate charts based on them.
What we have done so far
A small recap of what we have build in Part 1:
- ✅ Create a vue.js application with
vue-init - ✅ Install dependencies and setup the
vue-router - ✅ Create…
The first part of building a small web app which interacts with the npm API and generates nice charts
Data is beautiful. And with modern technologies it is crazy easy to visualize your data and create great experiences. In this quick how to, we cover how to interact with the npm 💘 API to get download statistics of a package and generate a chart from this data with Chart.js
⚡ Quickstart
We will build npm-stats.org and will be using following tools:
- Vue.js with
vue-router - Chart.js
- vue-chartjs
- vue-cli
- axios
With Vue.js we will build the basic interface of the app and and routing with vue-router . And we scaffold our project with vue-cli which creates our basic project structure. For the chart…
An in-depth guide on how to publish your modules on npm, without pain.
So, you have finished a lib, cli tool, component or some other scripts to want to share with the world.🌍 So it is time to publish it on npm.
🥇 Your first package
Let’s assume, you already use npm for your dependencies. You installed them with npm install XYZ or if you're super cool 😎 with yarn
If you now want to publish your package on npm there is a simple command for that:
npm publish🔥 But before we do this, we have still some points on our 📋checklist.
📦 Package.json
You know that all dependencies get saved in your package.json. Furthermore you save also…
Dive into the options of chart.js to create stunning charts.
Interactive charts can provide a cool way to visualize your data.
However most out of the box solutions are not as beautiful as they could be, with default options.
I will show you how to customize your chart.js options to make some cool charts!
⚡ Quick Start
What we will use:
We use vue-cli to create a basic structure. So I hope you got it installed already. And we use vue-chart.js as a wrapper for chart.js.
vue init webpack awesome-chartsThen we go into our project folder and install our…
Integrate Chart.js in your WordPress site and build fancy charts.
Well, data visualisation is a hot topic. In my day to day business I work a lot with WordPress and Vue.js. I can’t say how much I 💘 Vue.js and how much cleaner my workflow and code is, because of it.
Building large WordPress sites can be tricky, especially if you have a lot of interactions going on. But with Vue components, you can separate everything super clean.
From time to time, you may want to include some cool charts to enchant your articles with nice data and it’s pretty…
What I have learned and how I started
Recently one of my repos on GitHub reached 100 stars. It’s not much if you compare it to many many other awesome repositories and projects. But for me it is awesome. Because it was more or less my first “bigger” open source project. Now I want to share what I’ve learned so far and how I started with open source.
Open Source was always that fascinated me, as I have a strong linux background. (I was using Gentoo for many years) However I always wanted to contribute to projects and start own, it was kind of hard for me. I…
Random thoughts
Notebook is a new ongoing blogging series in which I talk about developing, music, cooking, apps and basically everything I write down in my paper notebook, day by day.
Music
I stumbled upon Föllakzoid, which is a fantastic psychedelic rock band. Enjoy!
Github Repo
I recently installed pure, which is a very beautiful, minimal and fast zsh prompt. I really like the simple style and with the hyper-snazzy theme. I would really love the hyper-snazzy theme for sublime or vim, because the colours are fantastic.
New Hobby — Ham Radio
After watching a few very cool talks about ham radios from the ccc and defcon, I got…
Der ein oder andere mag auf Twitter schon mitbekommen haben, dass ich mich wieder etwas vermehrt mit Go beschäftige. Irgendwie mag ich Go. Ich weiß auch nicht genau warum. Die Sprache fühlt sich sehr nach dem Kind von C und Ruby an. Ich mochte C damals sehr. Jedenfalls mehr als C++. Was aber auch vielleicht an der Objekt-Orientiertheit lag.
Jedenfalls habe ich jetzt ein kleines Sideproject gestartet. Mit Go und Vue.js. Was eigentlich eine super Kombination ist, da Go für das Backend zuständig ist und Vue für das Frontend. Ich mag z.B. …
Als ich vor kurzem meine Freundes Liste bei Facebook so durchgescrollt und aussortiert habe, musste ich viel über Freundschaft nachdenken. Wie gut befreundet man mit manchen Menschen doch eine Zeit lang war und wie schnell dann der Kontakt abgebrochen ist.
Wie man bei Stardew Valley gelernt hat, muss man seine sozialen Kontakte pflegen. Nicht nur in der virtuellen, sondern auch in der realen Welt. Das nimmt Zeit und oftmals Nerven in Anspruch und ist nicht jedermanns Sache. Ich persönlich bin ein sehr introvertierter Mensch und tue mich auch oft schwer mit sozialer Interaktion. Ich habe oft einfach Tage, wo ich…
Jakub Juszczak
#Freelance Developer — #Blogger, #Student, #Tea addicted, likes #photography #indie #gamedev #webdev
