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.

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.

As a web designer, you always look for the best CSS frameworks to build your project. There are many CSS frameworks, but most of them don’t have the features that you want. Besides, some of them do not have proper documentation or proper coding. Also, some of them are too heavy. Therefore, we have collected seven inspiring and creatively design CSS framework. These frameworks have a clean design, code, and documentation. Additionally, they are lightweight CSS frameworks. So, you can use them for your next project and create something spectacular.

7 Inspiring CSS Frameworks

In a nutshell, below are the seven the best CSS framework you don’t know about yet.

1. Spectre.css
2. Tailwind CSS
3. Primer
4. Bulma
5. Vuetify
6. UIkit
7. Pure CSS

These frameworks are not popular, but they have amazing features.

Spectre.css

A very clean and small CSS framework. Spectre.css is a lightweight, responsive and contemporary CSS framework. Besides, it’s open-source and completely free. Also, it is a side project based on years of CSS development work on a massive web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with SASS/SCSS compiler.

The features are a lot. Besides, the design is very clean and user-friendly.

Browser support:

Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets.

• Chrome (LAST 4)
• Microsoft Edge (LAST 4)
• Firefox (EXTENDED SUPPORT RELEASE)
• Safari (LAST 4)
• Opera (LAST 4)
• Internet Explorer 10+

This framework support almost most modern browsers.

Tailwind CSS

A little different framework. As the documentation says, ” Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it’s not a UI kit.”. Also, it doesn’t have built-in UI components. On the flip side, it also has no opinion about how your site should look and doesn’t impose design decisions that you have to fight to undo.

If you’re looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you. But if you want a vast head start implementing a custom design with its own identity, Tailwind might be just what you’re looking for.

How does it work then?

It’s pretty simple. It has a lot of classes that you can call utility. You combine those classes and make something fresh like navigation or button.

Primercss

Do you like Github design? Well, this framework by Github team with Github design styles. Primer is the basecoat of GitHub, made by nerds just like you who share a passion for HTML and CSS. Besides, it’s open-source and free under MIT license. Also, it Includes a small Gruntfile for compiling our SCSS, Autoprefixer for vendor prefixes, and Parker for CSS stats.

It has everything and every feature you see on Github.

Bulma

Bulma is a free and open-source CSS framework based on Flexbox. If you know about Flexbox in CSS3, you see how beautiful it is. So, Bulma is a clean, fast, creative and inspiring CSS Framework.  It’s an alternative to Bootstrap Framework.

There is no JavaScript included in Bulma. People want to use their own JS implementation. Therefore, Bulma can be considered “environment agnostic”: it’s just the style layer on top of the logic.

Browser Support

Bulma uses Autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:

• Chrome
• Edge
• Firefox
• Opera
• Safari

Internet Explorer (10+) is only partially supported since it uses CSS3 features.

Vuetify

This one doesn’t look like a CSS framework, but it does the same thing that other CSS frameworks do. If you know about Vuejs, this CSS framework seems familiar to you. Additionally, it requires Vuejs knowledge. Also, Vuetify helped you create a fantastic application. The Vuetify is built from the ground up to be semantic. Easy to learn.

How does it work?

It’s effortless to use. The way it works is like this; Vuetify is made of components. Those components are like custom HTML tags. Then, you use those tags and give some attributes. It will provide you with a sweet and beautiful element.

GETUIkit

If you are looking for a lightweight and modular front-end framework for developing fast and powerful web interfaces, UIkit is for you. Besides, the design is so clean and creative. It’s like IOS design concept. So, if you want to develop a mobile application, it’s an excellent choice. It’s not the UIkit by Apple developer for IOS; it’s just a web designing framework. Also, it has clear documentation, and you start learning and using it now. You don’t need any extra knowledge to get started.

PureCSS

It’s a set of small, responsive CSS modules that you can use in every web project. Also, Pure is ridiculously only to use a subset of these modules and tiny. The entire collection of modules clocks in at 3.8KB minified and gzipped. Besides, it’s crafted with mobile devices in mind, it was necessary for us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

If you are developing a custom web application, it’s an excellent starter framework. Because the size is too small and you can easily customise it for your self.

Conclusion

All in all, there are many other significant and popular CSS frameworks on the web, but these were also worth checking out. Most of this framework function as a great framework, it’s because no-one has used them and talked about them. Finally, we hope it has been informative for you.

