DEV Community: jeffrainey

Web Development on a 13″ MacBook Pro M1

jeffrainey — Mon, 15 Feb 2021 21:53:20 +0000

Last week was super busy and I was cranking late, testing a project that would be rolling out for release the next morning. I made some final adjustments before putting an old friend to sleep for the last time. My 2015 15″ MacBook Pro had served me well for years but when trying to awaken it the next day I got the flashing folder of doom.

I tried many things to bring the machine back to life including:

Reset the NVRAM
Reset the SMC
Startup in recovery mode
Startup in diagnostics mode

Everything was pointing to SSD failure. I had another SSD since I had upgraded mine a few years ago and even that one wouldn’t work. Recovery mode was not showing the drive at all. After losing half a day of a work it was beginning to look as if the issue is connectivity to the drive. It could be as complex as the logic board or maybe the issue is someplace else… I gave into the fact this was not going to be resolved quickly and decided I needed a new machine and fast. My old 2015 was heading for retirement before this but I was holding out for the 16″ MacBook Pro M1 or whatever M chip it will have. I like a larger machine, screen and was leery about having only 8GB of RAM on board. But, beggars can’t be choosers so I snagged the last one from my local Best Buy. I also needed to get up and running quickly, so downloading my image from Backblaze was not really an option. So, I opted to get the HDD version of my data and restore as I go. That should be here later this week.

FIRST IMPRESSIONS

Out of the box this thing looks and feels great. It weighs much less than my 2015 model and is much thinner. Yes, it is smaller but still the weight very noticeable. The 13″ MacBook Pro is also really snappy compared to my old 2015 model, another plus. I have mixed feelings about the Touch Bar. On one hand having emojis available while typing is kind of nice. I have also seen a few more decent uses of this but overall, I just kinda want my buttons back. The touch pad to unlock is kinda cool but nothing beats unlocking with my watch. However, passwords to sites and ApplePay with my finger is pretty nice. And, speaking of touch, the trackpad is HUGE. I was really concerned that I would be accidentally touching it all of the time, but it doesn’t seem to happen that often.

THE RAM

8GB of RAM… This was a huge downer and the thing I worried most about. I was constantly hitting the ceiling on my old machine with 16GB. To my surprise, these machines do more with less RAM and I have not had trouble with this yet. I am not quite sure how this is possible but it just seems to find a way.

BATTERY LIFE

Everything you have heard is true. The battery life is insane. I left work on Friday and worked on the machine over the weekend several times for maybe 4-5 total hours and the battery is still 3/4 full. For my old machine I had 2 cords, one for work and one for home. Initially I thought I would need a second cord for this Mac M1, but I really don’t think that is necessary. My monitor at work accepts USB C as an input so I may never even use the power supply that came with the machine. For now, it just stays in my laptop bag.

WEB DEVELOPMENT ON A MAC M1

Another major concern I had was how well this machine would do with web dev tools. I remember the move to Intel and parts of that did not go smoothly.

First up, Git

I didn’t have any projects load up yet and out of habit I ran to my development directory to get started.

CSS Lint for Target _blank, noopener and noreferrer

jeffrainey — Wed, 20 Jan 2021 18:09:56 +0000

If you have been developing websites for some time, you may know that adding a target of _blank to a link can have some unintended consequences. I sometimes find myself wondering which of these to add and and having to look them up.

Summary:
Use rel="noreferrer noopener" at minimum. There is also a nofollow that you may want to use but this has less to do with security and more about passing “link juice” along to the site that you are linking to. When you do not use nofollow you are basically vouching for the site that you link to and this can also affect your SEO. So, just make sure to use nofollow when linking to sites that may not be as reputable.

WHY ARE WE DOING THIS?

The threat associated is called Reverse Tabnabbing. The issue is the webpage that we are linking our existing page to gains a partial access to the linking page, or in other words, the target page or url gains a partial access to our parent page from where the user is redirected to a new url.

This happens through the window.opener object of Javascript. The attacker can change the window.opener.location to some malicious page and also the parent page. In case the parent page has the same look and feel of the user intended page, he might end up sharing credentials or secure information assuming that the webpage is secure.

Hackernoon – https://hackernoon.com/unsafe-use-of-target_blank-39413ycf

WARNING MYSELF AND OTHERS WHEN WE FORGET…

WordPress does a pretty good job with adding these in the editor and I can add a linting rule for my own code. But, sometimes there are places where code or content can be added by site admins or editors in places where this may not get caught. To help find these, I am playing with the idea of this CSS linting rule.

Git Stash, Retrieving Items That Are Not the Most Recent

jeffrainey — Tue, 29 Dec 2020 12:47:12 +0000

Some Git commands like stash show are used regularly but not enough to keep top of mind. These are some commands I often find myself Googling for. If you are new to Git, checkout this post, Git 101 for the basics.

What is Stash?

Stashing work is a great way to set things aside for a moment. For example, I am working on a feature but a customer support request comes in that I want to see locally. No problem.

git stash

Now I can safely switch to master and see what is going on. When I am ready to jump back to my work:

git stash apply

git stash pop

I typically use the first one since the last not only gives me the last stash item, but also removes it from the stash history.

What if I want an older stash, not the most recent one?

This comes up for me occasionally and is one I find myself Googling for specific options. In this case:

git stash list

This brings up a nice list of your previous stashes if you haven't been popping them. They will look something like this:

stash@{0}: WIP on branch-name: (last commit hash and message here)
stash@{1}: WIP on branch-name: (last commit hash and message here)
etc.

This is fairly helpful but it doesn't really show what files I was working on...

Read On