JavaScript is becoming more and more powerful every day. Nowadays, with JavaScript, you can develop almost any types of application. From desktop to web and even game and mobile apps. Also, you can applications that interact with a database with Nodejs. Besides, with new JavaScript Frameworks like Nuxtjs and Reduxjs you can develop amazing web applications. In contrast, you must know to learn ES6 basics.

What is ES6?

ES6 or EcmaScript is the future of JavaScript. In a nutshell, JavaScript was taken from ECMAScript. Nowadays, people bring updates to ECMAScript and those featured work in JavaScript as well.  Besides, we used to call the older version ES5 and ES6 is the 2015 version with a lot of brilliant features. So, In this step by step tutorials, we will cover all the features with examples. Also, we will talk about Webpack and package bundlers as well.

Why should I Learn ES6?

Well, if you come here to learn ES6, you probably have a good reason right! Most developers use the ES6 code in their project. Also, most software development companies require you to know ES6. Besides, the new features are amazing. It helps you write code in more efficient ways.  You can use Class, Modules, Array Functions and more cool features. It’s the next version of JavaScript, which delivers new language features. So, let’s learn the ES6 basics and configuration.

Learn ES6 Basics Introduction and Configuration

Some modern browsers support ES6 syntax now. Chrome 60+ almost support all ES6 features. But, as of writing this article, most browsers don’t support ES6 features. Therefore, if you want to write code for production, you must convert your code to old JavaScript. So, now we need a tool like Babeljs. If you don’t know what it is. It’s simple a JavaScript compiler. It takes the ES6 code and converts it to old JavaScript code.

Configure Babeljs

Let’s setup Babeljs and use it. Also, you can read the documentation if you want. But I will explain it with step by step ways.

Steps to Configure Babeljs

Firstly, you must have NPM installed on your system. If you don’t have it, just go to nodejs.org download and install it. It will not take more than 2 minutes.

Secondly, create a new folder for your ES6 learning anywhere in your system. Then, open terminal or CMD and run the following command to install Bablejs.

npm install --save-dev babel-cli babel-preset-env

That will install Bablejs and preset env.

Create a package.json file in your directory and paste the following code.

{
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
        "build": "babel src -d output"
    },
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.6.1",
    }
}

Everything should look familiar to you if you have ever used NPM. The script part registers the build command for NPM. It means you can run ‘ npm run build ‘ in your current directory and it will run the babel in the src folder and compile the files to the output directory.

Your project structure should look like this.

The final step is to create a .babelrc file and write the following code.

{
  "presets": ["env"]
}

In older versions of Babel, we used to write the presets value like es2015 or es2016. Now you don’t need to since you have preset-env and it will work just fine.

Now, create any file in the src directory and write ES6 code. Then, run the ‘ npm run build ‘ command in CMD.

I have a file called Persion.js in the src directory.

class User {
  constructor(name) {
    this.name = name;
  }
}

I wrote a simple class usage structure in ES6. When it compiles, it will look like this

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var User = function User(name) {
  _classCallCheck(this, User);

  this.name = name;
};

You don’t need to worry about how long it is and how hard it’s to read. Just read the ES6 version. Also, that’s super clean.

Conclusion

I think it’s enough about ES6 basics part. Besides, we are supposed to make clean and short tutorials. So, I hope they learn the ES6 basics part has been informative for you. If you have any questions, feel free to comment below.

The post Learn ES6 : Basic Introduction and Configuration appeared first on TECHNIG.

Vue js is becoming more and more popular every day. It has a community of great developers. Also, you can develop almost any types of a web application with Vue. Besides, The Vue.js is an open-source progressive JavaScript framework for building user interfaces. Vue can also function as a web application framework capable of powering advanced single-page applications. In this article, you will learn about Vuejs computed properties vs methods. Also, where should you use methods and where should you use computed properties.

Vuejs Computed Properties VS Methods

Firstly, I expect you know the basics of Vue and want’s to learn the differences between computed property and methods. So, we will discuss with clear and real-life examples.

You write the computed properties and methods almost in the same way. Let’s see an example and then we will explain it more.

[codepen_embed height=”432″ theme_id=”0″ slug_hash=”GOxPbN” default_tab=”js,result” user=”Hujjat”]See the Pen <a href=’https://codepen.io/Hujjat/pen/GOxPbN/’>GOxPbN</a> by Hujjat Nazari (<a href=’https://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