The post 7 Inspiring CSS Frameworks You Don’t Know About appeared first on TECHNIG.

United State is the land of technology. So, we expect a lot of job opportunities for software engineers. Silicon Valley is one of the examples. Also, top software engineering companies are located in the USA. Besides, top universities and colleges make people go to this land for studies. So, you are here to know which cities are best for software engineers. Also, which city give highest software engineer salary. We have collected the top cities that pay the highest amount of salary in the USA. So, we hope it helps you choose where to live as a software developer.

Highest Software Engineer Salary Cities

Below are the lists of highest software engineer salary cities.

• San Jose, $129,485
• San Francisco, $129,273
• Seattle, $119,562
• New York City, $110,232
• Los Angeles, $105,590
• San Diego, $103,823
• Boston, $103,363
• Washington, DC, $102,764
• Chicago, $94,055

In a nutshell, above are the top cities that pay the highest salary.

Software Engineer Salaries in New York City, NY, US

The most populous city in the United States. New York City is also the most densely populated major city in the United States. Also, it has the world’s second-busiest city airport system by passenger traffic. So, the average salary for a Software Engineer is $110,232 in New York City, NY. Salaries estimates based on 21,120 salaries submitted anonymously to Glassdoor by Software Engineer employees in New York City, NY. Besides, Google developers salary is between $70k to $237k. 

Software Engineer Salaries in San Francisco, CA, US

A popular tourist destination. Also, the headquarters of five major banking institutions and various other companies. It’s known for its year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. So, the average salary for a Software Engineer is $129,273 in San Francisco, CA. Also, software engineer gets $99k to $159k. Besides, Facebook developers average salary is $137,390 per year. They get paid between $86k to $202k. Further, Google engineers get the average of $111,058 per year. And Twitter developers also get between $92k to $174k. 

Software Engineer Salaries in Chicago, IL, US

Chicago is the fifth-most-populous North American city with population 2,720,546. Also, Chicago is considered one of the most important business centers in the world. Besides, in 2016, Chicago hosted a record 54 million domestic and international visitors. So, the average salary for a Software Engineer is $94,055 in Chicago. The salary is between $71k to $118k. 

Software Engineer Salaries in Los Angeles, CA, US

Los Angeles is a sprawling Southern California city. Also, Los Angeles covers an area of about 469 square miles. Moreover, it’s known for the Mediterranean climate, ethnic diversity, and sprawling metropolis. So, the average salary for a Software Engineer is $105,590 in Los Angeles, CA. Also, Google software engineers get $70k to $195k. So, the average salary for them is $118,856 per year. And Yahoo engineers get $60k to $156k. The average salary is  $103,906 per year.

Software Engineer Salaries in Washington, DC, US

The Capital of the United States of America. So, Washington had an estimated population of 681,170 as of July 2016. Also, Named in honor of President George Washington, the City of Washington was founded in 1791 to serve as the new national capital. And,  it’s also home to iconic museums and performing-arts venues such as the Kennedy Center. So, the average salary for a Software Engineer is $102,764 in Washington, DC. Also, the minimum and maximum amount of salaries are between $78k  to $129k.

Conclusion

All in all, software engineer salary is great in the USA. So, it’s all because United State is the land of technology and where top software companies were born. The companies like Microsoft, Apple, Google, and Amazon. I hope it has been informative for you. So, if you have any questions, feel free to comment below or ask on our forum.

The post Top USA Cities with Highest Software Engineer Salary appeared first on TECHNIG.

Being software developer is cool. But becoming a software developer is not easy. So, if you want to become a software engineer, you must work hard persistently for many years. Also, you must be patient about what you’re doing. Besides, software engineering companies pay a great amount of salary for their best developers. But, top software engineering companies hire best, not good developers. So, you must be wise and creative. Further, we have collected the top highest software developer salary in Australia based on cities. Also, we will cover other countries in future.

Highest Software Developer Salary Cities

The list below is the highest software developer salary in Australia based on cities.

• Sydney AU$54,321 to AU$119,226.
• Melbourne  AU$57k to AU$106k
• Perth average AU$77,999
• Canberra  AU$46,528 to AU$148,994.
• Adelaide  AU$52,548 to  AU$107,699.

So, it’s what companies pay a software developer or software engineers. besides, you can talk freelance projects as well.

Software Developer Salaries in Sydney.

