DEV Community: tobe

Tips for Programming with a low end PC.

tobe — Fri, 17 Jul 2020 15:55:10 +0000

DISCLAIMER: The term low-end is subjective, this is intended to help anyone with a less than powerful pc.

For the past few months I've been using a laptop with 4 GB RAM for working, learning and just about everything. My experience plus this twitter thread by Brad Traversy (Who is a great teacher btw) sort of inspired me to write this. Turns out that there are LOTS of developers with high end PC's but also lots of developers with arguably low end one's as well.

If you were just starting out or even a professional programmer, you'd imagine you'd need a lot of stuff. If you ever have to, it's 100% possible to code with a low end PC.

NOTE: Most of this applies to web application development. If you are developing games or training machine learning models locally then idk man, hopefully someone in the comments can help. (although i know google colab works for machine learning)

The Editor

Programming largely involves typing text and hoping the text makes sense to the computer, preferably with tools that make this easier. Most full on IDE's take up lots of RAM, which is a resource we can't really spare especially when you have other things open like several browser tabs.

The solution: A code editor, not an IDE (anti-climactic, I know.)

Local Editors's

Visual Studio Code

This is a very popular code editor that is "IDE like", it's lovely. Although a computer with around 2-4GB of RAM can run it. It isn't exactly known for being conservative with RAM. Here are some things you can do:

Tip 1: Disable unnecessary extensions!

I used to have some extensions on that weren't exactly relevant to what I was doing. Disabling them will should reduce the memory footprint of VSCode. You can find out how to do this here. After my research, this really is one of the best approaches when using VSCode.

Excluding files from filewatcher

You can stop VSCode from "watching"/tracking certain files for changes. You can do this in your VSCode settings . By default it has stuff like node_modules and git objects excludes but you can use a glob pattern (A useful guide on them) of file paths to add any thing else there.

"files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
//Add in your other glob patterns
}

A few people have suggested sublime text so you can give that a try.

This is all great. However, If you have even lower specs or are working on a somewhat larger project, your PC may start to struggle if you have other things open. So switching to an even lighter editor would help. There are many great ones: some suggestions are Notepad ++ OR VIM.

Regarding something like VIM, while it is really lightweight, it takes sometime to get really good/efficient. Once you do learn, it is really nice not having to touch your mouse as much. Also when you code it makes you look like every non-programmer's idea of a programmer.

Upside is you don't have to touch your mouse as much, The downside is that you have to learn vim :*

Another Solution: Online IDE's

Here is another avenue that is great for several purposes. Online IDE's are pretty nice now. This especially true if you develop with many programming languages (Like PHP) and can't be bothered to setup a local dev environment. You also get the freedom to write code on anything with an internet connection.

They also happen to be pretty great for sharing code and working with other people quickly. Most computers have some browser and that's all you need.

There are a few options: Repl.it from my personal experience is pretty amazing, they support so many languages and allow you to run code and use a custom domain for your work. Plus multiplayer!

Codepen is another option which is pretty popular for sharing HTML./CSS/JS code, I used it a lot when I first started out with web dev about 3-ish years ago. There is also Codesandbox, which looks good, it appears to be a VSCode editor in the browser.

(I may be missing a few other good online editors but these one's are top of mind)

Extra Tools/Tips

Storage

Many low end PCs are at times plagued with low storage space. The best advice I have here is to only store projects you work on 24/7 on your machine, instead just commit the files to git and push to a hosted or self-hosted repository.

Chrome Extensions

The Great Suspender

While I did mention keeping extension/plugins to the absolute minimum. Because programming often involves a lot of open browser tabs (Which you will most likely hoard or forget to close). I recommend this extension.

Like the name suggests, it suspends idle tabs (you can configure how it works and exclude certain tabs based on some features).

An adblocker (ublock Origin)

I think most people who work anywhere near tech already have this. If you don't many sites loading trackers can have an impact on browsing speed. So this comes in handy.

Browsers & Browser Windows

Although I can't really give you the textbook explanation. One thing I do is work in a window where I am not logged in to anything. Not only does this help productivity but generally it makes my browser run faster, even searching stuff gets faster as well (my guess is that over-personalization can make things sluggish).

Final Thoughts

When you think about it most people who actually use what you make may not be on the best computers in the world so I guess you get to live their experience and avoid unnecessary fluff.

Whenever you are able to, upgrade your computer! it'll probably be a decent investment. From my experience the most important specs are RAM and SSD.

There are probably a million more little things you can do to make your computer more efficient. If you have any other tips, please leave a comment . I can edit the post and cite you :)

Original Blog: https://tobenxe.com/tips-for-programming-with-a-low-end-pc/

If you enjoyed the post you can follow me on twitter: https://twitter.com/tobenxe/

Thanks for reading.

