Categories
Tools

Useful Linux Commands — Network and Compression

Linux is an operating system that many developers will use.

Therefore, it’s a good idea to learn some Linux commands.

In this article, we’ll look at some useful Linux commands we should know.

export

The export command let us export variables to child processes.

For instance, we run:

export TEST="test"

to set the TEST variable to 'test' .

We can also reference another variable by using the $ in the expression on the right side.

For example, we run:

export PATH=$PATH:/new/path

to reference the existing value of the PATH environment variable on the right side.

tar

We can run the tar command to archive files.

To create a tar archive, we run:

tar -cf archive.tar file1 file2

to create a tar archive with the file1 and file2 files in the tar archive.

We can extract files from an archive in the current folder by running:

tar -xf archive.tar

And we can extract an archive into a specific directory with:

tar -xf archive.tar -C dir

x stands for extract and f means write files.

c means create.

The z option lets us create a gzip archive.

For instance, we run:

tar -czf archive.tar.gz file1 file2

to create a gzip archive with file1 and file2 inside.

And we can gunzip a gzip archive with:

tar -xf archive.tar.gz

traceroute

The traceroute command lists all the nodes traversed to reach a host.

For instance, we run:

traceroute google.com

to see where the packets go to reach Google.

ping

The ping command lets us ping a network host to see if it responds.

For instance, we run:

ping google.com

to see if Google is up.

We can continually ping it with the -c switch:

ping -c google.com

It stops pinging only when we press ctrl+c.

gunzip

The gunzip command lets us unzip a zip archive.

For instance, we can run:

gunzip filename.gz

to extract the files in the filename.gz file.

We can use the -c switch extract a file to a different filename:

gunzip -c filename.gz > bar

Then we extract filename.gz to the bar file.

gzip

The gzip command lets us create a compressed file.

For instance, we run:

gzip filename

to compress the filename file.

We can rename the gzipped file with the -c switch:

gzip -c filename > filename.gz

Then we compress the file into the filename.gz file.

The -k option also lets us change the name of the compressed file:

gzip -k filename

We can set the compression level with the -<number> switch.

For instance, we run:

gzip -1 filename

to compress filename with level 1 compression.

We can compress multiple file by adding the file names separated with spaces:

gzip file1 file2

We compress file1 and file2 with one gzip command.

Also, we can compress all files in a directory recursively with the -r switch:

gzip -r folder

The -v switch prints the compression percentage info.

The -d switch decompresses a file:

gzip -d filename.gz

Conclusion

We can compress files and folders, and do basic network tasks with some basic Linux commands.

Categories
Developer Tools

Useful Tools for Web Development

Useful development tools available on this site

Bookmark this page to access all the tools in one page.

Categories
Tools

More Great JavaScript Code Editors

Thanks to the Internet, we can do a lot of stuff online. This includes writing JavaScript programs.

In this article, we’ll look at the best online JavaScript editors. We can use them without downloading and installing anything on our computers.

PlayCode

PlayCode is a simple code editor for fiddling with front end JavaScript code.

If we’re using the free version then we can’t any library but jQuery. We can install libraries with other online editors for free like JSFiddle or CodeSandvox.

However, it does provides syntax highlighting and live preview of the output and the console in our code.

In addition, the free version comes with a few templates that w can play with like React and Vue project templates that we can start using for free.

Also, we can add or remove files from within the project for free.

If we want to upload images, then we have to pay for that feature in PlayCode.

SourceLair

SourceLair is another quality online editor. We can try it for free, but we have to create a new account and log into it to try it.

It provides us with a simple editor that lets us fiddle with our code.

Plunker

Plunker lets us fiddle with front end JavaScript code like any other online editor.

We don’t have to create an account and log in to do it. That’s great since logging in just to fiddle with some code is inconvenient.

In a project, we can add or remove files, and edit them. It also provides us with a preview, which is nice.

It supports a few frameworks by providing us with project templates to create projects using frameworks like Angular and React.

Also, it supports a formatting source code with one click so we don’t have to do it ourselves.

Optionally, we can sign up and log in to save the code that we fiddled with.

Scrimba

Scrimba is not your typical online code editor. It’s also a learning tool for learning front end development.

The online code editor is part of the course. It includes popular front end development topics like Introduction to ES6, React, GraphQL and much more.