Sydney is a business city. So, we must expect the highest paying jobs for software developers. So, the average salary for a Software Developer is AU$88,150 in Sydney, Australia. The minimum amount of salary for a software developer in Sydney is AU$68k and the maximum is AU$121k yearly. Also, this data is based on 120 salaries submitted anonymously to Glassdoor by Software Developer employees in Sydney, Australia. And, according to Payscale, it’s between AU$54,321 to AU$119,226.

Software Developer Salaries in Melbourne.

Melbourne is the coastal capital of the southeastern Australian state of Victoria. Also, Melbourne was the initial capital following the 1901 Federation of Australia. So, in 1927, the national government was moved to the city of Canberra, which continues to serve as the national capital. So, the average salary for a Software Developer is AU$78,360 in Melbourne, Australia. Besides, the paying salaries are between AU$57k to AU$106k per year. So, compared to Sydney, it’s a little low.

Software Developer Salaries in Perth.

Perth, capital of Western Australia. Also, the fourth-most-populous metropolitan / urban area in Australia. Besides, Perth is the capital of Western Australia with just under two million people. Further, the most beautiful cities in Australia. So, a Software Engineer in Perth, Western Australia earns an average salary of AU$77,999 per year. Also, the national average Software Developer salary is AU$82,000.

Software Developer Salaries in Canberra.

Canberra is the capital city of Australia. With a population of 403,468. Also, it is Australia’s largest inland city and the eighth-largest city overall. So, the average salary for a Software Engineer in Canberra, Australian Capital Territory is $74,927 per year. Besides, the minimum and maximum amount of salaries are between AU$46,528 to AU$148,994. 

Software Developer Salaries in Adelaide.

Adelaide is South Australia’s cosmopolitan coastal capital. Also, Adelaide is the fifth-most-populous metropolitan / urban area in Australia. Besides, Adelaide was established as a planned colony of free immigrants. So, a Software Engineer in Adelaide, South Australia earns an average salary of AU$68,537 per year. Python, C, Linux, Java, and C++ are the most popular languages to know. The total salaries are between AU$52,548 to  AU$107,699.

Conclusion

Software development is a great job. Almost every company needs developers. Also, did you know that most of the software developers have 1-4 years of experiences? So, if you start now and work a little harder, you will become a software engineer in the next 5 years. All in all, it was highest software developer salary based on cities of Australia. So, if you have any questions, feel free to comment below or ask on our forum.

The post Highest Australian Software Developer Salary based on Cities 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.

As a programmer and developer, you need the best editor with ease of use and useful features. So, we have collected the top 7 best free code editors for programmers. These editors are the most popular and most wanted among developers and web designers. While most of these editors are free but they do more than premium editors.

7 Best Free Code Editors

Below is the list of best free code editors:

1. Visual Studio Code
2. Sublime Text 3
3. Atom
4. Brackets
5. Vim
6. Notepad++
7. Coda

1. Visual Studio Code

The number one best and free code editor. So, it’s by Microsoft, free and open source. Besides VS Code is a new type of tool that combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle. Besides, the code provides comprehensive editing and debugging support, an extensibility model, and lightweight integration with existing tools. Furthermore, it’s cross-platform, and the team behind it brings monthly updates with new features and bug fixes. It’s like an IDE.

2. Sublime Text 3

Favorite code editor of all developers. It’s the fastest and lightest code editor of all the time. It’s a proprietary cross-platform source code editor appealing UI interface. Further, Sublime natively supports many programming languages and markup languages, and functions can be added by users with plugins, typically community-built and maintained under free-software licenses. So, if you want a fast editor, it’s the best choice.

3. Atom

Built with HTML5 technology, open source, free and cross-platform. Also, it’s easy to customise and style Atom, and you can tweak the look and feel of your UI with CSS/Less and add major features with HTML and JavaScript. Additionally, Atom is a desktop application built with HTML, JavaScript, CSS, and Node.js integration. It runs on Electron, a framework for developing cross-platform apps using web technologies.

4.Brackets

A modern, open source text editor that understands web design. Besides, it’s by Adobe and an advanced text editor that makes it easy to design in the browser, crafted from the ground up for web designers and front-end developers. Also, Brackets is an open-source project, supported by an active and passionate community. It’s made by other web developers like you

5.Vim

