Blog.

Useful Tools

Cover Image for Useful Tools
Bryan Guner
Bryan Guner

Also here’s an even better list by someone I don’t know but would be doing you a disservice by failing to include… There’s very little overlap so you should probably read both :

25 Free Resources to Learn Web Development

Start where you are, use what you have, and do what you can.

medium.com

Disclaimer: This guide roughly goes in reverse order of awesomeness… i.e. you have to scroll to get to the coolest content… sorry not sorry

UPDATE:

12.)Bit.Dev:

Bit.dev the world’s best and only component marketplace solution provided as a service. It’s enterprise-grade in every way and provides all features out of the box. Bit empowers organizations with a “Lego-box” where all developers can push, discover, and reuse every component.

This means much faster development, less time and effort spent re-inventing the wheel, and 100% focus on innovation.

What’s the game-changer?

  • Enterprise-grade component hub with all features out of the box.
  • All the organization’s reusable code in one central place.
  • Semantic search and discoverability for components — find in seconds. Smart filtering for component weight, dependencies, labels and more.
  • Automated visual documentation for components- generated from the code, always updated, and rich with props, API reference, visually rendered examples, and customizable with all the latest techs like MDX.
  • View Adoption Metrics to understand how and where components are used and the impact of components across teams and apps.
  • Super easy for devs to push reusable components to the hub with Bit right from any codebase.
  • Built-in world-class registry that supports npm, yarn, and Bit.
  • Give leadership visibility to all tech assets they have. Make it easy for product managers and others to plan new features based on the available components, so cut delivery times and ensure consistency.
  • Get fast automated updates to components across all projects.
  • Less code is reinvented, and more innovation is delivered.

Here are 4 use-cases for gaining a fast yet meaningful impact with Bit. These reflect how many world-class teams, whose products you use daily, chose to unlock the benefits of Bit to better build frontend applications together.

  1. Micro Frontends (Autonomous Teams)
  2. Component Marketplace
  3. Design Systems (Distribution & Adoption)
  4. Rapid App Development and Delivery

To learn more about how Bit can help unlock these benefits for you just drop a ping to our experts and we’d be happy to share our experience.

11.)Dillinger:

Online Markdown Editor - Dillinger, the Last Markdown Editor ever.

Dillinger is an online cloud based HTML5 filled Markdown Editor. Sync with Dropbox, Github, Google Drive or OneDrive…

dillinger.io

Dillinger is a cloud-enabled, mobile-ready, offline-storage compatible, AngularJS-powered HTML5 Markdown editor.

  • Type some Markdown on the left
  • See HTML in the right

Features

  • Import a HTML file and watch it magically convert to Markdown
  • Drag and drop images (requires your Dropbox account be linked)
  • Import and save files from GitHub, Dropbox, Google Drive and One Drive
  • Drag and drop markdown and HTML files into Dillinger
  • Export documents as Markdown, HTML and PDF

Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email. As John Gruber writes on the Markdown site

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

This text you see here is actually written in Markdown! To get a feel for Markdown’s syntax, type some text into the left window and watch the results in the right.

Dillinger was first designed and developed by @joemccann because he needed a decent Markdown editor. 2014, it got redesigned and coded by @mrtnbroder.

Dillinger is a 100% open source project so fork the code and contribute!

Follow Dillinger on Twitter at @dillingerapp.

1.) Codepen:

For quick prototyping and experimentation:

FAQ:

You write code in the editors, the results of that code are shown to you in the preview area. It’s simple, but powerful! Beginners and experts alike work best when they can see the results of what they are doing as they do it.

How do you make a Pen?

You must have an account and be logged in, then you head to the Pen Editor, and save it when you are ready.

How do I save changes?

After the first save, changes you make in the Pen Editor are automatically saved on a timer, but that is a Pen-level setting you can change if you wish.

You can also fork a Pen to make another copy.

How do I share a Pen?

By default, Pens are public, meaning the Pen will have a URL you can share anywhere you like and anyone will be able to see it. You could share it to Twitter, Facebook, over email… anywhere you like.

Just by virtue of saving a public Pen, you’re also making it public to the world of CodePen. Your followers will see it in their following page and it will be available in global search.

Important Concept: You can make Pens private as well. A private Pen will not show up in global search (we’ll even try to hide it from search engines) and won’t be on your public profile or anywhere else. But you can still share a private Pen. If you give someone the URL, they’ll still be able to see it.

2.) Free Code Camp:

More than 40,000 people have gotten developer jobs after completing this — including at big companies like Google and Microsoft. If you are new to programming, we recommend you start at the beginning and earn these certifications in order. To earn each certification, build its 5 required projects and get all their tests to pass. You can add these certifications to your résumé or LinkedIn. But more important than the certifications is the practice you get along the way. If you feel overwhelmed, that is normal. Programming is hard. Practice is the key. Practice, practice, practice. And this curriculum will give you thousands of hours of hands-on programming practice.