There’re also other front end courses like CSS and HTML.

A Vue.js course is also being developed.

StackBlitz

StackBlitz us a code editor that’s based on the same one used in Visual Studio Code editor, which is the Monaco editor.

It also comes with several templates to create new projects, including Angular, React, Ionic, TypeScript, Rxjs, and Svelte.

This is great since we can create projects that are beyond just simple JavaScript projects.

Also, we can add our own NPM packages to the projects we create, which is very good.

Since it’s based on Visual Studio Code’s editor, we get goodies like autocomplete of code within the editor.

We can also add and remove project files ourselves. It also lets us deploy our project to Firebase right from the editor.

TypeScript Playground

The TypeScript Playground website lets us fiddle with TypeScript code. However, it doesn’t let us save anything.

But we can change the TypeScript version that we want to play with to see which versions support which feature.

There’re also some code examples that we can load.

It’s a great editor for learning TypeScript.

Repl.it

Repl.it is an online editor that lets us run a runtime environment like Python or Node.js right from our browser.

Therefore, it’s great for using it for fiddling with Node.js code. People have made templates are Node.js, Express, and more.

We can also run Jest tests from within the editor.

Also, we can install packages from right within the editor. In addition, we can add our own files to our project.

The whole project can be downloaded from the script editor.

Some templates let us enter commands to its built-in terminal. We can also create our own that let us open the terminal and type in commands.

For fiddling with Node.js code, this one is hard to beat. In addition, it supports other runtime environments like Python.

Conclusion

There’re lots of online JavaScript editors online. Most of them are for fiddling with front end JavaScript, like Plunker and PlayCode.

However, there are also ones for the back end like Repl.it.

Finally, there’re also online editors that are part of an educational website like StackBlitz which lets us learn by practicing.

Categories
Tools

Best JavaScript Code Editors

In this article, we’ll look at the best online JavaScript editors. We can use them without downloading and installing anything on our computers.

Codepen

Codepen is a great code editor that lets us build and fiddle with front end apps right in our browsers.

It has some settings to let us change how the editor looks. Also, it has multiple text editors to let us fiddle with HTML, CSS, and JavaScript code right in the browser.

As we change the code, we can preview them right in the preview window.

It’s used by lots of people to create example code and embed them in blog articles and other places.

JSFiddle

Like Codepn, JSFiddle provides us with multiple windows for fiddling with HTML, CSS, and JavaScript. In addition, we can collaborate on code edits within JSFiddle.

Also, we can add various libraries and frameworks to our JavaScript code by setting them in the drop-down on top of the JavaScript editor.

We can also click a button to tidy up our code which saves us time from formatting code ourselves.

Not every code editor has this feature. And it helps us write our JavaScript code since we often need to add libraries to make non-trivial JavaScript programs.

We can also share code written in JSFidden with others via a link or save them by creating an account.

JS Bin

JS Bin is a simple JavaScript code editor that lets us fiddle with JavaScript, CSS, and HTML.

It’s simpler than Codepen and JSFidden in that there’re fewer options that we can change.

However, we can add some simple libraries as we can with JSFiddle.

It also lets us create an account to save JS Bin code in our account.

Koding

The Koding editor provides us with a full-fledged development environment right in our browsers.

However, it’s only available as a self-managed installation so we may as well be setting our own local dev environment on our own computer instead of using it.

Rendera

Rendera is another simple code editor that lets us editor HTML, CSS, and JavaScript in the browser.

It has fewer features than the others and doesn’t look as appealing, but we can add some libraries to the code that we put on there, which is nice.

Liveweave

Liveweave is another code editor that lets us write simple front end code. It also supports adding libraries.

It also has syntax highlighting and preview as we change our code which is convenient.

We can also click a button to tidy up our code which saves us time from formatting code ourselves.

It has a console log preview which requires us to open a new tab to preview it.

Another great feature is that it has a window to preview CSS and fiddle with it right in the tab.

We can also fiddle with colors which not many editors have. It has a color picker that we can use to fiddle with colors.

CodeAnywhere

CodeAnywhere is a full-fledged online IDE. It’s a paid service but includes a free trial.

It provides us with an editor, a terminal to run commands, a collaboration tool, and version control capabilities.