A very extendable and fast code editor. Although Vim originally released for the Amiga, it has since been developed to be cross-platform, supporting many other platforms. Beyond that, in 2006, it was voted the most popular editor amongst Linux Journal readers. After that, in 2015 the Stack Overflow developer survey found it to be the third most popular text editor. So, it’s a bit hard to start getting comfortable with this editor, but once you learn it, you can grow incredibly fast.

6. Notepad++

Windows user knows it well. So, it’s Notepad++ which distributed as free software, at first, the project hosted on SourceForge.net, from where it has been downloaded over 28 million times. Further, It’s written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size.

7. Coda

The last but not least, it’s Coda and originally built for Mac users. Coda is a commercial and proprietary web development application for macOS by Panic. So, Coda released on April 23, 200. Apple design award winner in 2007 for best User Experience

Conclusion

As we mentioned, most of these editors are free, and they do more than premium software. We hope it has been informative for you. Feel free to share your idea below about your favourite editors.

The post Top 7 Best Free Code Editors For Programmers appeared first on TECHNIG.

Animation mulitple object with GreenSock will help you power up your animation skill with GreenSock. In this part of the GreenSock tutorial series, we are goint to focus on GreenSock multiple objects animation features. We will create an amazing animated text with GreenSock. We assume you have the basic knowledge of using GreenSock technology. If not, please talk a look at the basic tutorials here at technig and than continue to this article.

Here is the final project we are going to build together from scratch.

[codepen_embed height=”362″ theme_id=”dark” slug_hash=”WxrMWb” default_tab=”result” user=”Hujjat”]See the Pen GreenSock Practice #6 multiple object animation by Hujjat Nazari (@Hujjat) on CodePen.[/codepen_embed]

GreenSock Multiple Objects Animation

To animate multiple object, you have two ways. Either use TweenLight class make apply separate Tweens to every object or use TweenMax class and automate the process. We are going to show you both ways. At the end you learn both ways.

Using TweenLight

If you use TweenLight, you will write more code. But this more code will give you more flexibility to make more amazing animations. Here, You select every object and apply different animation properties. Here an example.

Imagine if you want to animate a sets of alphabet letters.

<div id="teching">
  <div class="letter t">T</div>
  <div class="letter e">E</div>
  <div class="letter c">C</div>
  <div class="letter h">H</div>
  <div class="letter n">N</div>
  <div class="letter i">I</div>
  <div class="letter g">G</div>
</div>

Now, if I want to animate each and every letter, I must select and apply animations individually. Here is the example code for above html markup.

var t = $('.letter.t');
var e = $('.letter.e');
var c = $('.letter.c');
var h = $('.letter.h');
var n = $('.letter.n');
var i = $('.letter.i');
var g = $('.letter.g');

TweenLite.from(t, 2, {y:"200",opacity:0.1});
TweenLite.from(e, 2, {y:"-200"});
TweenLite.from(c, 2, {y:"200"});
TweenLite.from(h, 2, {y:"-200"});
TweenLite.from(n, 2, {y:"200"});
TweenLite.from(i, 2, {y:"-200"});
TweenLite.from(g, 2, {y:"200"});

The good thing about this method is here that, you can add different property for each object. If you make a complex animation, you will definitely need to use this method.

Using TweenMax

Using TweenMax class help you make the animation easier. With less code, you can write do more thins done. The cons of using this method is that you can’t apply different property separately for each object. If you want to give the same animation property for all object, this method is going to for you.

We assume you have the above html markup. Here is how we write the JavaScript code.

var letters = $('.letter').toArray();

TweenMax.staggerFrom(letters,1,{
  y: '-110',
  ease: Bounce.easeOut
},0.18);

As we said in introduction tutorial, TweenMax have some more feature and functionality. The staggerFrom function will talk the fourth argument.

This argument will specify the timing in which animation repeat on the next object. It will repeat those two property for every single letter after 0.18 second. Don’t forget that we have passed an array of object to straggerFrom function.

Here is the final demo.