In the above example, we have a collection of tasks. Then, we display them based on completed and incompleted tasks. As you can see, we have once computed property and one method. They do almost the same thing but opposite to each other.

Return completed tasks:

  computed: {
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    }
  }

Return Incompleted tasks:

methods: {
    InCompletedTasks() {
      return this.tasks.filter(task => !task.completed);
    }
  }

Note: As you can see, we could use computed property or methods for both. Instead, we put them in two ways so that you can understand that, what we can do with methods can be done with computed properties as well.

So, there are some significant difference and usage you should consider while using them.

Computed Properties

In a nutshell, computed properties are called computed value as well. It means, they update and can be changed anytime. Also, it caches the data until it changes. When the Vue is instantiated, computed properties are converted into a property. Therefore, you reference a computed property just like you would a data property.

Example:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

You can use it like this.

<p>Original message: "{{ message }}" </p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>

As you can see, the reverse message is not written like function. It’s just like a keyword. Additionally, you can’t pass a value to a computed property despite the fact that it’s like function.

Methods

You probably work with function a lot. Methods are the same as function and work the same way. Besides, a method does nothing unless you call it. Also, like all javascript functions, it accepts parameters and will be re-evaluated every time it’s called. After that, they can’t cache values. Additionally, you must use methods when you want to pass a value to modify it. 

Example:

[codepen_embed height=”305″ theme_id=”0″ slug_hash=”yPjjyg” default_tab=”html,result” user=”Hujjat”]See the Pen <a href=’https://codepen.io/Hujjat/pen/yPjjyg/’>Vuejs example for tutorial</a> by Hujjat Nazari (<a href=’https://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

As you can see. We can call it like a function and pass value. Then, you can change it or add something.

In a nutshell, if you want to pass value, methods are good. Otherwise, computed properties are better for cache and speed.

Conclusion

I hope the Vuejs computed properties VS methods compression has been informative for you. If you have any questions or suggestions, feel free to comment below. Besides, you can join our forum and ask questions frequently.

The post Vuejs Computed Properties vs Methods Comparison With Example appeared first on TECHNIG.

Every developer uses NPM more than ten times every day. NPM is a package manager for the JavaScript programming language. Also, it is the default package manager for the JavaScript runtime environment Node.js. Besides, most packages require the latest version of NPM. Therefore, you should upgrade your NPM once a while. In this tutorial, you will learn how to upgrade NPM in Windows step by step and the correct ways.

Upgrade NPM in Windows

There are mainly two ways to upgrade NPM. Also, these upgrade methods are thoroughly recommended by NPM team. You don’t need to worry about whether it’s the right way or not. So, let’s learn the first and easy way.

Recommended Article:

How to Make NPM Work 20 Times Faster

1. Install the latest MSI

Well, the easiest way to upgrade NPM is to download Nodejs MSI file from its website and install it over your old NPM version. It will automatically upgrade if you install the latest version. Also, there is no down-side to it. It will work just fine.

2. Using the Package for Upgrading

The NPM team has the recommended to use this package on Windows for Upgrading the NPM. It’s pretty simple and easy to use. Also, you don’t need to install or download anything after this. Just install this package globally and run it once a white to keep your NPM up-to-date.

Below are the instructions to upgrade NPM on Windows.

• Run Powershell as Administrator
• Run this command Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
• Next, run this npm install -g npm-windows-upgrade
• Now, run this npm-windows-upgrade

The last command will upgrade your NPM. After this, when you want to update your npm, just run npm-windows-upgrade. It will update NPM to the latest version.

Conclusion

I hope it has been informative for you. If you have any questions or suggestions, feel free to comment below. Also, you can join our forum and ask your questions frequently there.

The post How to Upgrade NPM in Windows Step by Step? appeared first on TECHNIG.

As a developer or web designer, we use NPM almost more than 5 times on average per day. Sometimes, it takes a long time to install a package. Even more than 5 minutes or more. Besides, you watch some people on tutorials who install a package in 5 seconds. How they do that? If you want to make NPM install Work 20 times faster, this tutorial will help you.

Why NPM install is Too Slow?

