Dark mode is all the rage. Safari Technology Preview added support for Media Queries. Chrome has already announced it will soon support Dark mode. The requirements are (as of writing this):
- Safari Technology Preview 68 or higher
- macOS Mojave 10.14
I'm personally not a fan of using dark mode and I'm no more correct than the person who prefers it. The point is that preference matters. Some users find it either more pleasing or perhaps reduces eye strain. The best part though is its a fun and easy hack:
Notably you can also detect light mode:
It's that easy. If you have a simple site, it's quick to retrofit. More complex sites (especially with image backgrounds or poorly written CSS) probably will require a lot more work. It took me about 10 minutes total to make a beta of dark mode. More info at developer.mozilla.org. One of the more promising features is eventually we will have media-queries for
prefers-contrastwhich is a big win for both designers and accessibility. Apple OSes already have a bulk of these features (macOS has invert, reduce motion, dark mode and low contrast, whereas iOS has increase contrast, reduce motion and invert) You can see them all at drafts.csswg.org. Allowing web apps and sites to sport these features probably will become a small but important design trend as users can exert greater control for experience over their OS and content they consume for the best visual experience based on preference and requirements.
If you visit this website now with dark mode enabled and the correct browser, you'll get to see dark mode in action! Now the real question: are we going to have a "dark mode first" movement? ;)
While writing a long-form retrospective on how Microsoft lost the browser wars, I realized managing a citation list is a royal pain the ass. With 50+ sources, I want a very simple light-weight way to manage a source list. The requirements were as follows for my auto-citation list generate:
- Generate a list from all the citations found within the article.
- Detect multiple instances of the same source.
- Number each
<cite>instance, if used before, use the correct number.
- Use anchor tags to link to the source at the bottom of the page.
I opted to use jQuery although I might kill the dependency as the biggest thing I used it for was queries, each, appending and writing HTML. All easier to write with jQuery but in the era of wide support for
The process was pretty easy, the script creates an array of objects based off of the jQuery object, iterates through the array each time a new item is added to make sure there isn't a duplicate URL, and if there isn't already a duplicate, it's that entry to the list. The assembled array is iterated through so its data can be written the DOM. Duplicates are detected using the source URL.
I styled it after Wikipedia and may add in the link to the instance of the citation in the article like Wikipedia. It'd be easy to add additional information to the citation if needed such as "data retrieved", but in the case of my blog post, that'd be the date written.
Today we’re announcing that we intend to adopt the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility for our customers and less fragmentation of the web for all web developers.
Microsoft Edge will now be delivered and updated for all supported versions of Windows and on a more frequent cadence. We also expect this work to enable us to bring Microsoft Edge to other platforms like macOS. Improving the web-platform experience for both end users and developers requires that the web platform and the browser be consistently available to as many devices as possible. To accomplish this, we will evolve the browser code more broadly, so that our distribution model offers an updated Microsoft Edge experience + platform across all supported versions of Windows, while still maintaining the benefits of the browser’s close integration with Windows. - Joe Belfiore , Microsoft Blog
In a two-in-one announcement, MS is finally abandoning Trident (forked to EdgeHTML), the once iron-fist scourge of the web. Edge was too little, too late, and still too broken. Browser engines though come and go, with names like KTHML (Konqueror) and Presto (Opera), to be replaced with WebKit, Blink (once fork of WebKit), and the obscure like Goanna (a fork of Gecko). Granddaddy, Gecko still stands tall and gets the last laugh as Netscape's ghost did the unthinkable: outlast both Internet Explorer and Edge.
It's entirely unsurprising MS is bringing Edge to MacOS as its a pretty low-lift with Chromium but doubtfully will gain any market share, as it joins the hoards of Webkit/Chromium reskins: Opera, Vivaldi, Yandex, Brave, Comodo Dragon, Amazon Silk, Samsung Internet, Torch, Slimjet, Steam's internal browser and so on.
It makes my life easier but makes Edge effectively uninteresting and forgettable.
The CBC's report 'Complete control': Apple accused of overpricing, restricting device repairs is a must read/watch although imperfect as it's a sample size of 1. There's a few reads from my estimation and none of them are particularly good:
- Apple purposely recommends fixes that users do not need like a scandelous mechanic. I find this unlikely but it isn't implausible.
- Apple's genius techs have degraded in quality due to shortcomings with Apple as an employer and. I find this compelling, I emailed this story to Nick Heer of Pxlnv and he replied with this, so credit to him.
- Apple keeps a tight lease on it's repairs, and will only perform certain operations due to volume of repairs it makes and is uninterested in low hanging fixes. Apple has a paint-by-numbers repair shop that doesn't account for things like replacing a single cable, but rather an entire display as these are "known" fixes that reliably fix a host of problems, eliminating the guesswork and downplays the individual tech's required diagnosis. This acheives a few goals: problems are fixed with impunity. Techs are required to do little to no guesswork. Techs can be trained to do several big tasks instead of potentially hundreds of small tasks. Apple maintains a steap profit margin by selling the expensive-yet-effective service (or selling a new computer). This is personal theory (and probably corrolates with the above.).
- Lastly, the CBC encountered an edge-case/outlier, and the tech who proposed the fix was in error or a sub-standard tech. That said, the CBC isn't the first person to make this argument, plenty of bloggers/youtubers and techs have accused Apple of proposing ludicrous fixes.
This all compounded by the fact Apple purposely makes its devices and computers non-userserviceable, going as far as to engineer non-standard screws, using glue to seat components, not provide 3rd parties with any manuals and the clamping down on authorized Apple service locations, and making user hostile designs. While the complexity of the ever increasing desire to shrink designs has stressed component placement, Apple takes extra steps to discourage users from exerting control on their own devices. This is where the CBC's report picks up. Instead of a simple hit piece on only Apple, as the world's most profitable company and arguably the most popular electronics maker, they are used as the canary in a coalmine and a segue to the right to repair.
If you haven't heard of right-to-repair, I suspect it's going to be a larger movement it extends far beyond just consumers and their gadgets, look no further than John Deere's war against farmers and in 2014, a minor victory occurred when pledged to honor right to repair, although Tesla seems less inclined to do so.
I feel my stake as someone who's written an 11,000+ word guide on upgrading/fixing/maintaining Mac Pros and have often lamented planned obsolescence and the death of modular computing.
If you have a minute, I suggest taking up the cause. It's easy, the following three organizations all have comprehensive ways to take political action and links to legislation.
Right to Repair Action
I just had the epiphany that five years of blogging came and went without me noticing. I've only done one respective after two years of blogging, back when this blog was still on Tumblr.
On April 9th of 2013, I launched this blog on Tumblr of all places as a way to help obtain a better career. I was under the impression, all good developers have a social media presence but I never wanted to use Twitter, and in hindsight, I'm happy I never did. Instead, I decided to eschew social media for something more thoughtful, and somewhat impersonal as I like my privacy. I lived in a different city, had a different job, and was a homeowner. I suppose it helped, my initial blog posts mostly consisted of hot takes on tech news, inspired by Daringfireball and Pxlnv but it didn't benefit anyone.
In 2013, shortly after landing my current job, I realized that long-form posts mattered. I drastically reduced the frequency of blog posts, from near daily to only a few a week, and eventually trickled down roughly 1-4 a month post-2016. In 2016, I moved out of Tumblr to Jekyll as I didn't care for the Tumblr community and never interacted with it. Tumblr added bloat where I didn't need any, I already had customized my Tumblr theme to hide community interaction. With Jykell, I was able to more create an even more minimalist blog, hyper-focused on the reading experience, so much so as to avoid using images except when helpful.
The Best of this blog...
Not all my blog posts are equal, some require hours upon hours of writing and effort. Below are just a few standouts, and posts that are representative of the evolution of this blog.
- The Future is a gated community - Not all my reactions are clever or insightful but this probably represents the pinnacle of my early era "hot take" style. The only thing that'd make it fully representative is if I made a few snide remarks about AppleInsider, which tended to sneak into my snark, examples here, here, here, and here.
- A Front-End Developer’s Guide To Reading Job Postings - One of the rare humorous posts, I thought it was clever.
- 9 months with CodeKit 2 - this was the turning point essay that became the lynchpin and archetype of my "write-for-everyone" long form essay style writing, often complete with glossaries and indexes, which lead to One week with Pixate, A week with the Focusrite Scarlett 6i6, Three months with Backblaze and even iOS Emulation, gamepads, Cydia, Xcode, builds.io - A Tutorial for iOS emus. My emulator post probably the most time I've spent for so few page views, this borrows heavily from the CodeKit 2 Review format and includes custom art, something I rarely do for this blog.
- 9 Weeks with CodeKit 3 - My favorite piece as it's the culmination of my long form blog posts and is now my template.
- The Definitive Classic Mac Pro (2006-2012) Upgrade Guide - Easily the longest (and most popular based on traffic predictions) article I've written. Also includes jabs at AppleInsider.
Top Ten Blog posts of the past five years (as per google analytics)
All page-views are cumulative from dated posted to Oct 18th, 2018. For a blog that's entire strategy is to toss web posts out into the ether, my blog now averages roughly 15k page-views a month as per google analytics (19k if you go by my server stats, + a fraction in RSS). It's surprising as I don't have any sort of compensation, or motivation to post as I haven't made a cent from this, and if you consider the web hosting fees, it's actually cost me money. I do not advertise this blog, nor post about it elsewhere, nor try and drum up traffic for it and my SEO strategy is limited to "put alt tags on images". I'm not part of any online community either thus the entirety of my audience is good ol' organic searches and other people linking my blog.
- Setting up MAME Arcade emulation & NeoGeo via OpenEmu on macOS (OS X) - 12/15/2016 - 25.5k page-views
- How to fix Far Cry 4 Common Glitches - Black Screen - Uplay stopped working - Save Game will not save - 2014/12/15 - 24.1k page-views
- Getting the PPP Username / Password for CenturyLink Zyxel C1000Z Modem - 10/7/15 - 20.7k page-views
- Installing PPSSPP on iOS 11 without a jailbreak - 10/16/17- 17.6k page-views
- Adding Ringtones - text tones to - iOS using iFile - 12/12/2014 - 15.2k page-views
- The Definitive Classic Mac Pro (2006-2012) Upgrade Guide - 05/07/2018 - 12.5k page-views
- Converting .bin .cue to ISO with OS X using free and commercial utilities - 01/03/16 - 11.2k page-views
- Recommended Mac Pro upgrades & hacks - 05/07/2018 - 11.7k page-views
- Mockup Prototyping - Wireframing Utility - App Roundup 2013 - 05/30/13 - 11.0k page-views
- Installing a GeForce GTX760 (GeForce GTX770/GTX780) into a 2006-2008 Mac Pro - 10/04/14 - 10.7k page-views
Gaming isn't a regular feature of this blog, three of the top ten (four if you count the GeForce post) dominate my top posts. I did my penance with gamers, having every pejorative to slander ones sexuality tossed at me when I ran a video game cheats site (as it paid the bills in college) and while I play video games occasionally, I'm not a gamer. That experience was LONG before, the rise of "gamergate" in the early 2000s and the only thing that's change is the toxicity has been weaponized. My gaming posts, generally tie into emulation, which is far removed from current events and holds a delicate balance of nostalgia and technical challenge.
Better, there are three posts related to the Mac Pro (four if you count the GeForce post). My blog is ostensibly about macOS, so I'm happy to see those in the mix. Notably, none of my web development posts crack the top ten, although my Pure Scss Circle Progress Bar is number 12 and rising.
So will this blog be around in 5 years? I don't know, but hopefully, I've helped people along the way with annoying problems. That's been the goal, and I seem to be reaching far more people than if I were to do this via social media. I'm proud of that.
HTML offers the
<canvas>, but with some limitations, it's pixel based but can use SVGs but generally meant as "viewport" as opposed to DOM spanning. Rather than go into the "whys," Canvas doesn't quite fit what I'm after to create. SVGs can be positioned via absolute positioning anywhere on the viewport (just like any DOM object). Unlike other image types, the content inline SVGs can easily be altered via the DOM as they're XML data. This means I can easily change the color, or size, even shape of objects.
Hopefully, this tutorial is understandable for novices, more seasoned devs may want to skip the bottom for the codepen example. I've written my tutorial using only ES5 syntax although my codepen has some ES6 syntax.
- Draw an SVG line between objects on the screen.
- On resize change the SVGs position in objects on the screen have changed.
- Allow to have lines between multiple objects, and do this dynamically.
The above will create a black line 1px wide that starts at 0 pixels and span 100 pixels to the right and 100 pixels down, to create a diagonal line.
Pictured: simple SVG line using the above code
It's 2018, but jQuery still has its place,
offsetreliably can get us the absolute positioning of elements on the screen to the document as its base even if they aren't absolute positioned. This isn't a complete win for our goal of drawing a point between two objects as this only gets us the top-left corner of our a
<div>. We need the center of that a
So with a bit of simple math, we can figure out the center position of a
<div>by querying the width and height of the div and dividing by 2, then adding it to the offset position. This will measure diagonally to the center.
Now to draw an SVG, we need two sets of center coordinates. X1, Y1 and X2, Y2.
Now if we just apply this to
#mySVG, we can draw a line that goes between the center of these two hypothetical DOM objects. We want to place the SVG in our body tag and then give it some really basic styling in CSS so it can occupy any space on the viewport.
Not bad right? What happens if we resize? Our hypothetical DOM objects on the screen might move, thus we'd need a window resize event. We better make this a function now, and clean up the legibility first.
Adding resizing is pretty easy now:
Pretty nifty right? Now that we've covered the basics of drawing and redrawing the SVG, we can use jQuery's
cloneto duplicate our line within our SVG and call our drawSVG multiple times.
This isn't very dynamic as we're assuming we always know that we want to draw a line between 3 things on our screen. We're getting close but this isn't dynamic. It's time to break out .each and convert what we have into an object to cut down on our mess. We're going to do a few changes. First let's simplify our SVG.
Now that we're going to copy and paste our SVG, we don't need any co-ordinates. In fact, we do not want them at all until. A line without the required
y2won't be rendered to the screen. This works for us as we want to use this as a template for future lines but do not want our original to display.
Also, for legibility, we can turn the messy code above into something more readable and hopefully maintainable.
Let's also assume all our hypthetical myPoints use the class.
.myPointand not IDs. We can now call our function
drawBetweenObjects.drawSVG($(".myPoint"), more paramets)
iterateOverObjecthas some funky stuff, such as
$(this)which you have probably seen before. jQuery's
thisaren't quite the same, What's the difference between '$(this)' and 'this'? but in the array of objects, it will use the current entry. Next we will need to select the next item in our query,
eqcreates a new a query to the specific entry on the array of objects. So if I ask for
var myLi = $("li"), and there are four
<li>s on the page,
myLi.eq(2)would only require the data for the second
<li>. Using our index, we ask next in the list, using
index + 1.
Now we can update our script resizing.
Removing old clones
If you run the code, you'll be able to redraw the points, but the problem is our old lines are still in the DOM. So the best place to remove them is before we re-iterate over the object. So before we create new lines, we delete the old ones. Time to add a simple jQuery remove to the
Now we should have an SVG line that will draw between any DOM objects with the class of
.myPointand redraw the lines on a window resize.
Below is the hyper spiffy version that has a config file and the ability to delay rerenders on resize. To make this work for pages larger than 100vh, the SVG height of the
#svgwould need to set the height as
It'd be feasible to make this without jQuery, by replacing jQuery with
Document.querySelectorAll()and removing the offset with techniques such as
SMIL, CSS animation and a bag of hell
It's late 2018, and if you're like me, you've probably been tasked to animate an SVG and now left to wonder, "What's the state of SVG animation? Isn't SMIL dead? Does CSS work?"
Long ago, SVG was boxed with its OWN animation specification, called SMIL ( Synchronized Multimedia Integration Language) which origins date back to 1999 and was adopted by the W3C in 2001 with SVG 1.0. Despite its spec, it never was adopted by Microsoft in IE or Edge, and its continued support is in question. Google announced in 2015 it's intent to depreciate SMIL support. This has been the proverbial nail in the coffin, but SMIL still works in Chrome, Safari, and Firefox (for now). There's no timeline for when SMIL will be dropped.
Rather than recant all of SVG animation, I highly (and I stress) highly recommend CSS-Tricks's SMIL is Dead, long live SMIL, which outlines SMIL and alternatives. The cliff notes are as follows:
- CSS Motion paths are only supported by Chromium-based browsers - this means no Safari, FireFox, Edge
- There's multiple libraries for morphing SVGs, including >Greensock, snapsvg and SVG Morpheus
- SMIL allows DOM events, but plain ol' vanilla JS works fine... and >Greensock.
- On animation complete works with SMIL, but also can be also be done via CSS by using simple CSS delay animations... and Greensock.
The SVG Path d and points attribute and CSS
CSS animations are the supposed heir to SVG animation. However, there's a lot of issues that arise. It's quite easy to use CSS to animate SVG fill properties, opacity, and even positions and basic shape using CSS transforms and using declarations such as:
So to tabulate the score: SMIL isn't supported in IE or Edge, and its fate isn't looking good. CSS doesn't a complete replacement as FireFox/Safari/Edge will not animate via CSS transition SVG point changes.
Greensock to the rescue
Greensock is pretty much the beginning and end to SVG animation (if you couldn't tell by the CSS tricks summary), there's SVG.js, Snap.svg (which seems to be mostly forgotten), Anime JS, and somewhat feature-limited Raphael (and a few one-off effects like Vivus, kute.js/SVG Morpheus) but none offer the power, flexibility, and ease of use of Greensock. Greensock makes cross-platform animation easy and compatible. It's also performant. Downside? It's a paid library.
Below is my hastily written test animation. Each point on the animation is given random values to move to, to create a jittering effect.
So here we are in 18, and the most reliable way to animate an SVG is via a paid library. I have to say though, Greensock's multiple SVG libraries are easy to use and impressive. I was hoping for a little more diversity, but with CSS motion paths and transitions only under consideration by other browsers, things aren't looking too great for SVG animation.
Removing inline Transforms from an SVG while preserving point positions and/or Install Inkscape Plugins on macOS
So you're probably here since there's not much info on the web on how to remove inline transforms from an SVG without wrecking it or perhaps you're unsure how to install Inkscape extensions on MacOS. Either way, hopefully this short tutorial should help. SVGs are a complex mish-mash of XML that can include CSS transform which can be undesirable for various reasons. Occasionally, converting formats like EPS to SVG in Illustrator will litter an SVG with transforms. Below is how to remove them.
Step 1: Download and install Inkscape
Go to Inkscape and download the release, macOS users will need to nab the OS X x11 release. If you haven't used an X11 app you may need to install xQuartz. XQuartz (x11) is a GUI library for cross-platform applications to run in macOS.
Step 2: Download and install the Apply Transforms plugin for Inkscape
Next, go to Inkscape applications, and right click and "Show Package contents".
The plugin for is in Contents/Resources/share/inkscape/extensions, drag both the
.pyfiles into this directory.
Step 3: Use Inkscape to apply the transforms
Launch Inkscape and open your SVG (Note X11 app UIs will look a little shoddy and the menus will be attached to the app window). Select all points. (Note: Inkscape will use windows/linux control key instead of command key).
This wasn't perfect for me, but was able to process and make my SVG 95% correct, just requiring me to move a few elements.
Last time, I wrote an Initial Reactions to the iPhone 7. Something strange happened to me this go around. My iPhone 7 felt "good enough" for almost all my daily usage, and I nearly didn't buy my 2-year upgrade cycle on my iPhone that started with an iPhone 3G, then 4, 5, 6, and 7... what sold me was finally getting a dual camera on a smaller phone factor. I pulled the trigger.
- The iPhone XS is the first time I didn't buy the maximum storage option. I use my camera a lot, but I also have a fair amount of my old photos on iCloud. My iPhone 7 had about 90 GB free when it came time to upgrade. It's the first phone I wasn't struggling with storage, and that includes my massive photo library and keeping about 20 GB of music locally on my device.
- I miss the headphone jack, and I found a case that offers one. I'll write a review as I have for the Incipio.
- I miss the home button, but I like FaceID. It allows for some futuristic features like not displaying text message contents before looking at the phone. It seems a little less finicky than TouchID, but I miss unlocking my phone without having to look at it.
- Not sure what the hell of having a glass-backed iPhone is. The iPhone 4 had it, and it was a mistake. Fortunately, I was able to replace the back with an aluminum back as the iPhone 4 was somewhat user serviceable. This is not. The glass is wonderful at picking up fingerprints but is less slippery that iPhone 6 or 7.
- Oleophobic tech hasn't drastically improved.
- The screen is amazing, and truetone is much less so. Going back to the iPhone 7 feels boxed in.
- Organizing folders in iOS is still as annoying as it was in iOS 5. It's slow and cumbersome. Even a desktop app for managing the phone would be preferable.
- The iPhone XS doesn't feel that much faster than an iPhone 7 out of the box.
- The camera is a massive upgrade. I want to default photos to 56mm instead of the wide angle lens. The low light performance is much improved.
- I'm not sure what sort of significant upgrades can be applied to the iPhone, you have gigabit LTE, 4 GB of RAM, optional 512 GB storage, Bluetooth 5.0, dual cameras, a 10 bit OLED screen, stereo speakers, much faster GPU, IPX68. The only display upgrade I can think of is 120 Hz like the iPad Pro, and possibly a 3rd camera lens. The other updates: CPU/RAM/GPU isn't going to wow consumers. Speed is great but at this point what I wouldn't give for LONG battery life and durability.
- Giant phones are here to stay. I really miss the iPhone 5 form factor. If I could have that with dual cameras, I'd eschew the iPhone XS form factor.
- The phone is heavy, like uncomfortably so for holding long periods.
- I haven't had any social media apps (unless you count untappd and goodreads) on my iPhone since my iPhone 6. I'll be curious to track my usage on Screentime. I've managed over the years to dial back my phone addiction, limiting my notifications, removing social media and such although its omnipresent. The downside of screen time is it counts non-interactive experiences like listening to audiobooks, NPR, podcasts and music all the same. I'm not looking at the screen and usually engaged in biking, driving, running, exercise, chores, shopping, cooking. I don't consider this as "usage" as its not interrupting my life, but rather complimenting it like my iPod did.
- I'm a bit worried about the durability of the iPhone XS. I'm active: I bike to work, go the gym 2-3 times a week, hike weekends, occassionally skateboard, cross country & downhill ski, kayak, paddleboard, and tried downhill mountain biking this summer. My iPhone 5 was the perfect size and I never used a case. I also went caseless with my iPhone 4, and managed to break it's voice attenna (but not wifi or even the screen) after a big longboarding crash that had me rolling on pavement. My iPhone 6 I broke twice, once with a case. My iPhone 7 I never broke but it felt delicate. I worry about the XS.
- Animojo and Memoji are gimmicks. Do people use these more than a few times? It's a lot of effort to make one for not much gain.
- Tranfering to my iPhone XS was pain free whereas my iPhone 6 to iPhone 7 was a nightmare. iOS 12 appeared to download recently apps first as apps like Gmail, Audible, Google Maps, Untappd, banking app, LA Fitness, HBO and a few recently played games downloaded first. That was pretty spiffy, especially when you have about 300 apps to download. You can read about my iOS upgrade issues with the iPhone 7 in Initial Reactions to the iPhone 7 .
- The iPhone 7 feels more premium without a case than the iPhone XS in hand, it's thinner and more importantly lighter.
- After a week, I kinda have a love/hate with the notch. the extended space for home screen and portrait apps looks fine but its pronounced as hell. It's an ugly concession.
- The camera bump. Where do I start? It's awful.
- Screentime is my new favorite feature.
- It felt zippy on my iPhone 7 and thus feels the same on my XS.
- Why can't I display battery percentage in the rabbit ears? What sort of Johnny Ive bullshit is this?
- ARkit could be big, but I still haven't found a daily or even weekly use for it.
- Siri suggestions seem nice but I really only use Siri to text while driving, sometimes change music while driving, and directions while driving. I don't use it in any other circumstance.
- I'd uninstall Animojo/Memoji if I could, its wasted space for me.
- I have so few notifications, (only I only allow Gmail and messages) that I didn't know notifications weren't grouped but that seems huge.
- Password management is nice but it ain't 1password.
- Apple's photo app is really an unsung hero,and its gradual improvements are fantastic. I love Highlights.
- iOS 12 isn't hyper exciting, but smartphones updates are pedestrian.
- I miss the iOS7 app switcher still.
Things I was wrong about
Looking back on my impressions of the 7, I figure it's fair I should self evaluate and self actualize. I'm hardly infalliable, and likely as wrong as I am right.
- Force Touch isn't the equivilent of the right click. It's unpredictable as its so under utilized and not the easiest.
- The Touch button the iPhone 7 was errie how well it simulated a click. I grew to love it, it wasn't really a gimmick.
Coolestguideontheplanet.com always has been my go-to spot for macOS upgrades and I'll be borrowing for some of the steps as it'll get you about halfway to enabling localhosts.
You'll need to either use a CLI utility like Nano or BBEdit. If using BBEdit, you will need to click the "Show Everything" box to view invisible files.
Step 1: Modify the httpd.conf
Open the httpd.conf
Uncomment the following lines by removing the
#in front of the line
Step 2: Modify the Vhosts.conf
Open the vhost.conf (Note if you've upgraded, macOS should have the httpd-vhosts.conf~previous in the same directy) configuration
Entries are added by using the following pattern.
Here's an example of a working entry ported from macOS (OS X) 10.12.x
Step 3: Map Localhost to hosts
Open the hosts file:
Important, this next step can vary quite a bit based on how you've mapped your vhosts URLs. I decided I want all instances of localhost AND lvh.me (lvh being the acrnynom many developers use for local virtual host and the dot me suffix to reinforce that it is local). This is super common.
Step 4: Restart Apache
Regardless if you were using a GUI editor like BBEdit, you'll need to restart Apache via the command line
I've seen a few sources calling trackers the new "pop-up", although I find it's more insidious than that, considering the plethora of privacy implications that tracking can have.
Mozilla announced it'd be blocking trackers and 3rd party cookies by default and Adweek reports that Apple is moving to block 3rd party trackers. Unsurprisingly, Google has not.
Every now and again, I type up a short list of thoughts on front-end development, and it's become a yearly affair despite my best intentions. Here are my thoughts in 2015, 2016 and 2017. Year after year, it's interesting to collect my thoughts and pen them down.
- 2018 is the year FireFox became good again, it's live inspection of React states, accessibility view and JS map support is nice, but more so it's the consumery features like containers for FaceBook that has me using it more and more.
- Once you go ES6+ you can't go back.
- Chrome's CSS / JS coverage makes you feel bad.
- Anyone remember post-CSS? Does anyone use it for anything outside of browser prefixing? Does anyone use CSSNext?
- I've more or less abandoned grunt for gulp and webpack. I still occassionally use CodeKit 3.
- I don't like Bootstrap 4.
- Flutter looks like Google being Google. Consider me unexcited.
- I've finally had to grow up and start learning software design.
- WILL WE EVER GET CSSGRIDS?
- Cordova WebView apps are pretty much past-tensed in the era of the React Native, Native Script, Flutter and so on...
- IE11 still haunts us.
- CSS Typed Object Model looks great. Too bad we won't be able to use for years or at least until there's polyfills...
- Google Pagespeed lacks commonsense and is irrelevant. At least we now have Google Chrome Audits via Lighthouse which still spits out some irreverent bullshit.
- Vue JS looks fun.
- The term front-end developer is probably going to fracture. I've been saying this for four years. UI Developer has arisen over the years although that term is problematic since we do not have a "web" UI developer. Generally, this applies more to application design.
Due to API changes, most articles and utilities are out of date for getting a user ID and auth key, useful for utilities like instafeed.js.
Step 1: sign into Instagram Developer
Got to instagram.com/developer
Step 2: Create Register an application
Click your "Register an application and then Register new Client ID
- Application Name:: This can be named anything (sans insta’, ‘gram’, ‘IG’ or ‘Instagram’ )
- Description: Description for personal use
- Company Name: This can be your website or name
- Website URL: URL of the website you intend to place your feed on
- Valid redirect URIs: Used for application after sign in
- Contact email: developer's email
Step 3: Get your user ID
Load instagram feed in question with your developer tools open and run the following command in the console:
(if it doesn't work, hit reload and try again).
Step 4: Get your AuthO Key
There's a few ways but the easiest hands down is going to PixelUnion's utility and using it.
On my company's website, I've slowly been introducing subtle CSS3 animations over the past few months. One of the requests was for a "wave" animation for a background image. After a few false starts, our designer found the following codepen.
The hack is simple and effective; the original author relied on background images. His trick was overlaying portions of the original image in divs that contained pieces of the original image with random heights. Once the divs were overlaid, he used a very simple animation to alter the heights of the divs with randomly applied intervals using a Scss for loop. The downside? It used a
background-position: fixed, meaning if you scrolled, the effect would break and it wasn't responsive. Still, it was rather genius in its simplicity, so I give hats off to Art Carvajal Impressed with the effect, I decided to fork it and make it responsive, and not break upon viewport scrolling.
Below is the end result, complete with simple Scss Vars to make hacking this into your own project even easier. It's only roughly 50 lines of Scss, and exceptionally performant as it looks great phones or desktops
Rather than attempting to wow the world with “innovative” new designs like the failed Mac Pro, Apple could and should simply provide updates and speed bumps to the entire lineup on a much more frequent basis. The much smaller Apple of the mid-2000s managed this with ease. Their current failure to keep the Mac lineup fresh, even as they approach a trillion dollar market cap, is both baffling and frightening to anyone who depends on the platform for their livelihood. - RogueAmoeba Blog
I identify with this too much. I hope that more than a few high profile Mac developers echo this battle cry.
For frequent hardware purchasers, this is a constant state of ire. I'm still using a MacBook Retina 2015 because there's not a huge incentive to upgrade, ThunderBolt 3 is certainly of interest but the touch bar isn't a feature care about and actually a net negative for me personally. Apple is highly restrictive on their tiering but I still don't know why I can't get a dedicated GPU in a 13-inch laptop, why did the SD Card slot go away and why can't I get 32 GB of ram in ANY laptop? Why can't I have PCIe slots in a desktop? Why can't we have Mac Mini updates? Why must we drop 32-bit support?
Apple's "Father knows best" has been wonderful for consumer devices, but professionals have hard requirements that can't be eliminated. A large chunk of professionals just want a box with a ton of cores, user serviceable RAM/Storage, and PCIe slots. Just put in the latest I/O and CPU, update it every 9-12 months and call it a day. It's telling that the most popular blog post I've written is about maintaining classic Mac Pros from 2013. I worry I won't be able to rely on Apple in the future as a developer.
Step 1: Install Homebrew
Go to brew.sh and download and install HomeBrew. HomeBrew is a Mac OS package manager, a CLI utility for downloading and installing binaries for Mac OS.
Step 2: Install Macintosh App Store CLI (Command Line Interface) utility via HomeBrew
From your terminal, run the following command,
brew install mas
This will only take a minute or so for the application to download and install.
Step 3: Download old macOS via the mas-cli utilty
The Mas CLI will let you download anything that you have purchased in the past. The way it works is running the command followed by the app store ID number. The following code would be used to download 10.7.
mas install 444303913
Below is a list of Mac Store IDs for older versions of OS X. Note: you'll need a valid Apple Store ID that "purchased" older Mac OS versions via the App store You can see your purchases and their IDs using
- OS X 10.7 Lion：444303913
- OS X 10.8 Mountain Lion：537386512
- OS X 10.9 Mavericks：675248567
- OS X 10.10 Yosemite：915041082
- OS X 10.11 El Capitan：1018109117
- macOS 10.12 Sierra：1127487414
- macOS 10.13 High Sierra：1246284741
Bezos-owned Washington Post published a large story on Amazon fake reviews, but that's just the beginning. Years ago I bought an Anker Bluetooth Keyboard. I gave it three stars despite its rock-bottom $20 price, as I couldn't imagine using it beyond the lightest use cases as the feel was abysmal (keys were squishy and wobbly). It technically "worked" but even if I were given one for free, I'd still would have not like the product. Price and value are interconnected, but there's a floor where simply the value of an object ceases increase regardless of how low price as my affinity for the product will not increase.
What followed was Anker harassing me to change my review. I admired they wanted to "fix" the situation but the product worked as advertised so there wasn't anything to fix. Had they left at that, then this would have been the end of the story.
Anker e-mailed several times, although I deleted a few of the e-mails. I believe the count was roughly 5 emails, near daily. I grew tired of it and contacted Anker, and they inferred that they were willing to give me at least more Anker products (it wasn't entirely clear) beyond a second keyboard to reconsider my review. Anker crossed a narrow ethical line. They didn't offer me money, but they were willing to sweeten the pot for me to reconsider under the implication I'd consider changing my star rating. Long story short, I did not change my review nor did I take Anker up on offers. The keyboard was mediocre and short of re-engineering it, there was nothing more to say. Giving a second mediocre keyboard, wouldn't have equated to one good keyboard.
I'm willing to bet Anker didn't violate any of the terms of service for Amazon and the value of a real customer (me) changing my review, in exchange for some bonus swag (cables? I'm speculating) they, essentially buy a review without "buying" a review. This struck me as insidious behavior and a general mistrust of "Amazon" brands, products that seem to exist entirely in the Amazon ecosphere.
I realize I'm singling out Anker but it's also the company I've had first-hand experience with. Even in 2013, fake reviews were a problem but this alerted me to a new form of review inflation. I've been far more skeptical of the "Amazon" brands since, those companies that seem entirely exist in the Amazon eco-sphere, usually selling cheap electronics or knock-offs of more popular products with strikingly high reviews, like popular Symphonized, selling stylish headphones at cheap prices.
Does Symphonized pay reviewers or harass negative reviewers? I don't know and that's problematic.
Cubase - Error Changing permissions when Installing (for any version of Cubase, Cubase Artist, Cubase Essentials) Fix
I recently ran into a problem trying to install the latest version of Cubase. Below are a few of the errors I encountered:
Error changing permissions in 0755 in /System/Library/Extensions/AuthenticationSupport.plugin
Error changing permissions in 0777 in /System/Library/Extensions/AuthenticationSupport.plugin/Contents.plist
Error changing permissions in 0777 in /System/Library/Extensions/AuthenticationSupportEnabler.plugin
My initial inclination, being a developer, was to use the terminal and sudo chmod the permissions which didn't work. If the previous statement doesn't mean anything to you, chmod is a unix utility that's part of macOS but only accessible by the terminal, that can change the permissions of files (edibility) of files.
This, of course, did not work as I encountered the same problem when attempting to update drivers on my Mac Pro for a nVidia graphics card.
macOS post 10.10, features System Integrity Protection, which prevents various system files from being modified by other software. This is a good idea except when it creates a problem like trying to update Cubase from versions. For me, I was upgrading from Cubase Pro 7.5 to Cubase Pro 9.5, but this could happen with Cubase 8, Cubase 8.5, Cubase 9 and the various versions of Cubase like Cubase Artist and Cubase Elements.
The process is as follows: Disabling the System Integrity Protection, installing the software and re-enabling System Integrity Protection. The steps are outlined in my nVidia post but below are the same instructions.
Verify you have System Integrity Protection enabled. Go to the terminal (the macOS terminal is located in applications/utility) and type the following command into the window. This should return "enabled".
Restart your Mac and hold down the Command-R keys during startup to boot into recovery mode. (alternately, hold the option and select the recovery partition). The recovery partition will take longer to boot than normal.
You should see the macOS installer prompt screen. Ignore it and go to the Utility menu and select the terminal option. Run the following command in the terminal.p> Ignore the installer prompt and select from the Utility, Terminal and run:
Reboot normally. Install the Cubase software, even if the rest of the software installed successfully.Step 5
Reboot again into Recovery mode and go to the terminal. Run the following to re-enable System Integrity Protection.
Now you can reboot normally and start using your software!
Recently I've been hit in the past week or so two separate requests to fix broken links on old blog posts, each 4 years old or older. The first is a "Nice try" for for a rather crappy tech blog. Comparitech seems to a form spammer. Comically, the example I found is from the FreeBSD Pipermail mailing list about an archived article from 2002, about VNC portal mail configging. The bot suggests linking to an article explain the difference between VNC and a VPN.
Ellen Fisher <email@example.com>
3:50 AM (9 hours ago)
I found a link that isn’t working on one of your pages and thought you’d want to know.
I landed here - http://blog.greggant.com/posts/2013/10/17/53-mac-only-design-development-utilities-apps.html, and noticed you have a link to the Webgraph Facebook Blocker tool (http://webgraph.com/resources/facebookblocker/) which seems to have been discontinued.
We have a guide to help people stop Facebook tracking them across the web - SPAM URL removed
If you are updating your page, perhaps you could point people to our guide instead?
I hope this helps!
Yeah, I'm not going to do that. The guide was very so-so, and a bit out of date to boot.
The second instance is interesting for the persistence, three separately e-mails spaced out. The link in question, was to a website offering a pirated flash version of Plants vs Zombies. As I do not have flash installed, I couldn't comment onto the quality but likely it was advertisement loaded.
Jessica Bridges <firstname.lastname@example.org>
Are you able to please update something on your website?
You were linking to the Plants vs Zombies game on this page of your website - http://blog.greggant.com/posts/page8/
The link was going to this game - http://www.popcap.com/games/pvz , but I guess since popcap sold PVZ to EA they took the game away....
Here is a secure working version I found on Google - SPAM URL REMOVED
Hope it helps! Classic game =)
Digital Artist & Illustrator @ Jess Creative
The spammer tries to engage again.
Jessica Bridges <email@example.com>
I emailed a few days ago about the Plants vs Zombies broken link on your site, wondering if you had the chance to update it yet?
Don't mean to pester you, just my OCD talking =)
Jessica Bridges <firstname.lastname@example.org>
Last email I promise =) Just wondering if you've received my emails below about the broken link? I don't mean to be a nag, I'm just kind of a nerd for these things =)
My guess is these are bots pre-programmed with to search the bowels of google for links or broken links as an angle to target small websites to correcting URLs as a way to gain standing via backlinking to gain page weight in Google. The Jessica bot is interesting for the follow ups. My theory is it'd spammed me repeatedly even if I had changed the link.
subscribe via RSS