Do you need a static record of a tweet for future reference? If the answer is yes, you need Twitter Screenshot Bot.

Twitter Screenshot Bot takes screenshots of tweets. Just mention it’s name (@get_screenshot) in a reply tweet and it will take a screenshot of the main tweet and send the screenshot to you.

Pretty cool, ey?

All screenshots get sent to your DM’s.

Just make sure to follow @get_screenshot or it’s messages won’t go through and you won’t get your screenshot.

You can find Twitter Screenshot Bot here (https://twitter.com/get_screenshot )

Made with love ❤ Enjoy

So you want to use Cloudflare SSL certificates with AWS API Gateway?

First, create an origin certificate in Cloudflare’s and then import it into the AWS Certificate Manager.

Cloudflare -> SSL/TLS-> Origin Certificate -> Create Certificate

Open the AWS Certificate Manager and provide it with your certificate body and private key.

The certificate manager will ask you for a certificate chain. You can get that here.

Click Review and Import.

You are now ready to use it in the AWS API Gateway.

Happy Hacking!

Placeholder-cli is an open-source command-line tool that replaces images with placeholders.

If your project uses images that require a distribution license, you may use this tool to replace them.

The tool generates placeholders on the fly with the exact width and height as the image.

Did I mention those generated placeholders don’t have a watermark:)?

Watch the tool in action:

Placeholder-cli code can be found here

mbejda/placeholder-cli

The NPM can be found here

placeholder-cli

Questions? Reach out on Twitter: @notmilobejda

An example application demonstrating how to add route paths to a map using the MapBox Javascript library.

The example covers topics such as:

• Address geocoding
• Adding markers
• Directions API
• Adding routes

Source code can be found on Github and a demo can be viewed here.

• mbejda/mapbox-map-example
• Mapping multiple routes with Mapbox

Copy to Gist is a Chrome extension that lets you copy selected text from a page to a gist. You can use it to streamline the process of adding gists to medium articles. For example, the following Javascript code was selected, copied to a gist and pasted below.

var foo = function(){

console.log("hello world");
}

Authorization

The extension does require you to authorize your Github account. It needs an access token that has Gist permissions to create gists.

You can find the Chrome extension here :

https://chrome.google.com/webstore/detail/copy-to-gist/lofgjnadojidbnajbnflkfnfmgiipfmc

Enjoy!

PlotlyChartExport is a chart rendering module that renders static plot.ly charts on the server. It’s a lightweight module designed for serverless environments.

• Only 1 Dependency
• Works in Serverless Environments
• Size < 10MB

Checkout PlotlyChartExport on Github:

https://github.com/mbejda/plotlychartexport

Find PlotlyChartExport on NPM :

https://www.npmjs.com/package/plotlychartexport

Learn how to create Plot.ly Charts As a Service on AWS :

https://www.mbejda.com/creating-serverless-chart-exports-with-plotly/

FireDeploy is a CLI tool which can also be used as a dependency module to deploy single page applications to Firebase from serverless environments. It is a lightweight alternative to the firebase `firebase-tools` cli. It does not rely on heavy dependencies such as firebase, firebase-tools(190M), firebase-admin and weighs < 10mb.

• Does not use Firebase modules
• Size < 10mb
• Only has 7 dependencies
• Can be used as a CLI or module dependency

Why Another Deployment Tool?

Firebase deployment CLI firebase-tools is loaded with functionality and that is why its a sizable package. The size of the package makes it not ideal for serverless environments. FireDeploy is a stripped down version of firebase-tools . It only has the functionality to deploy your single page application to the hosting environment.

Installation:

npm install -g firedeploy

Example Usage:

$ firedeploy hosting -m "Message" -c "/fireDeploy/spec/test" -p "project name" -t "CI Token"

You can view it here!

https://github.com/mbejda/firedeploy

RXJS has a broad set of observable operators such as flatMap, mergeMap, concatMap, that can be used to do nifty things. One particular operator that I will cover in this post is called switchMap. A switchMap is not a switch statement in the traditional sense where you define a list of conditions along with logic blocks and invoke a logic block that satisfies a condition, rather it is a handy control flow operator that can be used to prevent race condition problems on the frontend.

What are Race Condition Problems?

Race condition is an undesired situation that occurs when two or more operations need to happen in sequence but don’t. For instance, a common race condition problem is when two ajax requests are made from the frontend to the backend simultaneously. The first request may experience a delay and return data after the second request, consequently overwriting the data that has been returned by the second request.

Data Source

SwitchMap receives emitted values from an outer observable known as the data source. A data source can be an Angular httpClient, a user event, or you can create your own. For demonstration purposes I created a data source observable, and I’m using its observer to emit values to the switchMap operator.

SwitchMaps

The switchMap operator has the following signature :

switchMap(project: function: Observable, resultSelector: function(outerValue, innerValue, outerIndex, innerIndex): any): Observable

It subscribes to the project observable internally and only keeps one inner subscription active at a time. Each time there is an emission by the outer observable, it cancels its subscription and creates a new subscription to the new project observable. This ensures that only the latest value gets emitted to your subscriber.

Here is an example of a switchMap in action. Notice in the following code block the first call has a delay of 10 and the second call has a delay of 5.

And here is a plunker if you want to see the code in action.

Plunker

If the switchMap operator wasn’t used, we would have that race condition problem described earlier. The second request would finish before the first and load its data to the frontend. Then the first request would complete, and load its data to the frontend replacing the data that has already been loaded by the most recent request. As a result of this problem, the application would be using stale data.

What We Learned?

SwitchMap operators are useful in situations where the most current data matters. For example, when there are multiple requests sent to the backend at the same time, we end up having a race condition problem. The backend may not respond in the same order the requests were made. SwitchMaps unique ability to cancel its subscription to its internal observable and create a new one for the most recent event ensures us our subscriber will always receive the latest data.

ECMAScript 6 brought us some wonderful features and helped alleviate some Javascript pains. One particular pain I wrestled with for a long time deals with the way JavaScript initialized it’s objects.

Before ECMAScript 6, initializing an object with a variable as a key was a 2 step operation. You would first initialize the object, and then you would give it a variable key while assigning it a value.

Here is an example of what l’m talking about:

EWWWWW. Thankfully those nightmarish days are now gone and never coming back. Because of the new ECMAScript 6 features, we can now make this hard to bear 2 step operation just a 1 step.

Don’t believe me? Here is a jsFiddle!

The code block loops through an array of numbers and adds them to a number outside the loop. The end result will produce a variable that contains the sum of all numbers in the array.

However, the solution can be expressed in terms that correspond to the problem being solved. Even though the results are going to be same, future developers who may inherit that code will thank you for having a clear and concise code block.