Before we make NPM work faster, we should know what are the reasons why NPM install is too Slow. Well, there are many reasons. We just mention a few of them. So, if you are using Mac, it’s faster than the PC. Because all Apple MacBooks are having SSD hard drive. Also, most SSD drives are 5 to 10 times faster than HDD hard drives. Therefore, your computer might work slow.

If you have Mac or PC with SSD hard drive and still your NPM install command work slow, you can make it faster by following the tutorial. Also, this method works for HDD drives as well. 

Make NPM Install  Work 20 Times Faster

1. The first way to make NPM install faster is to make the progress set to false. So, this makes NPM install packages without showing the progress status.

npm set progress=false

It makes NPM install run 2x faster.

2. The second way is to use PNPM. It’s fast, disk space-efficient package manager. Besides, it’s a lot faster than NPM and Yarn. The way it works is similar to NPM. Also, as the documentation says, it supports almost 80% of NPM commands.

Features:

• Fast. Faster than NPM and Yarn.
• Efficient. One version of a package is saved only ever once on a disk.
• Deterministic. It has a lock file called.shrinkwrap.yaml
• Strict. A package can access only dependencies that are specified in its.package.json
• Works everywhere. Works on Windows, Linux and OS X.

Here is how you install and use it. Assuming you have NPM.

npm install -g pnpm

Now, instead of using NPM install, use PNPM install. For example.

pnpm install bootstrap

But you should remember, it will not work if you don’t have the filepackage.json.

npm init -y

Before using PNPM install command, run  npm init -y to create an empty package.jsonfile.

NPM commands that are re-implemented in PNPM:

• install
• update
• uninstall
• link
• prune
• list
• install-test
• outdated
• rebuild
• root
• help

You can read more here about it.

Conclusion

I hope it has been informative for you and y help you. If you have any questions, feel free to comment below. Besides, you can join our forum and ask questions there.

The post How to Make NPM Work 20 Times Faster appeared first on TECHNIG.

JavaScipt is by far the most popular programming language now. It will definitely rank in 2018. Also, you can almost develop anything with javascript. Web application, mobile, desktop and even work with a database. Besides, it has a large community of developers and contributors. Additionally, ES6 or ECMAScript 2015 is making the JavaScript better and better each day. So, we have collected the top best JavaScript Frameworks. If you want to learn any framework 2018, you may want to know which is the best, most popular and easy-to-use. Therefore, we collected these 5 best frameworks.

Furthermore, we show the resources that you can learn these frameworks in the best ways. Plus, we will compare them with Google trend to see the trending.

Best JavaScript Frameworks

Below are the lists of top JavaScript Frameworks that will rank in 2018. 

• Vue.js
• React
• Angular
• jQuery
• Redux

These frameworks are selected based on popularity on Github, most active users, eas of use, rich features and Google trends.

Notice: The above chart is the comparison of 5 best JavaScript frameworks on Google trend. In such a manner, you may not agree with it, but it’s the Google trend search terms. So, we don’t pay too much attention to that as well. What people search on Google doesn’t determine that it’s the best. Therefore, we order these frameworks more based on user-friendly, active users, updates plus most stars on Github.

Vue.js

The Vue.js is an open-source progressive JavaScript framework for building user interfaces. Vue can also function as a web application framework capable of powering advanced single-page applications. Besides, it has a lot of pre-made components. Also, one the strongest reason why it’s popular is Laravel Framework. By default, Laravel comes with Vue installed. That way, most Laravel user will use it. The second reason is that Vue become popular in a short time. It was released in early 2014.

Additionally, it has great documentation and many other learning resources. Also, at the time of writing this article, it has 73000+ Github stars. So, if you want to learn, start with documentation or free Laracast video series.

React

React is a JavaScript library for building user interfaces. Also, it is maintained by Facebook, Instagram and a community of individual developers and corporations. Besides, React allows developers to create large web-applications that use data with Single Page Application. The initial release was 2013 and the author was influenced by the Angular framework. The Github repo is very active and currently, it has over 80000 stars.

Since it’s built by Facebook, again there are countless numbers of resources to learn. So, the documentation is a great place to start. If you want free video, check Jeffrey Ways course on React here.

Angular