[codepen_embed height=”331″ theme_id=”dark” slug_hash=”WxrMWb” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/WxrMWb/’>GreenSock Practice #6 multiple object animation</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

GreenSock multiple objects animation will help you build powerful yet flexible animations. We hope you have learned something new. If you any question, feel free to comment it bellow. 🙂

The post How to Animating Multiple Objects with GreenSock? appeared first on TECHNIG.

Sublime text the most liked text editor for web designer and developers. You might have seen pro developers using sublime text with beautiful layout and theme design. Today we will guide you through installing and configure some essential packages to customize sublime text and make it attractive and amazing.

Pre-requirement For Customization

Mainly, there are two ways to install packages for sublime text. One through package installer and the second is to install manually. In this tutorial, we will use package installer. If you are brand new to package installer, here is how you use it.

Package Installer is simple a way to add plugin or new feature to sublime text. By default, you can not use it in sublime text. You have to install it. It’s pretty simple. Just to go package controller site and install package controller.

Depending on your sublime text version, copy the code they give you and open sublime text. Go to view > show console, past the code and press enter. It will install package controller. You will see two new options under the preferences. Package settings and Package controller.

We will use package control for installing new packages. Click on the option and you will see a pop-op window. Type install package and enter. Wait until the new window open. Now you can install any package or theme you want.

Customize Sublime Text, Installing theme

Material design and material theme is one of the most liked theme for sublime text and other text editors. You might have seen other pro developers who are using this them. Here is how you find it.

Where you install packages, search for Material theme and install. After installation, restart the Sublime text. Now you must can customize sublime text for current user.

Go to Preferences > settings – user.

You will see some default options. Customize it they way you want. Here is a basic customization options for material theme. Just copy and replace everything and save it.

{
	"bold_folder_labels": false,
	"color_scheme": "Packages/Colorsublime - Themes/Bittersweet.tmTheme",
	"font_size": 14,
	"ignored_packages":
	[
		"Vintage"
	],
	"theme": "Material Brogrammer.sublime-theme"
}

After saving the file, you will see the material theme effected.

For more options, check the documentation for material theme here.

Install Color Sublime

Color Sublime is one of other great package for sublime text. It will help you customize sublime text color. Search for sublime colorsublime package and install.

To use color sublime, write colorsublime in package control instead of install package. And than you can install any theme color you want. If not sure search for Facebook, or bitterweet that looks good to me.

Conclusion

Now you know how to install package and themes. Feel free to search for other packages that you might like and install theme. I hope it has been informative for you. If you have any good package or question, feel free to share it on the comment bellow. 🙂

The post How to Make Sublime Text 3 More attractive with best Packages and Themes appeared first on TECHNIG.

In previous tutorial you have learned what GreenSock animation platform is and why we use it. In this article, you will learn how to use GreenSock animation in your first project. You will also learn GreenSock animation setting up and configurations. Overall, we will make our first project and environment for our project. Beside this, you will learn how to animate elements or any other object with GreenSock.

GreenSock Animation Setting up

As promised, we will will write clean and to the point. So, to use GreenSock, all you need is to download the framework and add it in your project and than write your animation code. We will use codepen instead of saving the file locally. If you want to so, you can fork our project and make changes for your own. Let’s start doing it step by step.

• Create a pen on Codepen. ( if you want, you can fork our project here ).
• Add the GreenSock and jQuery.

Of course you will need jQuery as well, so we will add jQuery first, than GSAP. In codepen, you can like this.

1. Settings
2. JavaScript tab
3. jQuery cdn link
4. TweenMax cdn link
5. We have added it through Quick-add.

Once you have added them, you are done with GreenSock animation setting up. Now you can start writing your code.

Here a simple html code:

<div class="object">
  <p>
     Move me with GreenSock
  </p>
</div>

Here is some basic CSS style.

.object{
  background-color: blue;
  width:170px;
  padding:30px;
  color:#fff;
}

So far we had just write the basic codes. Now let’s start learning the GreenSock syntax.

First, let’s select the item class with jQuery

var item = $('.object');

Now, you can apply the GreenSock functions to variable item. The most common type of tween is a to () tween which allows you to define the destination values:

TweenLite.to(myObject, 2, {x:100, y:200});

For our example, let’s more our item 300px to the right direction. To do that, add the following code to your JavaScript code.

TweenLite.to(item, 2, {x:300});

The TweenLite is the class name and the to() is the function.

The first arguement is the object you want to apply the animation on.

The second arguement is for time set or How much time it should take.

The third arguement, you can add an array of different affects.

In our example, it will more the item element to x direction in 2 second.

Here is the completed pen.

Conclusion

It was about the basic of GreenSock animation and GreenSock animation setting. We will continue this tutorial series with intermediate and advance level of GreenSock animation. I hope it has been informative for you, if you any question, feel free to comment it bellow. 🙂

The post Setting up GreenSock Animation Part 2 appeared first on TECHNIG.