Toggle Dark Mode with Touch Bar

Hamza — Mon, 09 Sep 2019 18:22:07 +0000

If you’re anything like me, you enjoy changing between dark mode and light mode based on what vibe you’re feeling.

Here’s a quick and to-the-point tutorial where I'll show you how to add a shortcut to your MacBook's Touch Bar that makes switching all that much easier.

🌞🌚

What we'll be doing

Very simply, we’ll be creating an Automator script that allows us to create a shortcut for dark/light mode. Once we have the script set up, we will add a Touch Bar shortcut to make switching between the two modes easier.

If you're not familiar with any of these things, don't worry as I've listed each step with helpful screenshots to guide you. We've got this!

What you’ll need:

MacBook w/Touch Bar 👆🏽💻
macOS Mojave

Step 1)

^{Create the script that automates the light → dark mode process}

→ Open Automater
→ Create a New document
→ Create a quick action, and then click "Choose"

Step 2)

^{Implementing the script}

Change the workflow selection to "no input"

Change the image to your desired icon. This will appear on the Touch Bar. I selected the color wheel.

In the Actions search bar type "Run AppleScript"

Double click "Run AppleScript" and you’ll see this page

Delete the existing code, and replace it with the following code:

tell application "System Events" tell appearance preferences set dark mode to not dark mode end tell end tell

It should look like this:

Let's test out the script by clicking the "Run" button

Switch back to the light mode by clicking "Run" again.

Let's go ahead and save the script. I named mine “Dark Mode Toggle”

Step 3)

^{Creating the Touch Bar shortcut. We’re almost there!}

On System Preferences → Extensions, make sure the Dark Mode Toggle is checked

Click on Customize Control Strip

This will take you to this page, where you can drag your quick action to your desired location on the keyboard. I chose to put mine on the far right.

Note: you'll have to drag it towards the desired place on your Touch Bar. See more here.

Congratulations, you did it! 😎

Connect with me on Twitter @oiHamza. 👨🏽‍🚀

Build a Twitter NASA app 🚀

Hamza — Tue, 20 Aug 2019 17:54:04 +0000

This project is hosted on Glitch: https://glitch.com/~dailynasa

Once a day, NASA features an astronomy or space science related image through their public API. The images are pretty cool and teach you about the incredible solar system we live in!

As an astronomy enthusiast, I wondered how I could easily view these images and even get them to appear on my Twitter timeline. I got to work on this, and ended up putting together this fully automated Daily NASA app that Tweets images released each day by NASA.

Our node.js app will connect to the NASA API, temporarily store media provided and post a Tweet with the title + image/video via the Twitter API. Here is an example. Pretty simple!

In this tutorial, I'll also show you how to build this app using the Twitter and NASA APIs. To see the app in action, check out the Twitter page @DailyNASA.

What will we be doing today?

Our app is going to be hosted on Glitch, so we won't be doing much except making sure our app is properly configured.

Once our project has been remixed and the .env file's keys and tokens properly configured, we'll schedule a cron-job to make our app Tweet. A cron-job is essentially an automated wake-up call.

How does the code work exactly?

The app will be activated via a webhook. The webhook will be pinged by our cron-job at a specified time of day ⏰
Our app will connect to the NASA API 🚀
The app will check if the media provided by the NASA API is an image URL or video URL. If it’s a photo, our app will download the image and Tweet it. If it’s a video, the app will just Tweet the video URL:
- Video 📹 - the app will save the video URL + title and Tweet this via the Twitter statuses/update endpoint. Here’s an example.
- Image 📷 - the app will save the image to a temporary directory and Tweet this via the Twitter statuses/update endpoint. Here’s an example. Because it's a temporary directory, we don't have to worry about filling up space (pun intended) 🥁

Prerequisites

Before we get started, you'll need the following:

A Twitter developer account - click here to apply
A registered Twitter app - click here to see how
A copy of your Twitter API keys and tokens - click here to see how
A NASA API key 🔑 - click here to get one
A cron-job account - click here to register

Once you have all of these, you're ready to launch 🚀!

Recipe

Step 1 - 💿

a) On our Glitch project page, remix this project! Click on the "Remix Project" button on the top left of this page.

b) Name your app.

I called mine dailynasa

Step 2 - 🔑

A) Enter your Twitter apps keys and tokens in the projects .env file

B) Enter your NASA API Key on the projects .env file

C) Give your app endpoint a name

For example, if I label mine wakeup, your .env file should look like this: BOT_ENDPOINT='awaken'. My final endpoint will look like this: https://dailynasa.glitch.me/wakeup

🚨 IMPORTANT - keep all access keys, tokens, and endpoint names private 🚨

Step 3 - TESTING TESTING !!

Now you've configured our app, let's test it out.

I usually reccomend viewing the logs in Tools → Logs to verify our app runs when we wake it up.

In a new browser window, enter your unique endpoint URL and hit enter. (You can also test the URL via your command line using the following command: curl https://dailynasa.glitch.me/wakeup

Give it a second, and on your Twitter account you should see the daily NASA Tweet posted!

Now you've verified that it works, let's make sure that it's automated so you don't have to keep doing this every single day.

Step 4 - ⏰

We'll be using cron-job.org to ping our endpoint and make our app post a daily Tweet.

Create a new cron-job and fill out the page to this effect:

🚨 IMPORTANT - scheduling your app to run too frequently can seem spammy and lead to violation of Twitters automation policy. 🚨

Once a job has run, you can view the response on this page.

And just like that, we're done!

Congratulations!

You did it! 😎

If you enjoy learning from tutorials or have any questions, check out Twitter’s Community Forums.

DEV Community: Hamza