AngularJS is also on the list of top JavaScript frameworks. The AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google. Plus, a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. So, AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment. Also, the initial release was 2010. Though it has different versions, like angular 2, angular 4, they are almost the same. So, currently, it has over 57000+ star on Github.

Importantly, it has lots of resources for learning. If you want to learn it, start with W3schools. The second resource is learn-angular.org. Finally, if you like video, search on youtube. We could not find any complete free course.

jQuery

From a very long time, jQuery has been the most used JavaScript framework. Despite all other great frameworks nowadays, you can’t escape learning jQuery. It is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Also, it is free, open-source software using the permissive MIT License. There are many JavaScript libraries that are based on jQuery. Therefore, you can’t stop learning. The initial release was 2006. Currently, it has over 47 stars on Github.

In Addition, since 2006, there have been countless numbers of blog articles and tutorials about jQuery. The best place to learn step by step is W3Schools.com. It’s not that complicated. very easy to learn and understandable even if you read the doc.

Redux

Redux is an open-source JavaScript library designed for managing application state. It is primarily (but not mandatorily) used together with React. Besides, Redux is a predictable state container for JavaScript apps. It helps developers write applications that behave consistently, run in different environments and are easy to test. Well, you may not need Redux. Before start using it, the article why you may not need it. But, definitely, it’s a great framework.

Want to learn about it? The documentation is a great place. Besides, the creator of Redux has a video tutorial as well. You can find it here.

Conclusion

So, we hope the article has been informative for you. Also, if you have any questions or suggestions about these top 5 best JavaScript Frameworks, feel free to comment below.

The post Top 5 Best JavaScript Frameworks of all Time appeared first on TECHNIG.

As a programmer, you are visiting Github almost every day. Github is like a sword for developers. Also, you can’t make big scale applications without Github. Besides, Github is the home to all open-source projects. So, in this article, we collected the top 12 best GitHub repositories for developers. These git repositories are open-source and every programmer must star.

Best Github Repositories Every Programmer Must Star

Below are the lists of best Github repositories that you should know:

1. Every Programmer Should Know
2. FreeCodeCamp
3. Free Programming Books
4. Coding Interview University
5. FreeCodeCamp Guide
6. Security Guide for Developers
7. Tech Interview Handbook
8. Engineering Manager Resources
9. Awesome First PR Opportunities
10. Awesome Hacking Resources
11. TensorFlow
12. Public APIs Build Status

The above list is a general list for all programmers. Not specific developer.

Every Programmer Should Know

The Every Programmer Should Know git repository is a collection of technical things every software developer should know. Also, these are resources I can recommend to every programmer regardless of their skill level or tech stack. So, according to them, you don’t need to know all of that by heart to be a programmer. But knowing the stuff will help you become better.

FreeCodeCamp

The freeCodeCamp is an open source codebase and curriculum. Also, freeCodeCamp is a friendly open source community where you learn to code and help nonprofits. Besides, they have a great forum with a great community. Further, you can get certifications after passing a few sections. So, a great place to learn and improve your coding skill.

Free Programming Books

List of free e-books for programmers. This list was originally on StackOverflow. Then, The list was moved to GitHub by Victor Felder for collaborative updating and maintenance. Also, it grew to become one of the most popular repositories on Github. With over 80,000 stars, over 4000 commits, over 800 contributors, and over 20,000 forks, it’s a top repository. Further, the repo is now administered by the Free Ebook Foundation, a not-for-profit organization.

Coding Interview University

The best place to for coding interview questions. So, if you have many years of software/web development experience, note that large software companies like Google, Amazon, Facebook and Microsoft view software engineering as different from software/web development. They require computer science knowledge. The items listed in this repository will prepare you well for in an interview at just about any software company, including the giants: Amazon, Facebook, Google or Microsoft.

FreeCodeCamp Guide

The freeCodeCamp community is building a massive, searchable “Guide.” Also, this reference tool will eventually include thousands of articles that cover all areas of development, design, and data science – all written to be easily understood by people new to coding. So, If you want to use FreeCodeCamp, this is a great guide and sub-domain of FreeCodeCamp.

Security Guide for Developers

A practical security guide for web developers. Security issues happen for two reasons; developers who have just started and cannot really tell a difference between using MD5 or crypt. And developers who know stuff but forget/ignore them. So, before production of your applications, make sure you check this guide.

Tech Interview Handbook

