Babel is a very powerful code generator and parser, but the documentation doesn’t have many examples of how to use it for parsing, generating, and manipulating abstract syntax trees, I’m collecting some here from my own usage of it.

I’m currently working on a side project which needs a lot of JSX/HTML parsing, manipulation, and generation using Abstract Syntax Trees (AST).

ASTs are very powerful and you can use them to build your own babel plugins, macros, or use them directly as part of your app to do custom parsing and manipulations of your code.

You can read more about the basics of ASTs here:

One major resource you will need to check a lot while working on ASTs is the babel types document, but…


Image for post
Image for post
Prettier + ESLint

In any Frontend project, especially with big teams, it is important to standardize the code style and formatting, this has many benefits:

1- It will ensure clean code which follows the best practices across the team, especially with interns or junior team members who might not know why a specific way of writing code if better than another.

2- Will help everyone to learn and level up, as every linting rule is there for a purpose and each JS standard has the list of reasons with examples why any specific rule is needed.

3- Reduces code review time and makes…


Image for post
Image for post
secrets

Techniques to manage your secrets and environment variables through your nodejs and client javascript app.

Every app needs environment variables to define configs and secrets e.g. API_BASE_URL, SOME_SECRET, ...etc.

You can just add them as a JSON or a constants JS file in your app but you need to have these as global configs where you can use from any file without importing, and they might have some secrets and API keys which you shouldn’t add to your source control system.

How to define an environment variable

You can simply define environment variables using any cli like this:

Available to the current shell session only.


An app that Creates Learning Opportunities when Reading is Impossible

Image for post
Image for post

TL;DR — We built an app that lets you convert any article to audio and listen to it at high speeds, allowing you to grasp information and learn faster, much faster. You can download the app from here — https://play.ht/mobile

Problem

Almost all the information out there is written. And after a threshold of reading when we can’t consume any more information, we stop learning. Or perhaps we are physically occupied with an activity — like at times of exercise, commute, a jog, etc., but our minds can still learn. …


Get Your Medium Stories Narrated by the Best Text to Speech Technology

Image for post
Image for post

What is Google WaveNet?

Google WaveNet is an advanced Text to Speech technology provided by Google which is arguably the most natural sounding computer voice we have ever heard.

The other best voice is from their Deep Mind project called Tacotron, which is so indistinguishable from human speech that Google have challenged to identify if it’s human or machine.

Ever since Google showcased their early demos, we have been eagerly waiting for Google WaveNet to release.

Today, we are extremely excited to announce that we have integrated all of Google WaveNet’s voices into Play.ht and made them available for anyone who writes on Medium!


Image for post
Image for post
Get The Play Plugin for WordPress

This plugin for your WordPress site instantly converts blog posts into audio, so your readers can listen to them as audio podcasts.

The Gap

If you google ‘podcasts statistics 2017’, this article will probably be the first search result you will find. A recent research reveals just how much engagement podcasts have been getting and if you take a look at the steady rise of engagement listeners have with podcasts over the years, you know it’s only going up. Even though the research was carried out in the U.S. alone, they are pretty impressive.

In the U.S. alone, did you know —

That 67 million people listen to podcasts monthly?

And 85% of the people listening, hear the entire podcast?

(Facts by The…


Image for post
Image for post

TL;DR — We built a Chrome Extension that instantly converts your Medium articles to Audio and embeds them in your articles. Download it here.


Image for post
Image for post

This is a curated playlist of articles for every stage during the process of building a startup. We have split the process in these stages:

0- Before the startup.
1- Getting ideas.
2- Validating your idea.

3- Product market fit.
4- Building your product.
5- Building your team.
6- Building your culture.
7- Product launch.
8- Getting traction.
9- Retention.
10- Making money.
11- Bootstrapping.
12- Fundraising.
13- Hiring.
14- Scaling your team.
15- Growth.
16- The CEO job.
17- Startups Mistakes.
18- Bonus: when to pivot!

All the below Embedded Audio Players were generated using play.ht. Pro Tip: This…


We converted 7,000 Medium articles from text to speech

Image for post
Image for post

You can listen to this article here:

How many times have you wanted to read an article but didn’t have time for it? Or maybe reading was not the best convenience there was. Wouldn’t it be great if you could, with a click of a button be able to listen to any article?

Now you can! with PLAY — a service that narrates Medium articles for you! It turns articles into podcast like narrations that you can listen to while commuting, eating, running, or doing your errands.

We believe it’s the simplest, yet most convenient way of getting information…


Image for post
Image for post

Iterators and Iterables:

ES6 (aka ES2015) has introduced two new concepts in javascript: iterables, and iterators.
This is a brief on what iterables, iterators, and generators are and how to make use of them.

What are iterables?

In general, it is a data structure that allows its data to be consumed. It does so by implementing a method whose key is Symbol.iterator which returns an iterator.

Why do we need iterables?

Pre-ES6 in Javascript if you have some data source, depending on how you structure your data, you need to consume it in a different (sometimes hacky!) way. Iterating and consuming the data of an Array is different from a…

Mahmoud Felfel

Building @Play.ht among other things!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store