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.

Categories
Tools

Essential Linux Command Line Programs

If we work as developers, we have to work with the Linux command line eventually.

In this article, we’ll look at some basic Linux programs we should know to work with the Linux command line.

curl

curl lets us make HTTP requests to a server a get a request back.

We can use it to specify the headers and body of the request in addition to any cookies.

python -m json.tool / jq

python -m json.tool and jq are 2 separate programs that we can use to pretty-print JSON so that we can read them easily.

They all work after the pipe. For instance, we can run both as follows assuming test.json has JSON text in it:

cat test.json | jq

or:

cat test.json | python -m json.tool

ls

ls lists the files and directory in a directory.

Once we run this, we get the permissions of the files and folders and when they changed.

tail

tail shows us the end of a text file. As the text file updates with new content, it’ll show the latest and keep showing the end of the file if new things are added if we add the -f option

cat

cat is used to concatenate and print files on the screen. We just add the paths that we want to the end of the list and the content of all the files will be concatenated one after the other on the screen.

grep

grep lets us search for patterns from the output of another command.

This is very handy for searching for data from any large blocks of text.

ps

ps shows the status of the running processed in our computer.

The date, process ID, and time are all included.

env

env prints out environment variables. It’s useful if environment variables are added incorrectly.

top

top shows us the number of resources used by the currently running processes in our system.

netstat

netstat shows us the network status of our system. It shows us the ports that are used and the IP address they connected from.

Also, we can see the processes that are using network connections in one table.

ip address

The iproute2 package has the ip address programs that show us which interfaces are connected to which network.

lsof

The lsof package shows us the item that are listening for incoming data in our network.

it lists the ports that it’s listening to and the ID of the process that’s listening to a given port.

df

The df program shows us the free disk space that’s on our system.

We can see which volumes are full and which aren’t.

du

We can get more information our disk volumes than df with du .

The -h flag makes the output human-readable and -s shows the total size.

id

The id command returns the currently logged in user’s identify.

chmod

chmod is used to change the permissions of our files and directories.

This can help us fix permission errors when we encounter them.

dig / nslookup

dig and nslookup let us troubleshoot DNS errors. We can see whether we can resolve the some URL to their IP address with it.

Just put the URL we want to find the IP address after each and check the output.

iptables

iptables is used to block or allow traffic on a Linux system. It’s similar to a network firewall.

We can whitelist and blacklist by IP address with this package.

sestatus

We can check if we have SELinux enabled with this command. Then we can check if it’s enabled or not.

history

history shows us the commands that we’ve run recently. It’s easy to look at what we’ve run so we can run them again.

tar

tar can be used to created archives and uncompress them.

We create one by running tar cvf archive.tar /dirname to create an archive out of the /dirname directory.

The extract data from an archive, we run tar xvf archive.tar .

To view an archive, we run tar tvf archive.tar .

Conclusion

There’re many commands that we can use to do things on the Linux command.

Commands like curl and tar are important for making requests and extracting files.

There’re also packages that we can install like jq to pretty-print JSON.

And there’re many more that’ll come in handy for troubleshooting networks and processes.

Categories
Tools

Basic Linux Commands We Should All Know

If we work as developers, we’ve to work with the Linux command line eventually.

In this article, we’ll look at some basic Linux commands we should know to work with the Linux command line.

pwd

pwd stands for Print Working Directory. It shows the directory that we’re in now.

ls

ls lists the files and directories that are in the current directory.

cd

cd stands for change directory. It lets us change directory to a different directory by typing in the directory name we want to switch to after cd.

mkdir

mkdir lets us make a new directory in the current working directory by typing in the directory name after mkdir.

rmdir

rmdir is used to remove the directory with the given name.

lsblk

Lists the available block devices in a system. A block device gives us access to a device in a way where the hardware characteristics of the device isn’t visible.

mount

We can use the mount command to mount a removable storage device. This makes it available for us to use.

df

The df lets admins monitor and analyze server status and network systems.

uname

Gets the Linux version information of the operating system we’re currently using.

ps

Lists the tasks that currently running on our system.

kill

kill lets us end tasks that are currently hung in our system.

service

The service command lets us run system-wide services from the terminal.

batch

batch lets us run system services in a predefined schedule.

shutdown

shutdown does what its name says. It shuts down our computer.

touch

touch lets us create a new text file by typing in a file name after it.

cat

cat is used to concatenate multiple files by specifying file paths of text files after it to concatenate them together.

head

The head command lets us view the head of the file by typing in the file path of the text file we want to view after it.

tail

The tail command lets us view the tail of the text file as it’s being updated. The updates are done live so we’ll always see the latest.

cp

cp lets us copy files from one place or another and if it’s the same directory, it’ll rename the file.

mv

mv is short for a move. It lets us move files around our system. We can use the -f switch to force the operating system to move big files.

comm

The comm command is the command to compare 2 files.

less

The less command is popular for viewing the contents of files. We can let users navigate within a file in both directions with this file.

ln

ln is used for creating symbolic links to some files for easy access.

cmp

We can use cmp to compare files and output the results to an output stream.

dd

The dd command is used to convert and copy files. We can use it to make hardware and device files appear in the file system like normal files.

After running dd, those devices will show up like regular files.

alias

The alias command lets us replace a word by another string. This helps us replace long commands with shorter ones.

cal

This is a small calendar program that we can run to get some information about today’s date and other things.

fortune

The fortune command lets us see the fortune that we get for the day. It has funny and inspirational quotes.

history

The history commands prints out the commands that we typed and see what we’ve done in the terminal recently.

yes

Typing yes and then some text after it just displays the text after yes forever until we stop it with Ctrl+C.

banner

The banner command gives us the ability to make our own ASCII banners that we can see on the command line.

rev

The rev command takes text input and writes them to the standard output and reversing each character. It’s useful for pranks.

wget

wget lets us download files from the Internet right from the terminal. It works with HTTP, HTTPS, and FTP servers.

iptables

iptables lets sysadmins control incoming and outgoing traffic on a host machine. It’s used on a regular basis to define authentic traffic and blacklist suspicious or untrusted requests.

Conclusion

Linux has lots of commands that we should know about.

We should know how to traverse directories, list files, and copy/moves files.

Also, knowing how to download files is also handy.