It’s the algorithms, front end and behavioral content for rocking your coding interview. Also, it has interview cheat-sheet. Besides, Carefully curated content to help you ace your next technical interview. So, this repository has practical content that covers all phases of a technical interview; from applying for a job to passing the interviews to offer negotiation. Furthermore, technically competent candidates might still find the non-technical content helpful as well.

Engineering Manager Resources

Though it’s not a popular repository, a great one to check-out. It’s a list of engineering manager resource links. So, it’s lists of books, videos, podcasts, and articles. Also, if you have any good thing to share, feel free to contribute to this repository.

Awesome First PR Opportunities

A list of awesome beginners-friendly projects. No matter which programming language you are using, you can find a staring project here. So, these repository is all about beginner projects. Also, it’s the resource to some other great repositories.

Awesome Hacking Resources

A collection of hacking/penetration testing resources to make you better! So as a programmer, you should know a little about hacking as well. It’s not only about hacking, but security. Also, you will learn how people hack and how you can secure.

TensorFlow

TensorFlow is an open source software library for numerical computation using data flow graphs. Also, it was originally developed by researchers and engineers working on the Google Brain team within Google’s Machine Intelligence Research organization for the purposes of conducting machine learning and deep neural networks research. So, this project is available for python language.

Public APIs Build Status

A collective list of public JSON APIs for use in web development. Using API is always a little tricky. So, this repository will make your life easy. Also, you can contribute to this project. Further, this API list is not a marketing tool, but a tool to help the community build applications and use free, public APIs quickly and easily. Pull requests that are identified as marketing attempts will not be accepted.

Conclusion

So, we come to the end. We hope you enjoyed the article. Of course, there are many other best Github repositories that should know about. We just covered these top 12. If you have any questions or suggestion, feel free to comment below or ask on our forum.

The post 12 Best Gitbub Repositories Every Programmer Must Star appeared first on TECHNIG.

Practice, practice, and learn to code faster. Join online coding courses for achieving online web development degree or become an expert web developer faster. These steps you need to become a web developer to work from home and earn money online. All you need to find out an online web development platform to practice and learn to code faster. Here are the top 7 best web development online practice platform you need as a web developer. Also, if you are a beginner programmer, these websites are for you. Besides, these computer programming websites are for beginners and the best online sites to learn to code. So, our top 7 best coding practice websites will help you choose the best website faster and wiser.

Best Coding Practice Websites

Below are the lists of top 7 best coding practice websites.

1. HackerRank
2. LeetCode
3. Codechef
4. HackerEarth
5. Codeforces
6. Spoj
7. Interview bit

These websites are ordered based on popularity among developers and programmers.

1. HackerRank

It has over 2 million developers who are solving code challenges. So, it’s HackerRank, and it is a technology company that focuses on competitive programming challenges for both consumers and businesses. Also, developers compete by trying to program according to provided specifications. Furthermore, HackerRank’s programming challenges can be solved in a variety of different programming languages including Java, C++, PHP, Python, SQL. So, in 2014, HackerRank for work had over 1,000 paying customers for their subscription service

2. LeetCode

The number second best website to practice coding is LeetCode. Also, they provide you with top interview questions. Besides, they have a great discuss community which is an excellent place for learning. Moreover, their platform currently 11 languages: C, C++, Java, Python, C#, JavaScript, Ruby, Swift, Go, Bash, MySQL. So, you can read, code, and discuss it here.

3. Codechef

The CodeChef is a non-profit educational initiative of Directi. Directi is an IT services company founded in 1998. So, Codechef is a global competitive programming platform which supports over 50 programming languages. Also, it has a large community of programmers that helps students and professionals test and improve their coding skills.

4. HackerEarth

The HackerEarth is a startup technology company based in Bangalore, India that provides recruitment solutions. So, the way it works is like this. There are a practice list of problems that you can choose any. Then write the solution for that, and you can compile it directly there. Then you can submit it for review to judges.

5. Codeforces

The Codeforces is a Russian website dedicated to competitive programming. Also, it was created and is maintained by a group of competing programmers from Saratov State University led by Mikhail Mirzayanov. Besides, you can participate in the short (2-hours) contests, so-called “Codeforces Rounds,” held about once a week. So, it’s social-networking through the use of internal public blogs.