Not many online provide version control capabilities so this is the one if we want to revert code.

Also, most online editors also don’t provide terminal access so that’s another great feature.

CodeSandbox

CodeSandbox is a great online JavaScript editor. We get lots of features from Visual Studio code with its editor.

It studies up our code and checks for syntax errors on the fly. Also, it lets us install packages into our project, which is also a feature that not a lot of IDEs have.

It includes project templates which we can get started with, including plain HTML, CSS, and JavaScript, React, Angular, Vue, Next.js, etc.

Also, it has limited support for running tests with Jest. However, we should count on using it since lots of test running features aren’t supported.

We get terminal outputs in some projects but can’t enter commands in most of the built-in templates.

However, it’s still great for writing a quick demo and prototype code without downloading things to our own computers.

Conclusion

There’re many online JavaScript code editors. Most of them are pretty basic. However, there’re some like CodeSandbox which are more advanced.

Other editors like JSFiddle and Codepen are also good for writing quick code snippets.

Categories
Tools

Basic Tools for Programming — Text Files and Command Line

Building software requires some basic tools. The most basic building blocks are the code.

In this article, we’ll look at how we use plain text for code and other things of value in a software project.

The Power of Plain Text

Plain text is the most transportable file format out there. It’s usable by any operating systems without any program most of the time.

We can open it, edit it, save it, and transport it to different computers and use them.

They can also be checked into source control systems so that we can diff them, review them, merge them, and do many other things with them.

Plain text is just a bunch of printable characters in a form that can easily be read and understood directly by people.

They can be both structured and unstructured. For instance, HTML and JavaScript code have standardized structures.

They’re a higher level than straight binary encoding which are derived directly from the implementation.

Text files use standard character sets to store text data. ASCII and Unicode are standard character sets that are used today.

However, they do have some drawbacks. They may take more space to store than compressed binary files and they may take more processing power to interpret and process.

However, these drawbacks are pretty negligible in today’s world since computing power is plentiful.

The Power of Text

Plain text files have lots of benefits like their portability, their insurance against obsolescence and easier testing.

Human-readable text files will outlive all other forms of data and apps that created them.

As long as the data survives, we’ll be able to use them potentially after the apps that made them become obsolete.

Character sets like ASCII and Unicode are long-living standards and they’ll likely outlive the lives of humans.

Therefore, they can be used as long as they’re stored somewhere. Any popular operating systems will have programs that can read and manipulate them.

Also, any development environment or text editor can run code from text files. This is not so much with binary code files, which probably requires the program that generated the binary to build and run the code.

Storing everything in text files means that restoring things is just as easy as copying some text files to restore a crashed system if needed.

Binary files, on the other hand, will be much harder to deal with. For instance, restoring text-based configuration files is much easier than restoring settings in the Windows Registry for example.

Storing configuration in text files is a great advantage of using UNIX based systems for computing rather than Windows.

Text files can also be checked in source control and the history of the change is tracked easily.

This makes reverting text file changes much easier than binary. Reverting can’t be done easily with binary files if at all.

Diffing text files is also much easier than with binary files. Therefore, text files are also much more beneficial when we need to compare the content of different files.

Text files also make testing easier since they can easily be read by anything either with a program manually or programmatically.

Text files are the most commonly exchanged file type and there’re standards to structure them so that everyone’s on the same page.

The same characteristic don’t apply with binary files. We can’t run Windows programs on Linux without some kind of emulator or Windows API layer for example.

Working With Text Files in the Command Line Shell

At least once in a while, we got to work with text files without a GUI for configuration, automation, or any other purposes.

This means that we got to learn to manipulate with command line text editors.

Programs like nano make things easy for us even though we’re using the command line.

It’s a great text editor and we can live with it. Other people also swear by vi or vim to edit their text files.

That’s another benefit of text files. It can easily be edited without loading any heavy GUI that gets in our way in servers.

There’re many things that we have to do with text files in the shell that we can’t do from GUI portions of operating systems.

Commands like touch , tail , are commands are creating a new text files and chasing the tail of a text file respectively.

Conclusion

We have to know the power of text files if we’re using a text editor.

Code files are all text files, so we got to create and edit them often. They’re great because they can be checked into source control easily.

Also, they can be compared and reverted easily since their change history can easily be tracked.