Building a netlify lambda function to turn twitter lists into email digests.

tobe — Tue, 07 Apr 2020 15:06:19 +0000

I'm probably not the only one who feels overwhelmed by the overall panic on social media right now.

I've decided to code some sanity back into my life by creating a netlify lambda function that emails me tweets once a day.

Github Link

Tutorial: Setting Up

Things we need

A free sendgrid account and API key
A netlify account
A twitter API key and API secret
A public twitter list
A cron job service that allows you to set headers (what I found: cron-job.org — free, easycron.com - free trial) or if you have a server you should be able to set this up yourself.
Some understanding of Javascript & HTTP.
An email

We need to create a node project and install dependencies. Run the following commands in your project directory. You should have a package.json/package-lock.json file and a node_modules folder afterwards.

npm init -y
npm i netlify-lambda @sendgrid/mail encoding twitter-lite dotenv-webpack

netlify-lambda - helps with bundling and local development.

@sendgrid/mail - helps us use sendgrid's mail API

twitter-lite - a wrapper for twitter's API

dotenv-webpack - setting local development environment variables (not covered in this post check out the github repo)

encoding - was installed to solve a deployment error I encountered (issue).

Project folder structure

Create the following files according to the structure below. (node modules, package-lock.json and package.json should already be there)

node_modules/ 
src/
  lambda/
    digest.js 
  utils/
    twitter.js 
    sendgrid.js 
    email.js 
netlify.toml 
.gitignore 
package.json 
package-lock.json

Creating the digest

We have to do 3 things (Only 2 of which require writing code):

Get tweets from a twitter list.
Send out an email containing those tweets.
Schedule emails to be sent every day (or whenever) with cron-job.org

Below is our lambda function (digest.js) which brings together the different components of the function.

The first thing we do is add some basic authorization and validation of the request. A valid request to the function needs to:

Have a request method of POST
Have an authorization header
Have the proper value in its authorization header

NOTE: I will be using process.env to refer to variables that would be set later on when deployed.

I am returning the status code of 404 in order to avoid revealing whether the endpoint exists. My rationale is that 404 - Not Found is more likely to deter some bored spammer/attacker than 401 - Unauthorized.

//digest.js
const twitter = require('../utils/twitter');
const sendGrid = require('../utils/sendgrid');

exports.handler = async (event, context)=>{
         try{
             //Validate the request method and the authorization header
             if(event.httpMethod != 'POST') return {statusCode: 404}
             if(!event.headers.authorization)  return {statusCode: 404};

             //check for valid authorization value
             const basicAuth = (new Buffer(`${process.env.AUTH_USER}:${process.env.AUTH_PASS}`)).toString('base64')
             if(event.headers.authorization.split(' ')[1] !== basicAuth) return {statusCode: 404};

             //Get tweets
             const tweets = await twitter();

             //Send email if there are tweets available
             if(tweets.length > 0) await sendGrid(tweets);

             // success
             return {statusCode: 200}
             
         }catch(err){
             console.log(err)
             //error
             return {statusCode: 500}
         }
}

The rest of the function involves calling the modules we imported at the top. One is a function that authenticates with twitter and gets tweets from our list (twitter.js). The other sends out our email (sendgrid.js).

1) Getting tweets from our twitter list

//File - twitter.js
const Twitter = require('twitter-lite')
module.exports = async () => { 
    //a) authenticate with twitter
    const user = new Twitter({
      consumer_key: process.env.TWITTER_KEY,
      consumer_secret: process.env.TWITTER_SECRET
    });
    const response = await user.getBearerToken();
    const app = new Twitter({
      bearer_token: response.access_token
    });

     //b) get tweets from list
    const data = await app.get('lists/statuses', {
                                list_id: process.env.TWITTER_LIST_ID,
                                tweet_mode: 'extended'
                            })

     //c) get only the necessary data & return tweets
    const tweets = data.map(tweet=>{
        return {
            text: tweet.full_text, 
            user:tweet.user.screen_name,
            url: `https://twitter.com/${tweet.user.screen_name}/status/${tweet.id_str}`
        }
    })

    return tweets;
     
}

a) We installed a package called twitter-lite which is a wrapper for the twitter api. To authenticate we just need our twitter api key (TWITTER_KEY) and twitter api secret (TWITTER_SECRET) passed into the packages Twitter function.

Twitter's API has user authentication and app authentication. We are using app authentication we just need a bearer token to start making requests to twitter's api. The package takes care of basically everything, you can see the full documentation for twitter-lite here

b) We can use twitter-lite to get tweets from a list by calling the get method on "app". The object being passed into app.get( ) contains the query parameters needed for twitter's lists/statuses endpoint.