6. Spoj

SPOJ stands for “Sphere Online Judge” which is an online judge system. Further, this website has over 315,000 registered users and over 20,000 problems. Also, apart from the English language, SPOJ also offers its content in Polish, Portuguese and Vietnamese languages. So, the archived issues in SPOJ are divided into five categories: Classical, Challenge, Partial, Tutorial, Riddle.

7. Interview bit

As the name suggests, it’s interview and reference to top companies. Also, you can learn how to design scalable systems by practising on commonly asked questions in system design interviews. Besides, it’s an excellent platform for mastering programming skills. So, if you are wondering how to prepare for programming interviews, InterviewBit is the place to be.

Conclusion

All in all, many other websites offer the same services, but these are the most wanted by programmers. We hope it has been informative for you. Also, if you have any questions or suggestions, you join our forum.

The post Top 7 Coding Practice Websites For Web Developers appeared first on TECHNIG.

WYSIWYG stands for “What you see is what you get“. So, you might have seen it before. If you ever wrote an article on WordPress or any other website, then you have used it. It’s the editor where you can stylize your text instantly with tools. Besides, it makes your life comfortable as a usual writer. So, if you are a developer and want to add the WYSIWYG editor for your website, we have the list of top 7 best WYSIWYG HTML Editor with JavaScript.

Best WYSIWYG HTML Editor

Below are the lists of top 7 best WYSIWYG HTML editors. Also, they are the most popular ones and free on the web.

1. CKEditor
2. TinyMCE
3. Summernote
4. Froala Editor
5. Redactor
6. MediumEditor
7. Bootstrap-wysihtml5

This list is ordered based on rich features, popularity, and ease of use.

CKEditor

This one is my favourite. The CKEditor is the fastest and easiest way to integrate a rich text editor into your application. So, it’s a very interactive and flexible editor. Also, it’s open-source and free. Moreover, it has three different types: Classic editor, Inline editor, and Balloon editor. You can read more about it on its documentation.

TinyMCE

For a decade TinyMCE has been an open-source project. Licensed under LGPL, everyone at TinyMCE remains as committed to its open-source future as the day their team started. So, If open source matters to you too, you can contribute to this WYSIWYG editor. Also, it has very clean and comprehensive documentation. So, you can configure it in almost less than 5 minutes.

Summernote

The Summernote is yet another great best WYSIWYG HTML editor. It’s super simple WYSIWYG editor on Bootstrap. Also,  Summernote is a JavaScript library. So, it’s fast, free, open-source and easy to use. Besides, you can contribute to this project if you are a developer. They have a very active team of developer who brings frequent updates.

Froala Editor

The Froala Editor is a lightweight WYSIWYG HTML Editor written in JavaScript that enables rich text editing capabilities for your applications. Also, It has complete documentation, specially designed framework plugins and tons of examples make it easy to integrate. Besides, it’s very nice and creatively design.

Redactor

If you are looking for a simple, fewer features and fast WYSIWYG editor, Redactor is your best choice. Also, it has a smooth and clean design with limitless flexibility and extensibility. Besides, it has also a simple and super-efficient API and amazing user experience.

MediumEditor

Looking for more simple and small size WYSIWYG editor? MediumEditor is pure JavaScript and 28kB gzipped. By default, it comes with basic features, but you can extend it with plug-ins. So, a very fast, easy-to-use and flexible editor.

Bootstrap-wysihtml5

Finally, if you are a bootstrap user, this one is made especially for bootstrap. So, it’s a JavaScript plugin that makes it easy to create simple, beautiful WYSIWYG editors with the help of wysihtml5 and Twitter Bootstrap. Besides, it uses bower for client-side dependency management.

Conclusion

All in all, there are many other JavaScript and jQuery plug-ins, but most of them are out of data. So, the list above was the top among them. If you know any WYSIWYG Editor better than them, feel free to share with us.

The post Top 7 Best WYSIWYG HTML Editor with JavaScript appeared first on TECHNIG.

Laravel Mix is a powerful tool and NPM package. So, using Laravel Mix, you can compile sass, scss files, Vuejs files and ES6 features. Also, it’s fast and easy to start using. Besides, you can easily customizer Laravel Mix for your project. So, in this tutorial, you’ll learn how to use Laravel Mix without Laravel project. The latest version of Laravel projects has pre-install Laravel Mix.

