Trending projects of January for Vue.js

Image for post
Image for post

Here are the trending Vue projects of 2021 that you should take a look at!

1. vue-advanced-chat

Helping developers choose the right open-source packages and libraries

Image for post
Image for post

What exactly is Openbase?

Openbase is the Yelp of open-source packages and libraries. Founded by Lior Grossman, Openbase’s goal is to help developers “build amazing products faster”. From 1.4 million JavaScript packages to choose from, users can gain insight into each package and compare which suits their needs best.

How does it work?

To sign up, you can authorize Openbase to login with your GitHub account. The landing page showcases Frontend Frameworks, Bundlers, and CSS Frameworks. It also showcases package reviews from top developers. Of course, you can also search for a specific package.

Currently, Openbase supports JavaScript packages. However, there are plans to expand to Java, C#, Python, etc. …

Ionic Vue: What is it?

Image for post
Image for post

What is Ionic Vue?

Ionic Vue combines the experience of the Ionic Framework with the tooling and APIs from Vue.js. Built on top of the recently released Vue 3, Ionic Vue takes advantage of Vue 3’s new features such as the Composition API and TypeScript support. You can also use all components from the Ionic Framework with the exception of virtual scroll.


To be able to start building apps with Ionic Vue, you first need to install the Ionic CLI. This can be done by running the following command:

npm install -g @ionic/cli@latest

Once it has finished installing, you are ready to start using Ionic Vue! …

How to showcase recent Medium articles on your GitHub profile

Image for post
Image for post
Sample from my GitHub profile

Developed by Iman Tumorang, github-readme-medium-recent-article enables you to showcase recent Medium stories on your GitHub readme. In this article, I will show you how you can add your stories into your own profile readme (or any readme for that matter).

Add Medium stories to your GitHub ReadMe

If you haven’t already, you should create a new repository with the name that exactly matches your GitHub username along with a

Actually adding the links is really simple. All you need to do is add the following line to your readme:

<a target="_blank" href="<username>/<articleNumber>"><img src="<username>/<articleNumber>" alt="Recent article #1"></a>

Replace <username> with the username of your Medium profile. As for <articleNumber>, it is 0-indexed. Therefore, 0 will display your latest story, 1 will display your second most recent story, and so on… You can show as many latest stories as you want, as long as you have that many stories to display of course. …

TypeScript projects you should check out

Image for post
Image for post

Here are some trending TypeScript projects that can make life easier for you.

1. Storybook

Interview questions on Vue.js you should be prepared for

Image for post
Image for post
Edinburgh Napier University

If you are preparing for a Vue.js interview, then these are 10 quick-fire questions that you should be prepared to answer.

1. What is Vue.js?

Vue.js is frontend JavaScript framework for building user interfaces with a focus on single-page applications. It promotes “high decoupling” which makes it really easy for developers to create user interfaces and rapid prototyping.

2. What are the benefits of Vue.js?

Vue.js is lightweight and therefore highly performant. It is developer-friendly, hence easy to learn. It is highly flexible and has great tooling.

3. What is a Vue instance?

The Vue instance, often referred to as vm in a Vue application is the ViewModel of the MVVM pattern that Vue follows. …

When to use Nuxt and when to use Vue

Image for post
Image for post

Vue.js is known for building user interfaces and single-page applications. It promotes “high decoupling” which allows developers to easily create user interfaces and rapid prototyping. Nuxt.js is a framework built on top of Vue with the aim to make development easy and powerful. It focuses on the developer experience.

What does Nuxt.js offer that Vue doesn’t?

Nuxt.js enables developers to build Server Side Rendered applications in which a Node.js server will deliver HTML to the client based on your Vue components (rather than running JavaScript on the client side). This will allow for better SEO than traditional SPAs built using Vue. Another great advantage of Nuxt is the ability to create a Statically Generated website for your application. This enables users to publish their application without the need for a server (such as GitHub Pages). …

Modern device mockups using pure CSS

Image for post
Image for post

Devices.css enables developers the ability to easily incorporate modern device mockups directly into their project. Developed purely in CSS, Devices.css is a great library to showcase apps, web pages, screenshots, and more. It currently supports some notable devices such as the iPhone X (basically the iPhone 11), MacBook Pro, iPad Pro, Surface Book, etc.

Include Devices.css in your Project

To include Devices.css into your project, simply clone the repository from GitHub and copy the devices.css or devices.min.css (if you prefer a minified version) to your applications assets. Then, make sure to include it the <head> section of your application like <link rel=”stylesheet” href=”mypath/devices.css”>. …

5 tips for any new Software Developer

Image for post
Image for post

1. Avoid Else Clauses

Writing else clauses leads to code duplication. I’ve seen interns write if statements in which the true and false blocks consisted of nearly the same lines of code. Rather, you should use an approach where an if statement checks to ensure that the algorithm should progress. Or only run some code under a specific condition. If the condition is not met, the remaining operations can execute normally. There is always a way to refactor your code to avoid an else clause.

2. Stay Consistent

Writing clean and consistent code is very important. It enables your fellow teammates to clearly read and understand your code. It is important in every team because developers have different coding styles and that leads to inconsistent code styling. A great tool you can add to your projects to help solve this issue is a linter, such as ESLint for JavaScript. A linter is a code analysis tool that helps identify problematic coding patterns. It can be configured to suit your organizations styling standards. It can also be integrated into your Git pipelines to ensure all code that is being pushed to the project repository is following your styling standards. …


Giuseppe Campanelli

Online Programmer @ Ubisoft | Writer for JavaScript in Plain English

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store