Need to install a specific version of Yarn? Simply run the command below in your terminal. Replace 1.19.1 with the yarn version you want to install.
curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.19.1
Oh, just a software engineer's little blog.
Need to install a specific version of Yarn? Simply run the command below in your terminal. Replace 1.19.1 with the yarn version you want to install.
curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.19.1
So let’s say I have a React component written in TypeScript with a private member variable that I would like to unit test. The component is very complicated and I need to make sure the private variable has the correct value, and it looks something like this:
export class HelloWorld extends React.Component<Props, State> { private message = "foobar"; public render() { return <div>Hello World</div>; } }
If I mount the component with Enzyme, I can find the component, but I cannot see the private variables inside it. One thing I can do is to create an interface of that component just for testing purposes. In the interface, I can reveal the private variables, like this:
interface HelloWorldInstance extends React.Component<Props, State> { message: string; }
With this interface created, I can mount the component, get the instance of it, and do a type assertion. Now I can test that private variable without TypeScript complaining:
describe("HelloWorld", () => { it("has correct message", () => { const wrapper = mount(<HelloWorld />); const helloWorld = wrapper.find(HelloWorld); const helloWorldInstance = helloWorld.instance() as HelloWorldInstance; expect(helloWorldInstance.message).toBe("foobar"); }); });
I recently made a very simple website with Next.js that would display the 5 newest YouTube videos from a particular channel using the YouTube Data API. I quickly learned three things after deploying the code to Netlify and Now:
At this point, I decided to look online to see how to run an Express server with Next.js so I can keep the private API key hidden in the backend and so I can always display the 5 latest videos without needing to redeploy my code. Here are the steps I took starting from the beginning.
Run these 2 lines to initialize the project and install Next.js, React, and Express:
npm init npm install --save next react react-dom express
Now edit the package.json file to make the scripts section look like this:
"scripts": { "dev": "node server.js", "build": "next build", "start": "next start", "deploy": "NODE_ENV=production next build && NODE_ENV=production node ./server.js" },
Tip: Use “nodemon server.js” when you are devving so every time you make a change to the server.js file, it will automatically restart your server. Run npm install -g nodemon to install the utility.
Create a folder called “pages” in the root directory with a file named index.js inside the folder. Add the following code into pages/index.js:
function Home() { return (<div>Hello next.js on express!</div>); } export default Home;
This small block of code simply displays a short message when someone visits the website.
In the root directory, create a server.js file and copy/paste the following code. Credit to tilomitra’s blog post: Building Server-rendered React Apps with NextJS.
const express = require('express'); const next = require('next'); const dev = process.env.NODE_ENV !== 'production'; const port = process.env.PORT || 3000; const app = next({ dev }); const handle = app.getRequestHandler(); app.prepare() .then(() => { const server = express(); server.get('/test', (req, res) => { res.send('Hello from express!', 200); }); server.get('*', (req, res) => { return handle(req, res); }); server.listen(port, (err) => { if (err) throw err; console.log(`> Ready on http://localhost:${port}`); }); }) .catch((ex) => { console.error(ex.stack); process.exit(1); });
The ~30 lines of code here basically creates an express server where you can have custom endpoints for you to do API data fetching. For example, you can create a /api/videos endpoint for fetching and returning JSON data by adding this block:
server.get('/api/videos', async (req, res) => { const apiResponse = await fetch('https://example.com/api'); const apiData = await apiResponse.json(); res.json({ totalVideos: apiData.totalResults, videos: apiData.items, }); });
In the /pages/index.js file, you can do a fetch on the /api/videos endpoint and render the data however you’d like.
Now that the code is done, I decided to deploy to AWS Elastic Beanstalk because I have used AWS for other projects before. It was fairly easy but I will outline the steps.
First, go to the Elastic Beanstalk page and click on “Create New Application” at the top right corner. Fill out the application name and a description.
You should now be on the newly created application page and it’ll tell you to create a new environment.
Click on “Create one now” and select “Web server environment“.
On the next page, you can name the environment anything you’d like, pick a nice domain, select Node.js as the preconfigured platform, and then upload a zip file of the directory with all of the code created from the beginning of this blog post.
Click on “Create environment” to start the process!
After a few minutes, you should see your completed environment.
Almost done. Click on Configuration on the left side and then click Modify in the Software box.
In the Node command input box, enter: npm run deploy. This makes the environment run the deploy script as defined in the scripts section in the package.json file.
Make sure to hit the Apply button, and that’s all there is to it! The code should be deployed and reachable through the elastic beanstalk domain (i.e. <domain>.us-east-1.elasticbeanstalk.com).
Too lazy to create the files and copy/pasting the code? Download the files from the repo I made here: https://github.com/doobix/nextjs-express-demo
Hope this was helpful, let me know your thoughts in the comments section!
I’ve just enabled HTTPS on seewes.com, which was fairly easy to do on Dreamhost! Here is the breakdown done in 3 steps.
In the Dreamhost admin panel, click on Domains and then SSL/TLS Certificates. Now in the list of domains, click on the Add button and select the Let’s Encrypt SSL Certificate option.
This is probably the longest and most tedious part of converting your website from http to https. Every image, stylesheet, and script source on the website needs to start with https. For me, I manually updated the image URLs on every single post that had an image. Luckily there weren’t that many. If you don’t update the URLs, the browser will show a mixed content warning:
Now for the last step, we want people who visit the http version of the website to automatically be redirected to the https version. All we have to do is open up the .htaccess file in the root directory of the website and add these lines to the very top of the file:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
Success!
I’ve published my first Android app! 🎉 This is yet another Barbell Weight Calculator, pretty much a copy of my web app version. The main differences are: 1. it is an installable Android app from the Google Play Store, and 2. it can calculate percentages of your one rep max!
Since this app was created using React Native, the code can be built for Android devices, as well as iOS devices. I would love to put this app in the Apple App Store, however, Apple charges a yearly developer fee of $99! Google, on the other hand, charges only a one-time developer fee of $25. So in the mean time, I’ll only be supporting the Android version of the app.
If you have an Android phone, check out the Play Store link below! Otherwise, feel free to take a look at the code on GitHub.
Google Play Store: https://play.google.com/store/apps/details?id=com.seewes.barbell
GitHub: https://github.com/doobix/barbell-native
Screenshots:
Hi! Haven’t updated this blog in a while. Just wanted to say that I made a little web app using React to make calculating barbell weights easier.
For example, if we’re trying to lift 210 pounds, which plates do we need to get? By using the web app, it quickly tells us that each side of the barbell needs to have: 45lbs, 25lbs, 10lbs, and a 2.5lbs.
Check out the web app here: http://barbell.seewes.com
GitHub repo here: https://github.com/doobix/barbell
Recently, Valve had released their Counter-Strike: Global Offensive game state integration for developers to use. This allows the game client to send all game data, such as the player’s health, guns, ammo, frags, etc. to a HTTP POST endpoint server.
After seeing the PGL Arena Effects in the DreamHack Cluj-Napoca CS:GO tournament a couple of months ago, I decided to make full use of my Philips Hue lights in my room by recreating the C4 bomb lighting effects.
Since I’ve been coding in Python a lot recently, I stuck with this language for this project. First, I had to create the HTTP server to receive the POST game state data, so I used the Flask microframework. I launched the Flask server and joined a game in CS:GO, and immediately I was seeing tons of JSON being received in the terminal window. All I really needed was the C4 bomb information, which I was able to find in data['round']['bomb']. By checking that key, I noticed there were 3 values if the key existed: planted, exploded, and defused. If the bomb isn’t planted, there won’t be a bomb key in the round object at all. So after getting the bomb status, I made the server write the result to a file conveniently named bomb_status.
Now I had to do the fun part — making my Philips Hue lights turn on and change colors. I went step by step with the Philips Hue API Getting Started guide, and it was very easy to follow and understand the RESTful interface. Once I understood how to control the Hue lights, I wrote a 2nd Python script for reading the bomb_status file. In this 2nd script, I have a while loop that runs indefinitely, with a 250ms wait time in between each loop. In each loop iteration, it gets the bomb status and goes through a series of if-statements to determine what to do. Here’s the run down of it:
And that’s basically it.
My Python code is now on GitHub:
https://github.com/doobix/csgo-c4-hue
I have created a Node.js version of the same code, also on GitHub:
https://github.com/doobix/csgo-c4-hue-node
A video of the script in action is uploaded to YouTube:
https://www.youtube.com/watch?v=QBdI54MHB-k
Reddit thread:
https://redd.it/3wjpgg
If you’re interested in learning some programming, I recommend checking out some of the free courses on Code School. They have some very good instructional videos, and they give you assignments to do after each video is watched.
If you enjoyed the free courses, you can sign up through this special link to get full access for only $9 for the first month: http://mbsy.co/cr67n. After that, the price goes back to $29/month, but you can cancel the subscription any time.
After getting a new MacBook for work, there were a few things I did to make it better for coding, which I have listed below.
Oh-My-Zsh is an open source, community-driven framework for managing your ZSH configuration. It comes bundled with a ton of helpful functions, helpers, plugins, themes, and a few things that make you shout… “Oh My ZSH!”
To install, run this command in terminal:
curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
A theme with a nice color palette to make looking at the terminal easier on the eyes.
The best text editor for coding.
Edit ~/.zshrc , and add this line to the very end of the file:
alias subl='/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl'
Restart terminal for the change to take effect.
One of my domain names is expiring this month, and it would cost $11.98 + a $0.18 ICANN fee to renew for 1 year on Namecheap.com. I’ve been using them for a while now (since 2009), and I think it’s time for a change.
Google Domains (beta) came out this summer, and their domain price is exactly $12.00 for 1 year. Not to mention, they include some cool FREE features, such as the whois privacy guard and up to 100 email aliases. Namecheap.com charges $2.88 for their whois privacy guard, and $9.88 for only 1 email mailbox.
So, it was a no-brainer to transfer out of Namecheap.com and into Google Domains.