Use Laravel Mix without Laravel Step by Step

We are going to do everything step by step on how you can use Laravel Mix without Laravel, so you will not miss anything.

Requirements:

We require the following criteria. If you want to follow the tutorial to make sure you have the NPM and Nodejs installed on your system. If you don’t have installed those, then go to nodejs.org, download and install. It will not take more than 2 minutes. Besides, you must have basic knowledge of NPM usage.

1. Create a Project

Simply, create a folder anywhere on your computer. Then run the following command to initialize NPM files.

npm init -y

The command creates a package.Json file in your folder with simple boilerplate. Then, open your project in your favorite text editor.

2. Install NPM Packages

Now, let’s install a few NPM package plus Laravel Mix. So, we’re going to install all of them at once. To do so, list your packages name in your package.json file.

So, open your package.json file and add the following code. We will install a few essential packages.

{
  "name": "laravel-mix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "laravel-mix": "^1.0",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "vue": "^2.1.10"
  },

  "keywords": [],
  "author": "",
  "license": "ISC"
}

So, your package.json file should look like the above. The devDependencies part is the list of packages we want to install. So, run now run the following command in your command line to download the packages.

npm install

It will take a while to install the packages, so be patient. So, after installing completed, continue the next step.

3. Configure the Laravel Mix Files

After installing the packages, now you can start creating Laravel mix files.

You go to “node_modules/laravel-mix/setup/webpack.mix.js” and copy the webpack.mix.js file to the root directory of your project. Also, you can create the file yourself and add the following code inside.

webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist/')
   .sass('src/app.scss', 'dist/');

The above just require Laravel mix, then look in “src/app.js” and compile to “dist/” folder. So, we need the create those files.

4. Add Code to Compile

Now let’s add some code our app.js file to compile and test if everything is working.

So, add the following code in your app.js file. It’s just for the demo, of course, you can add any code you want.

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

The code will add jQuery and bootstrap file.

Now, open your command line and run the following code.

npm run production

The production and other command list are written in the package.Json file.

For me, the compilation starts and go till 95%. Then it stopped.

It’s not going further. So, there must be a problem.

5. How to Fix Laravel Mix 95% emitting Stop Problem

So, let’s fix it. Before doing that, you know know what’s the problem. Thus, it can’t find the public folder or where to compile the files. Here is how you fix it.

Open your webpack.mix.js file and add the following code right after you require Laravel Mix.

mix.options({
    publicPath: 'dist'
})

Now, terminate the emitting process by pressing Ctrl + C two times and re-run the production command. It should work now.

Conclusion

We hope this article has been informative for you and you enjoyed reading. So, it’ how you can use Laravel Mix without Laravel. Further, we have a forum where you can ask any types of questions and get instant answers. So, feel free to join us.

The post How to Use Laravel Mix without Laravel Step by Step appeared first on TECHNIG.

Vuejs is by far the most popular JavaScript framework nowadays. So, if you want to build an appealing and brilliant web application, definitely you should learn Vue. Also, it’s becoming more popular day by day. The job opportunities are a lot for this framework. Besides, they have a community of great and active people who can help you in anytime. So, Vue-CLI is one of the many features of Vue. One of the most common problems that beginners face is how to install and configure it. Furthermore, you will learn how to solve Vue command not found error step by step with an example.

1. What’s Vue-CLI?

In the first place, you must know what’s Vue-CLI? Shortly, Vue-CLI let you install Vue applications or templates with the command line. For instance, when you install Laravel, you use a command line, so, the same case with Vue.

2. How to install Vue-CLI

To install Vue-CLI, you must have Nodejs and Git installed on your system. So, if you don’t have Nodejs, just go to their website and download the current version.

Install Vue-CLI with the following command

npm install -g vue-cli

It will install Vue-CLI globally, which according to the documentation when you install any NPM package globally, you can access it through the command line.

Open your command line and run the following command.

vue init webpack my-project

The above command normally installs a demo project form Webpack, but you should get an error.

Or your error might be list Vue command not found.

How to Solve Vue command not found

In order to solve this problem, you should add the Vue path to your environment variable manually. So, here is how you can do that.

