Forem: Daniel Schep

Creating an IG top 9 without using creepy 3rd party apps

Daniel Schep — Tue, 31 Dec 2019 14:48:25 +0000

It's that time of year again when everyone on Instagram is posting their #top9. I wanted one too, but I don't trust whatever app people are authenticating with their Instagram accounts because it shares more with a 3rd party than I care to do. (TL;DR: use the script in this gist)

Fortunately, a quick googling led me to the igramscraper python library

Then the first step was using it's get_medias function:

posts = instagram.get_medias("_schep", 50) # use your account of course!

Next, we need to filter to only this year's photos and sort by likes and grab the top 9. For this we use the standard library datetime module, a list comprehension, sorted and a slice to limit the result to 9.

this_year_photos = [
    post
    for post in posts
    if datetime.fromtimestamp(post.created_time).year == 2019
    and post.type == post.TYPE_IMAGE
]

top9 = sorted(this_year_photos, key=lambda post: -post.likes_count)[:9]

Now we have a list of your top 9 most liked photos of 2019! Next we need to download them and create your top9 image. For this we use the popular requests and Pillow libraries:

img = Image.new("RGB", (1080, 1080)) # create the new image
for post in top9:
    # download and open the image
    tile = Image.open(requests.get(post.image_high_resolution_url, stream=True).raw)
    # resize the image
    tile = tile.resize((360, 360), Image.ANTIALIAS)
    # paste it into our new image
    img.paste(tile, (i % 3 * 360, i // 3 * 360))

The call to img.paste is a little bit obtuse. I'm using the modulo(%) operator to determine what column the image is on then multiplying by the size of the image and using the floor division(//) operator to determine the row.

Then we save it!

img.save("my-top9.jpg")

If you have non-square images in your top 9, you might notice that they are deformed. To deal with this, we crop our tile before resizing it:

if tile.size[0] > tile.size[1]:
    tile = tile.crop(
        (
            (tile.size[0] - tile.size[1]) / 2,
            0,
            (tile.size[0] - tile.size[1]) / 2 + tile.size[1],
            tile.size[1],
        )
    )
elif tile.size[0] < tile.size[1]:
    tile = tile.crop(
        (
            0,
            (tile.size[1] - tile.size[0]) / 2,
            tile.size[0],
            (tile.size[1] - tile.size[0]) / 2 + tile.size[0],
        )
    )

🎉 We've just created our own top9 image with out having to authenticate our account with a creep 3rd party IG app!

Check out the full source code for an easy to use version of this script in this Gist:

How To Host a React App on AWS using Amazon S3 and CloudFront

Daniel Schep — Tue, 13 Aug 2019 14:14:15 +0000

Here's a tutorial on how you can deploy React applications that are fast, global and cheap to host.

The outcome of this is a website with a React app, a custom domain and SSL certificate — Basically, everything you need to be production ready.

And all of this will be made simple via the Serverless Framework and its new Serverless Components feature.

This post features few images because an entire walkthrough video of this tutorial can be found here:

Overview

Your React app will be distributed via a global Content Delivery Network. This enables it to have incredibly fast performance around the world.

And we will be using possibly the cheapest infrastructure to do this which is S3 and Cloudfront from Amazon Web Services.

How cheap is that?

For a year, you can transfer 50 GB of data and serve 2 million requests a month, for free.

After that, it will cost you 8-2 cents per GB, depending on how much data you transfer, plus 1 cent per 10,000 HTTPs requests. Check out the AWS Cloudfront pricing page for more details.

You will have to pay for your custom domain. However, you will get a free public SSL certificate from AWS Certificate Manager.

Now a disclaimer – I did not analyze all of the options on the market for static site hosting before this, so I'm not aware of cheaper alternatives that may exist. But, S3 and Cloudfront have been around for many years. They're reliable and fast. Actually, many products for static site hosting are built on S3 and Cloudfront and charge you a mark-up.

The reason why developers don't often use plain AWS S3 and AWS Cloudfront is because the experience of using them is just too darn complicated, compared to other offerings.

However, this is where Serverless Framework comes in. It brings a great developer experience to all infrastructure providers, especially infrastructure with auto-scaling, pay-per-use, AKA "serverless" qualities.

Set-Up

Before doing anything, you will need to have an AWS account. You must have a credit card to sign up, though you will not be charged until you go over the free tier limits.

Next, log into AWS, navigate to the IAM dashboard to create access keys that the Serverless Framework will use to provision the infrastructure needed for your React website.

Go to "Users", and click "add user". Give it a name that includes serverless-framework then click enable "Programmatic Access", and click "Next".

Select "Attach existing policies directly". Check the box next to "AdministratorAccess". Hit "Next" and "Next" again to skip the tags screen, then hit "Create".

Note: Later, you may want to scope down these permissions so the Serverless Framework will the least amount of access necessary. Though, this can be complex because the Serverless Framework uses many AWS services. To give you a helping hand here, the Website Component currently uses S3, Certificate Manager, Cloudfront and Route53, and needs access specifically for those.

Copy the "Access Key ID" and the "Secret Access Key". You will need them in second...

Now, it's time for the fun Serverless Framwork part.

Make sure you have Node.js installed. Then, install the Serverless Framework via NPM and add the global flag -g.

$ npm i -g serverless

Make sure you have Serverless Framework version 1.49 or later installed. Hint: If you're installing it right now, you will.

We're going to use a Website template that has all of the scaffolding you need to get started quickly. It's a complete boilerplate. Install the Website template using this command.

$ serverless create --template-url https://github.com/serverless/components/tree/master/templates/website

This will create a website folder for you.

Go into that folder and install the React dependencies via npm by running npm i.

$ npm i

Also in the website folder, create a file named .env and paste in your AWS Keys, formatted like this:

AWS_ACCESS_KEY_ID=A92JA098J10FAJ10JAAFASF
AWS_SECRET_ACCESS_KEY=fJajajaf0919jIJFJA7813hAAFJHL

You're done with set-up. It's time to start development!

Development

This project uses React and Parcel for building and bundling the application.

You can also run the application locally with Parcel using this command:

$ npm run start

Now, you can develop rapidly.

Deployment

Out of the box, the Website template should be ready to deploy.

If you look at your serverless.yml file, you will see a Serverless Compont in it titled "website". A Serverless Component is simply code that knows how to deploy the cloud infrastructure needed to create a specific outcome or use-case.

Serverless Components are open-source and you can use them to easily deploy lots of use-cases on serverless cloud infrastructure. Check them out here.

Every Serverless Component has an inputs property, which allows you to configure the use-case that the Component will provision. For example, here you can see the src input that points to the directory containing your website assets. As well as a hook to call in order to build your website before deployment. This way, you don't have to run the build script before deploying, it just happens automatically.

Alright, let's get to the deployment part!

To deploy your React app, in your website folder, simply run the serverless command.

$ serverless

Your website should deploy in less than a minute and you should get URL pointing to your live website!.

The first deployment always takes the longest because creating cloud infrastructure resources can be more time-consuming than updating them.

Setting Up A Custom Domain, Cloudfront & SSL Certificate

To set up your custom domain, your Cloudfront CDN and an SSL certificate, you will need to do one manual step: you must log into your AWS account and purchase your domain. Currently, the Website Component only works with domains purchased on AWS Route53. Within the next few weeks, we will enable support for existing domains registered on different registrars.

Go to AWS Route53's dashboard, egister your domain and wait for the registration to complete. This could take up to an hour. Once it has completed, simply add in the custom domain to the Website Component's inputs.

Run serverless again and it will acknowledge the new input and set up your custom domain, Cloudfront & SSL Certificate.

You will need to wait for your new domain to propogate to the DNS servers around the world. This may take up to an hour as well. Once it's available, you will be able to see it live, as well as any changes you make.

Every time you run serverless to deploy changes to your website, the Website Component invalidates the assets you have cached in AWS Cloudfront. This enables you to see changes almost immediately.

State Management

Currently, Serverless Components do not have remote state management. This is coming within a month. Until then, make sure you push the .serverless directory to Github, since it contains state info about the cloud infrastructure resources that have been deployed for your website.

Adding A Serverless API Backend, Database & More

If you want to go further and build out a fullstack application just as easily as this website, check out the fullstack application template. This will give you everything you need to deliver a fast, cheap and global entire serverless application.

Enjoy!

Introducing Proven

Daniel Schep — Wed, 15 Nov 2017 21:41:57 +0000

I'm pleased to introduce Proven to the dev.to community. It is a browser extension for Firefox & Chrome to add badges to users' names on Twitter as an alternative to their verified program.

Proven uses Keybase's API to look up a user by their twitter handle and if they have an account, it adds badges for their keybase profile as well as other profiles that have been linked by posting a proof.

This is what it looks like in action! (all the badges are clickable links to the relevant profiles)

Install it on Firefox or Chrome. And check out the source on Github

Update: Now with night mode and mobile (use the 🦊) support!

Update 2: Now with tweetdeck support!