And if you want to learn more math and computer science theory, we also have thousands of hours of video courses on freeCodeCamp’s YouTube channel. If you want to get a developer job or freelance clients, programming skills will be just part of the puzzle. You also need to build your personal network and your reputation as a developer. You can do this on Twitter and GitHub, and also on the freeCodeCamp forum.

3.) Cloudconvert(and Pandoc):

CloudConvert is a German-based conversion site that was launched in 2012. Today, it’s one of the most popular format converters, boasting of over 10,000 customers and at least four files per second.

CloudConvert

CloudConvert is your Swiss army knife for file conversions. We support nearly all audio, video, document, ebook…

cloudconvert.com

Just upload the file you want to convert and CloudConvert gives you a list of file types it can convert it to. It can then send that file directly to your Dropbox or Google Drive account. It’s a pretty simple process and if you don’t need to convert between file types very often, CloudConvert’s handy to keep around.

Lot’s of features

CloudConvert transforms a file from one format into another. It recognizes files in more than 200 different formats, and connects with Box, Dropbox, Google Drive, and OneDrive. This makes CloudConvert an essential web utility for anyone who uses a Chromebook.

CloudConvert supports over 200 formats from audio, spreadsheet, video, document, image, eBook, and presentation. And yes, CloudConvert is a safe platform that uses SSL encryption.

4.) Pandoc:

Pandoc dubs itself a “markup format” converter. It can take a document in one of the supported formats and convert only its markup to another format. Maintaining the look and feel of the document is not a priority.

Plug-ins for custom formats can also be written in Lua, which has been used to create an exporting tool for the Journal Article Tag Suite, for example

An included CiteProc option allows Pandoc to use bibliographic data from reference management software in any of four formats: BibTeX, BibLaTeX, CSL JSON or CSL YAML. The information is automatically transformed into a citation in various styles (such as APA, Chicago, or MLA) using an implementation of the Citation Style Language. This allows the program to serve as a simpler alternative to LaTeX for producing academic writing

Supported file formats

Pandoc’s most thoroughly supported file format is an extended version of Markdown but it can also read many other forms of:

It can create files in the following formats, which are not necessarily the same as the input formats:

3.) Code Sandbox:

CodeSandbox works with JavaScript (including TypeScript) and has front-end and full-stack support.

Codesandbox client templates for React, Vue, Angular, Preact, Svelte, Dojo, CX, Reason, as well as vanilla JavaScript that uses Parcel, and one for static (HTML, JavaScript, CSS) projects.

Pre-configured: Node.js, Angular, Adonis, Gatsby, Marko, Nuxt, Next, Sapper, Apollo, Ember, Nest, Styleguidist, MDX Deck, Gridsome, Quasar, Docusaurus, and Vuepress.

4.) DirHTML

Dirhtml creates HTML files from a directory list using the GUI or command line, optionally including HTML code of your own design at any point in generated file(s).

Installation

Dirhtml is not installable, just unzip and run dirhtml.exe.

Problems, questions? Email the author: dirhtml@enware.info

Dirhtml (Windows)

Dirhtml is a lite application that creates HTML files listing the content of a certain folder with links to each file…

dirhtml.en.uptodown.com

Dirhtml is a lite application that creates HTML files listing the content of a certain folder with links to each file automatically,

Its interface is simple and beautiful, it’s not difficult to understand, you’ll be able to use it with no problems.

It features some interesting options such as content filter, different templates, and designs for the output HTML file, add your own code to the template… You can also choose if the information about the file will be featured on the webpage or not if you prefer to hide it.

Dirhtml is a good choice if you are planning to create a directory of your files for your website. It is perfect if you don’t need extra options.

It’s how I create site navigation as it appears here:

Site Navigation

Edit description

lambda-resources.netlify.app

This enables me to take a folder full of my notes … no matter the file extension and rapidly turn the contents of that folder into a static documentation site… not to mention that having (potentially) thousands of nonbroken hyperlinks between pages in your website will help boost your SEO rating.

5.) Google Colaboratory

Google Colaboratory

Edit description

colab.research.google.com

The Basics

What is Colaboratory?

Colaboratory, or “Colab” for short, is a product from Google Research. Colab allows anybody to write and execute arbitrary python code through the browser and is especially well suited to machine learning, data analysis, and education. More technically, Colab is a hosted Jupyter notebook service that requires no setup to use, while providing free access to computing resources including GPUs.

Is it really free to use?

Yes. Colab is free to use.

Seems too good to be true. What are the limitations?

