IDEs are especially good for sharing and collaborating on code. If that's what you’re looking for, you might want to consider tools like Bit (Github). Bit helps you isolate code and share it on bit.dev so others may find it, use it and even collaborate on it. This way, you can have your cake and eat it, too. Develop code components on your local machine and easily export them to the cloud, for cross-repo collaboration.
Editing an example of a React shared component, on Bit’s live playground1. Codetable by HackerEarth
Codetable by HackerEarth is a simple IDE with basic features, ideal for sharing code snippets. A large number of programming languages are available to you to test your code on, and you can remotely execute your code snippets through HackerEarth’s servers too. HackerEarth primarily caters to hackathons conducted by companies to hire new developers, and Codetable uses the same engine to execute the code snippets.
Codetable Sample Code
Once you have written the program, it is sent to the server to be executed. When the execution is complete, the output is shown along with the time taken to execute the code and the memory used. Note that these are parameters to judge your program in a hackathon. As an added feature, you are able to specify custom input to the program too.
While Codetable has only basic features, it is a good choice for beginners who do not wish to get distracted by a number of features that they can’t comprehend from the start.2. JSFiddle
The primary functions of a code playground such as JSFiddle are testing your code real-time, sharing and collaboration with your peers. Your peers can fork your work, modify it and re-share it too. Additionally, you can embed your code snippet, along with the real-time preview on an external website like a blog or documentation for demonstration purposes. Further, you can simulate AJAX requests through JSFiddle too.
Sample fiddle on JSFilddle
JSFiddle gives you scaffolding code in the form of boilerplates for popular JS libraries jQuery, Vue and React. A few unique features of JSFiddle include adding code to StackOverflow and bug reporting through GitHub Issues.3. CodePen
Sample Pen on CodePen
If you are a student, check if your school is enrolled in the CodePen for Education feature, which contains a few Pro features for you to explore.4. Observable
Collection of Markdown and Code on Observable
To try out the features of Observable, you can simply try out the demo notebook before creating an account. The addition of Markdown snippets within the code enables you to a lot of new possibilities. You can progressively explain a concept by adding features to blocks of code within the same notebook. You can also use it as documentation for your software. When you create a free account on Observable, you can create new notebooks, save changes and share with your peers.
Teams at Observable is a paid feature starting $9/month for each editor, which unlocks a whole set of new possibilities for use in a team environment. The multiplayer editing feature allows multiple team members to work on the same notebook in real time. Additionally, you will also be able to query data sources in real time with the Live Data feature.5. Google Cloud Shell
Google Cloud Shell provides you with a development setup on the cloud. It gives you access to the terminal on the browser, which is fully authenticated with your Google account. The Cloud Shell comes with popular tools like MySQL client, Docker, and Kubernetes by default. Additionally, it is developer ready with back end technologies like Node.js, Python, and PHP ready for you to start development on. You are given 5 GB of storage in your home directory. The Google Cloud Shell is free for Google Cloud Platform customers. Here is the detailed pricing of Google Cloud.
If you are looking for full access to a powerful virtual machine, with the option of portability of accessing it from anywhere, Google Cloud Shell is the perfect platform for you. It should appeal to you and take care of your development requirements if you own a Chromebook.
Terminal access on the browser with Google Cloud Shell
You can fire up the terminal from within the browser, and run normal unix commands within it. While terminal-based editors like VIM and Emacs are readily available, Google also provides a GUI based text editor from within the browser by splitting the screen if you are not comfortable with terminal based editors. When you use the editor, you can also see a graphical representation of the file system on the left menu, which can be used for uploading and downloading files.
If you are looking for an alternative to your local development machine, Google Cloud Shell seems to have the right ingredients for you to make the transition.Which IDE should you choose: Final Thoughts
If you would like to execute small code snippets and share the code and output with your peers, you should give Codetable by HackerEarth a try (or, as mentioned earlier, write your code on your local machine and share it with Bit).
Do you want the ability to embed the code in your posts, and collaborate with others too? Make sure you go over JSFiddle or CodePen.
Choose Observable if you would like the unique ability to mix markdown with your code snippets — this is ideal for documentation or blog posts.
Do you want a solution for your team to work in sync? Make sure you go through the features of Teams at Observable or the Team Plans of CodePen Pro.
If you want an end to end solution for an IDE on the cloud, you should try out CodePen Pro or Google Cloud Shell.
For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!
like this video if you found it useful and would like to see more videos of the same content.
subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.
Don't forget to turn on those bell notifications!
Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it. Memoization is just the act of caching values so that they can be calculated quicker in the future. Memoization is really useful in all parts of programming, but where it is most useful is in dynamic programming. In this video I will explain what memoization is, how to use it, and why it is so useful especially in dynamic programming.
🧠 Concepts Covered:
01 | Introduction
Get an introduction from Bob, as he kicks off the course, sets expectations, and gives you a little guidance for the road ahead.
02 | Setting Up the Development Environment
04 | Variables
Learn what variables are and how to declare, initialize, set, and get values from them.
05 | Data Types
06 | Type Coercion and Conversion
07 | Expressions and Operators
Learn how to spot a well-formed expression and how to compose expressions through the combination of operators and operands.
08 | Arrays
Watch as Bob demonstrates how to use arrays, how to add/remove elements of an array, how to access elements of an array using the index, how to get the number of elements in an array, and more.
09 | Function Declaration
Get an introduction to functions, as Bob shows you one way to define a function, how to call the function, how to pass parameters into a function, how to return values from a function, and more.
10 | Function Expressions
Sometimes a function declaration is more than you need. Get details in this lesson, as Bob demonstrates how to use a function expression and how to create an immediately invoked function expression.
11 | Decision Statements
Learn how to add logic to your applications by testing conditions using if / else statements, switch / case statements, and the ternary operator.
12 | Iteration Statements
Watch as Bob introduces the For and While statements, which enable you to loop through lists of values and perform operations on them.
13 | Basics of Scope
Hear an explanation of the notion of the lifetime of variables and their reach into other code blocks, in this discussion of scope.
14 | Returning Functions from Functions
15 | Object Literals
Objects contain properties and functions that describe attributes of the object and its behavior, respectively. Watch as Bob demonstrates how to create object literals.
16 | Module Pattern and Revealing Module Pattern
Learn how to introduce variables and functions without leaving an unnecessarily large footprint on the global scope.
17 | Closures
Closures allow developers to bind functions to their execution context, including variables, so you can build specialized versions of functions. Learn how closures work and how to create them.
18 | this Keyword
19 | Destructuring
20 | String Template Literals
Learn about the new string template literal syntax to enable string interpolation, multi-line string formatting, and more.
21 | Regular Expressions
Working with string data, Bob explains how use regular expressions to determine such things as whether a string matches a specific pattern or whether an instance of the pattern exists in a string.
22 | Built-In Natives
23 | Constructor Function Calls with the new Keyword
Learn how constructor functions work, see how to make key distinctions in what they are, and find out why they’re helpful.
24 | Objects and the Prototype Chain
26 | Arrow Functions
27 | Truthy and Falsy Values
28 | null Type
Similar to the undefined primitive type, the null type represents a variable that has no reference to an object when one was expected. Hear an explanation of how and why we should think about nulls.
29 | Date Objects
30 | String Methods
The built-in native String function provides several very useful methods for manipulating and evaluating strings. Watch Bob demonstrate how to use a few of the most useful ones.
31 | Array Methods
We’ve worked with arrays throughout this course. Now Bob takes a few minutes to show you some of the most useful methods provided by the Array built-in native function.
32 | Error Handling with Try Catch
See how to wrap a try/catch/finally statement around potentially problematic code to anticipate everything that could go wrong with it, and learn other error-handling tips.
33 | Understanding the Document Object Model
Watch Bob examine the web browser environment and how it creates an object graph of nodes that represent elements, their attributes, and text, plus how to properly attach your code to an HTML page.
34 | Working with DOM Nodes
Continuing from the previous video, Bob demonstrates a slightly more compelling example that helps us understand how to manipulate, create, and delete element nodes and attribute nodes.
35 | Course Conclusion
In this final video, Bob briefly adds some closing comments and well wishes. You can also optionally complete a survey to provide insight into how Microsoft can improve this course.
Thanks for watching ❤
If you liked this post, please do share/like it with all of your programming buddies!