This includes the id of the twitter list(list_id) and whether we'd like to get the full tweet versus a truncated version of the tweet (tweet_mode). It returns an array of tweet objects when done.

c) Once we have the tweets, we only need a few bits of information (the tweet text, the username of the "tweeter" and the tweet URL). Using the array map method we can create a new array that only contains the necessary data from each tweet.

2) Sending the email.

//sendgrid.js
//a) set sendgrid's api key
const sgMail = require('@sendgrid/mail');
const createHtmlEmail = require('./email');
sgMail.setApiKey(process.env.SENDGRID_KEY); 

module.exports = (tweets) => {
    return sgMail.send({ 
            to: process.env.MY_EMAIL,
            from: process.env.MY_EMAIL,
            subject: 'Your Tweet Digest',
            html: createHtmlEmail(tweets), //b) create html email & send
            });
}

a) Here we import sendgrid's npm package, set the api key for sendgrid and import the module that helps us create the HTML email containing the tweets.

b) sgMail.send( ) takes in an object with some information about the email we need to send. To get the value for the "html" property we call createHtmlEmail and pass in our tweets.

Here is what goes on inside the createHtmlEmail function. We are essentially inserting our tweet data into html and returning a string of html. This is very easy to do thanks to template literals.

//File - email.js
//creates the html email
module.exports = (tweets) => {
    let tweetElements = '';

    //insert tweet data into elements
    tweets.forEach(tweet=>{
       tweetElements += `
                <div style = "width: 100%; border: 1px solid black; margin-bottom:10px; padding: 10px ">
                <p>@${tweet.user}</p>
                <p>${tweet.text}</p>
                <a style="color: white; padding:5px; background: black; text-decoration:none" href="${tweet.url}">Read Tweet </a>
                </div>
               `
    })
    //Wrap tweet elements in a div
    let email = `   
        <div style = "width: 40rem; font-size: 1.2rem; margin: 0 auto">
            ${tweetElements}
        </div>
    
    `;
 
    return email;
}

sgMail.send() returns a promise which is why we use the await keyword in our lamda function(digest.js).

Deploy the function !

Before we deploy, we need to edit a few files

package.json - adding a build script
netlify.toml - adds a build command and lets netlify know what folder our function is in (src/lambda)
.gitignore - removes our node_modules folder from git tracking

//package.json
"scripts": {
    "build:lambda": "netlify-lambda build src/lambda"
}

//netlify.toml
[build]
  Command = "npm run build:lambda"
  Functions = "lambda" 

//.gitignore
node_modules/

Now we can commit the project to github.

git init
git remote add origin <link to git repository>
git add .
git commit -m "commit message"
git push origin master

We can now login to netlify. You should see the option to create a new site from git, once you click that you'll go through a 3 step process where you choose your git provider, authorize netlify and pick a repository. The most important is step 3 where we have build options.

Clicking "Show Advanced" then "new variable" should let you add environment variables (the process.env prefixed stuff throughout the code).

Here is a list of the variables that need to be set

Name:           Description:
TWITTER_KEY     your twitter API key
TWITTER_SECRET  your twitter API secret
AUTH_USER       a username (does not have to be your twitter username, just come up with something)
AUTH_PASS       a password (does not have to be your twitter password, just come up with something)
YOUR_EMAIL      your email
TWTTER_LIST_ID  id of your twitter list, it is simply the numbers at the end of the URL when you are on your twitter list
Example:  <https://twitter.com/i/lists/1234> will have a TWITTER_LIST_ID of 1234

The github repository explains some of these environment variables a bit better. After filling in the environment variables the project can be deployed.

Scheduling the function to run every day.

You should be able to access your function's url like this:

https://[DEPLOY_URL]/.netlify/functions/digest.js

[DEPLOY_URL] represents the site url shown in netlify's overview dashboard for your deployed site. For example if your site's url is example.netlify.com then your function url is:

https://example.netlify.com/.netlify/functions/digest.js

We'll be using a cron job on https://cron-job.org to call the function's url daily. After signing up on the site you should be brought into a members panel where you can click "Cronjobs" on the upper left navigation bar then click "create cronjob".

Now fill out the form

Title - Any name you want
Address - your function url (https://....)
Check "Requires HTTP authentication"
- User - same as AUTH_USER set previously
- Password - same as AUTH_PASS set previously
Schedule - set the schedule for any time interval (I'm using every day)

When you are done with that, click "create cronjob". You'll be redirected to a page listing your current cronjobs, now find the newly created job and click "edit".

In the edit form page you can scroll down to find "Advanced Settings" which allows you to change the request method from GET to POST then save the form.

and.....

That's it!

Results! :D

Looks decent.

There are lots of improvements to be made of course, so if you have some ideas to improve it you can go ahead and contribute to the project on github.

: D

Resources:

Github Repository

Original Blog Post