Colab resources are not guaranteed and not unlimited, and the usage limits sometimes fluctuate. This is necessary for Colab to be able to provide resources for free. For more details, see Resource Limits

Users who are interested in more reliable access to better resources may be interested in Colab Pro.

What is the difference between Jupyter and Colab?

Jupyter is the open-source project on which Colab is based. Colab allows you to use and share Jupyter notebooks with others without having to download, install, or run anything.

Google Colaboratory

Edit description

colab.research.google.com

6.) Github Gists:

Here’s a repo where I backup my gists… I keep hundreds:

bgoonz/my-gists

Contribute to bgoonz/my-gists development by creating an account on GitHub.

github.com

7.) Screen To Gif:

NickeManarin/ScreenToGif

This tool allows you to record a selected area of your screen, live feed from your webcam or live drawings from a…

github.com

Recorders

  • Use ScreenToGif to record your screen, your webcam feed or sketch board drawings.

#Screen

This is the default screen recorder UI. You simply move this window on top of the content that you want to record.

This is the new recorder UI, which lets you click and drag to select an area of your screen.
You can also switch to the window and screen modes.

  • Use the record, pause, discard or stop buttons to control your capture.
  • Select the capture frequency mode (manual, normal in fps, timelapse in fpm/fph).
  • Older UI
  • Drag or resize the window to adjust what you want to capture.
  • Type the exact size of the capture region.
  • Drag the crosshair button and drop it on top of a window to move the recorder to capture that.
  • Newer UI Beta
  • Enter selection mode, which lets you select a region, a window or an entire screen to capture.

#Webcam

This is the webcam recorder.

  • Use the record, pause, discard or stop buttons to control your capture.
  • Select the maximum FPS of the capture.
  • Resize the window to adjust the size of the capture.

#Sketch board

The board recorder lets you capture your drawings automatically as you draw them.

  • Enable the auto-capture or press Ctrl to toggle (pauses or captures it, depending if the auto-capture is enabled or disabled).
  • Select the maximum FPS of the capture.
  • Resize the window to adjust the size of the capture.

#Editor

This is the editor, where you can edit your recordings and export it to gif, apng, video, project, images and psd.

  • File
  • Start a new recording or open a media (videos or images) or project file.
  • Insert a new recording or media file (videos or images) into an existing project.
  • Open recent projects.
  • Export your project to:
  • Gif
  • Apng
  • Video
  • Image
  • PSD
  • ScreenToGif project
  • Basic controls
  • Undo, redo or reset your edits.
  • Copy, cut and paste frames.
  • Select multiple frames or browse to a specific frame.
  • Preview the playback of the animation.
  • Frame manipulation
  • Delete selected frames.
  • Remove duplicates.
  • Reduce framerate.
  • Delete all previous or all next frames.
  • Reverse, apply yoyo (forwards and backwards) or move frames around.
  • Alter the delay of the frames (override, increase/decrease or scale).
  • Add title frames.
  • Add transitions (fade or slide effects).
  • Image manipulation
  • Resize, crop or flip/rotate.
  • Add overlays:
  • Captions/text.
  • Drawings or shapes.
  • Key strokes or mouse clicks.
  • Borders, shadows, and obfuscation (pixelate).
  • Watermarks (pick your own image).
  • Cinemagraph (select parts of the animation to stay static or move).

8. Traversy Media (Free)

-source: https://codeburst.io/8-websites-you-should-visit-to-learn-web-development-620e93b3f1c5

Traversy media is a youtube channel created by Brad Traversy. His youtube channel covers nearly every topic regarding web development, from HTML, CSS, and Javascript to all the different frameworks and libraries (Sass, Bootstrap, Angular, React, Vue Js).

While I am at it I will list some youtube videos/channels that I think provide amazing content … just for the love of sharing knowledge.

9.) Stackbit:

I am currently building myself a new blog site… I sometimes develop it locally in vscode… but there’s no doubt that it took something very similar to it’s present form in a GUI!

Stackbit Web-Dev-HubTheme

The preview of the Web-Dev-Hubtheme

best-celery-b2d7c.netlify.app

Stackbit takes all the tools you’d need for a site’s stack (theme, static site generator, CMS, and deployment) and quickly bundles them together for you. It offers options in each category, so you can mix and match the tools in your stack that best suit your needs.

At this point, you may be thinking, Ok, but “fast” is a relative term in this space… how “fast” are we really talking here?

Great question. Let me put it to you this way: you could literally throw a HotPocket in the microwave, go build an incredibly sleek JAMstack site, and you’d still be waiting for your food to be cool enough to eat.

Site Preview