• Press Win + R
• Type “control sysdm.cpl,,3” and press enter
• Press N to open environment variables.
• Select the path and click Edit.
• Click new to add a new path.
• Paste the path to NPM folder in your AppData.
• Click OK for all windows and you are done.

NPM path is normally in the following folder. Just change your username on your system.

C:\Users\UserName\AppData\Roaming\npm

Your show hidden files option must be on the view this files.

You are done now. So, this time if you open the command line and type the following command, it should install the Webpack demo template in the current directory.

vue init webpack my-project

After installing, you can run the following command to open the project in the browser.

npm run dev

So, it will run a server in the following URL

http://localhost:8080/#/

Conclusion

All in all, it was that easy. Besides learning what’s Vue-CLI, you learned how to install it from the command line. So, if you have any questions or problems related to how to solve Vue command not found, feel free to comment it below.

The post How to Solve vue Command not found on Windows? appeared first on TECHNIG.

If you are a developer, you want to know which programming languages will rank in the next year or future. Specifically, you are curious about your favorite language. This article will list the top 10 programming languages 2018 that will rank. We select these languages based on popularity and usability.

Top 10 Programming Languages 2018

If you want a quick overview, here is the full list. For more details read the explanation that why these languages are ranking. The underlined text indicates the reason why it’s ranking and so popular.

1. JavaScript
2. Python
3. Java
4. C++
5. C
6. Swift
7. PHP
8. C#
9. Go
10. R

1. JavaScript

JavaScript is the number one programming language that will rank in 2018. It’s a programming language that is run by most modern browsers. It supports object-oriented programming and procedural programming. Knowadays, you can use JavaScript to build mobile app, web app and even desktop applications. ES6 or ES2015 is the latest version of this language. The ES6 features are amazing and blow your mind.

2. Python

Python is one of the most powerful programming languages of all the time. It’s a widely used high-level programming language for general-purpose programming, created by Guido van Rossum. The applications like Youtube, Dropbox and Google is based on this language. If you want to work for Google, This language is what you should focus on.

3. Java

Java’s popularity is because of Android. Android is the most popular mobile OS and open-source. Java is a programming language and computing platform first released by Sun Microsystems in 1995. It’s a general-purpose programming language that is concurrent, class-based, object-oriented and specifically designed to have as few implementation dependencies as possible.

4. C++

Most other top programming languages are based on C++. They have copied the style and structure from C++. For instance, Java, C#, JavaScript and more. C++ is a general-purpose object-oriented programming (OOP) language, developed by Bjarne Stroustrup. You can use this powerful language to build applications that run on CPU, build mobile apps, games, and desktop application.

5. C

C is taught still in most popular universities in the world. It’s not a high-level programming language, but people learn it because it makes learning other languages easier. High-level languages like Java, C++, C# are almost similar. It’s like the older version of C++. This language is used a lot in embedded hardware programming where resources are scarce. Linux kernel is written in C.

6. Swift

Apple is by far one of the top companies in technology. Swift is the primary language for macOS, iOS, watchOS, and tvOS. It’s  is a general-purpose, multi-paradigm, compiled programming language developed by Apple Inc.

7. PHP

Becuase web programming is popular category among other desktops, mobile, and CPU, PHP remains the most popular server side programming language. It’s a general-purpose scripting language that is especially suited to server-side web development, in which case PHP runs on a web server. The application like WordPress, Joomla, Drupal, and Facebook is written in PHP.

8. C#

Microsoft, of course, the biggest company in the technology category. Their primary language is C#. It’s used for developing desktop, mobile, and games in Unity. It’s a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.

9. Go

Go (often referred to as golang) is a free and open source programming language created at Google in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson. It’s compiled and has features such as garbage collection, memory safety, and limited structural typing. Go is good for Stand-alone command-line apps or scripts Network and Web servers. It’s not good for desktop, system-level programming, and  GUI-based apps

10. R

R is a programming language and software environment for statistical analysis, graphics representation, and reporting. R is a very flexible tool for doing a mathematical & statistical analysis. If you are dealing with big data, R is the language you must use. It’s easily extendable via packages. 

Conclusion

There we are. It was the list of top 10 programming languages. If you have any question or suggestion, feel free to share with us in the comment below

The post Top 10 Programming Languages that will Rank in 2018 appeared first on TECHNIG.