The preview of your site in Stackbit is generated by the development server of your static-site-generator such as Gatsby or Jekyll. Because the preview is served by the SSG development server, any changes to site’s content and code are immediately reflected in the preview. To show you the preview Stackbit runs the development server of your SSG and routes the site pages to your browser.

Running Preview

Stackbit runs the following steps to show you the preview of your site:

  1. It clones your site’s repository
  2. It checks-out the preview branch
  3. It installs your site dependencies depending on your static site generator (e.g., npm install for Node based SSGs such as Gatsby and Next.js, and bundle install for Jekyll)
  4. It runs your static site generator’s development server (e.g.: gatsby develop for Gatsby, and bundle exec jekyll serve for Jekyll).
  5. It routes any page requests made from your browser to SSG’s development server and returns responses back to your browser, as if you are developing your site locally on your local machine.

For example, suppose your site uses Gatsby. In that case, after cloning your repository, checking out the preview branch, and installing dependencies, Stackbit executes gatsby develop in its preview-server to start Gatsby's development server and then routes page requests from your browser to that development server running internally on http://localhost.

If your site uses Hugo, Stackbit executes hugo server and routes page requests to Hugo's development server running internally on http://localhost.

You can see the logs of how Stackbit pulls your repository, installs dependencies, and runs your SSG’s development server by clicking on the “Logs” button in the “Advanced Tools” bottom bar:

Preview Updates

Because the preview is served by the SSG development server, any changes to site’s content and code are immediately reflected in the preview.

Your SSG’s development server should listen to content changes and respond to them by refreshing any opened browser sessions via live-reload or HMR. Most of the static-site-generators have these functionalities enabled by default, so you don’t have to do anything.

Due to the nature of static site generators and how their development server work, any changes made to the code, or the content are immediately picked up by the SSG and reflected in the browser.

Of course, in order for Stackbit to show you the preview of your site, your SSG’s development server must work without crashing.

10.) File Locator Pro:

FileLocator is a search utility for Windows

First things first, Windows Search can’t find a thing. For anyone used to Mac OS X or Linux and having access to advanced search functionality on their computers, Windows Search (formerly Windows Desktop Search) is a huge disappointment.

Just watch how quickly it finds files by name in a 20GB folder!

FileLocator Lite is free for personal and commercial use, although commercial use requires a per-user registration after a month.

The user interface and experience is as good as it gets in an advanced program aimed at experienced users. The Pro version adds more controllers, but they can all be safely ignored unless you need something specific. The main program window opens up with three main input fields: search by file name or file contents, and where to look for the file.

The true power of FileLocator is that it can search inside any kind of file to find what you’re looking for. Other search programs will only go through files it assumes the user is looking for.

However, you’ll need FileLocator if you’re looking for something inside an unusual document format, a string from a program, software source-code, your browser cache, or anything else really. Note that only the Pro version can search inside compressed archives like ZIP.

In the search result section, you can not only see a list of files that match your search query; you can see the line number and line content where the match is made. This little feature alone takes FileLocator a few notches up and beyond their meager competition from the Windows search utility.

  • Source:

FileLocator Lite and Pro review

Find "everything" with Lite Finding even more and do it faster with Pro Windows and tabs management, and keyboard…

www.ctrl.blog

Rapid Fire Bonus Inclusions:

Notion:

The best note taking app ever:

Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.

www.notion.so

Team wiki

Turn your tribal knowledge into easy-to-find answers.

Replaces

Projects & tasks

Kanban boards, tables, lists, and more. Customize any workflow.

Replaces

Notes & docs

Systems that keep notes organized. Add any type of content.

Replaces

Gitbook:

GitBook - Where software teams break knowledge silos.

Centralize your knowledge and collaborate with your team in a single, organized workspace for increased efficiency…

www.gitbook.com

GitBook started as a simple open source tool designed to let developers quickly publish content from a git repo. We’ve changed a bunch since then, but fundamentally we’ve stayed true to the vision of empowering software teams to document and distribute their knowledge.

Not only does this tool allow you to seamlessly create documentation and notes in perfect synchrony with the git repo of your choice .. you can also import/export html, markdown and pdf documents and the cherry on top… it turns your notes into a beautiful website…. 11/10 would recommend.

Closure-and-Scope

Variables are used to store information to be referenced and manipulated in a computer program. A variable’s sole…

bryan-guner.gitbook.io

If you’re familiar with facebook’s opensource docusaurous … this is a lot like that if it were way better and much easier… Also for no extra cost to you… they don’t spy on you… sell your data or help influence foreign/domestic elections. …

Comments:

    More Stories

    Cover Image for Save Content

    Save Content

    Bryan Guner
    Bryan Guner
    Cover Image for JavaScript Basics

    JavaScript Basics

    Bryan Guner
    Bryan Guner