A lot has been said in the last few years about the rise of AI agents and how people access content. We’re seeing a wild shift in how people get their information: search engines (and AI agents at large) are increasingly turning into answer engines, reducing real human traffic and interaction in the open web.¹ In parallel, AI-generated summaries appear in search results, making users less likely to visit individual websites further pushing behavior toward answer-seeking instead of browsing.² As AI systems consume and remix the web’s content at scale, infrastructure providers and publishers are actively reshaping how crawling and access work, reflecting how contested the old traffic model has become.³ While this behavior does allow for incredible efficiency in going deep on a particular subject, it also removes a certain serendipity that the “old web” provided, something that has long been treated as a real (and designable) part of discovery.⁴ Coupling this recent trend with the way social media websites have created walled gardens of content⁵ over the last decade, we’re left with fewer places to wander and discover.

That’s why I decided to build Feedster. I miss blogs, personal websites, and the internet publications that I grew up consistently reading online.

At its core, Feedster is a feed reader that allows its users to organize their feeds into different channels. Channels are like folders that contain many feeds. Each channel has its own top-level feed mixing all of the feeds within it. Feedster is different from traditional RSS readers in that it’s web-based and all of the feed syncing happens on the server. There are some technical workings that allow the posts to stay cached locally for faster load times, but all of the feed updating happens server-side first and Feedster operates as a “thin client”. Additionally any feed that gets added to Feedster by one user, immediately becomes discoverable by all other users of the system. I’m still working on making search really great, but even in its basic form it is nice to be able to share feeds (especially independently published) so easily.

The reading experience in Feedster allows users to view feed items’ content directly in the app itself. There are two views for each piece of content: a reader view, which is similar to the reader view in Safari, and a web view, which will render most websites directly inside of Feedster, so that users don’t have to leave the app to get an idea of what the real content looks like and can easily paginate through posts within a given channel.

Despite being a countermeasure to the erosion of some of the original web’s appeal, Feedster was also built to connect with AI agents. Using Feedster’s hosted MCP server, users can connect to their Feedster account and give AI agents access to the content that they follow, so long as MCP is supported on the AI agent’s client. This gives direct access to the content that users care about in near real time, unlocking many workflows for agents that may resolve on recent information without requiring the agent to search the web directly.

❯ /feedster

⏺ Feedster - front_page.get (MCP)(limit: 10)
  ⎿  ### Front Page (10)
     1. **Stolen Gemini API key racks up $82,000 in 48 hours** (id: 7391348) — Hacker News (Mar 3, 20
     26 12:41 PM)
     … +27 lines (ctrl+o to expand)

⏺ Here's your updated front page:

  1. Stolen Gemini API key racks up $82,000 in 48 hours — Hacker News 🆕
  2. College students add puppy training to their course load — Washington Post 🆕
  3. Seattle Xcoders Talks This Week Considered Unmissable — inessential.com
  4. Anthropic's popularity surges amid Pentagon rift — Semafor
  5. Introducing the AI Gateway — Vercel
  6. Pinterest shares pop 8% as Elliott Management takes $1B stake — CNBC 🆕
  7. Anthropic and Alignment — Stratechery
  8. Amazon Cloud Unit's Data Centers In UAE, Bahrain Damaged In Drone Strikes — Slashdot 🆕
  9. 'Pray We Make It Through the Night': Iran's Capital Under Siege — NYT 🆕
  10. Apple Introduces M4-Powered iPad Air — MacStories

  A few new stories since last check. Want to read any of these?

❯ Tell me about the anthropic thing and also provide additional context.

⏺ Feedster - items.get (MCP)(item_id: 7391249)
  ⎿  ### Anthropic's popularity surges amid Pentagon rift
     - ID: 7391249
     - Feed: Semafor
     … +20 lines (ctrl+o to expand)

⏺ Feedster - items.get (MCP)(item_id: 7386043)
  ⎿  ### Anthropic and Alignment
     - ID: 7386043
     - Feed: Stratechery
     … +53 lines (ctrl+o to expand)

⏺ Feedster - items.get (MCP)(item_id: 7391234)
  ⎿  ### US Defense Secretary Pete Hegseth's and Trump's actions against Anthropic have serious legal
      issues, and its designation exceeds what the statute authorizes (Lawfare)
     - ID: 7391234
     … +21 lines (ctrl+o to expand)

⏺ Feedster - items.get (MCP)(item_id: 7386043, content_offset: 4000, max_chars: 4000)
  ⎿  ### Anthropic and Alignment
     - ID: 7386043
     - Feed: Stratechery
     … +53 lines (ctrl+o to expand)

⏺ The Anthropic-Pentagon Standoff

  Here's the full picture:

  What Happened

  The Pentagon demanded that Anthropic allow its AI models to be used for "all lawful use cases" without
  restriction. Anthropic refused, drawing hard lines on two specific uses:

  1. Mass domestic surveillance — Anthropic argues AI-driven surveillance can assemble scattered data into
   comprehensive profiles of Americans' lives at massive scale, and that the law hasn't caught up with
  these capabilities.
  2. Fully autonomous weapons — Anthropic says frontier AI is not yet reliable enough to take humans out
  of the loop on selecting and engaging targets, and offered to do joint R&D with the DoD on improving
  reliability — an offer the Pentagon rejected.

  The Escalation

  - Feb 24: Defense Secretary Pete Hegseth gave CEO Dario Amodei a deadline — comply by 5:01 PM Friday,
  Feb 27, or face consequences.
  - Feb 27: Anthropic publicly refused to budge.
  - Feb 28: Trump directed federal agencies to stop using Anthropic's products. Hegseth designated
  Anthropic a "supply chain risk" — a label previously reserved for US adversaries, never before applied
  to an American company. This ended Anthropic's ~$200M defense contract and bars other defense
  contractors from working with them.
  - The Pentagon also threatened to invoke the Defense Production Act to force compliance — which
  Anthropic noted is contradictory (you can't call a company both a security risk and essential to
  national security).

  The Fallout — Surprisingly Positive for Anthropic

  - Claude shot to #1 on Apple's US App Store charts as public support surged
  - ChatGPT saw a 295% surge in uninstalls after OpenAI signed its own unrestricted DoD deal
  - Defense contracts were only about ~5% of Anthropic's total business
  - Prediction markets are betting Anthropic will be largely unaffected

  The Debate

  - Lawfare argues the designation is "political theater" — it has serious legal issues and exceeds what
  the statute authorizes. They don't expect it to survive legal challenge.
  - Ben Thompson (Stratechery) takes a more cautious view, arguing the designation "would decimate
  Anthropic" and that Anthropic's position — having an unelected CEO decide what the government can do
  with AI — is "intolerable and misaligned with reality," even if their specific concerns are legitimate.
  He draws an analogy to international law: ultimately, power decides what's allowed, not principles.
  - Scott Alexander noted the financial exposure is small and expects limited impact.

  Sources:
  - Semafor: Anthropic's popularity surges amid Pentagon rift
  - Stratechery: Anthropic and Alignment
  - Lawfare: Pentagon's Anthropic Designation Won't Survive Legal System
  - NPR: Anthropic rejects Pentagon demands
  - Axios: Hegseth gives Anthropic deadline
  - Fortune: Hegseth issues ultimatum to Anthropic
  - Washington Post: Pentagon-Anthropic fight reshapes Silicon Valley relations
  - TechPolicy.Press: Timeline of the dispute

✻ Cooked for 38s

❯ How did you know to pull that Stratechery article too?

⏺ It was on your front page from the earlier fetch — item #7, "Anthropic and Alignment" by Stratechery.
  When you asked about "the anthropic thing," there were actually three related articles across the two
  front page pulls:

  1. Anthropic's popularity surges amid Pentagon rift — Semafor
  2. Anthropic and Alignment — Stratechery
  3. US Defense Secretary's actions against Anthropic have serious legal issues — Techmeme/Lawfare

  I grabbed all three since they were clearly about the same story from different angles.

Feedster is still in its early infancy. I think there is a lot more I can design and build to bring back the serendipity of the old web. To start, I am focusing on these things:

• Prioritize a slower type of content that isn’t constrained to 240 characters
• Give users the ability to create sharable channels of feeds that other users can subscribe to
• Create a better experience for curious minds that want to discover new sources of content outside of the mainstream (or social media platforms)
• Bring RSS into 2026 and expose it to a new audience

I hope that you’ll give Feedster a spin. I’ve been having a blast building it.

Processes that feel unnecessary really demotivate and kill creative spirit. One of the main reasons why I went from big tech to startup earlier this year.

A few months before I decided that It Was Time™, I had a discussion with someone that I trust implicitly with my career. During our talk, it was pointed out to me that unknowingly I was exhibiting signs of someone who was looking for a my next thing. The GitHub that I joined in 2015 was a very different place than it is today. You could change just about anything with a pull request (and were encouraged to), even though management had just recently been implemented, much of an employee’s expectations were still tied to shipping / output. This meant that as a product designer you got to wear a lot of hats, processes were loose and experimental — if there at all, and you really got a sense that everyone at the company was all pushing toward something together.

As GitHub grew and scaled, more formal processes were built around the work we did, things became more complicated as more specialized roles were added, and the path to shipping the product grew longer and less straightforward. The entrepreneurial instincts that I had in my first few years were slowly exchanged for figuring out how to fit in bits that I cared most about into the larger product.

Working as an IC for a big tech company in 2022 provides a lot of niceties: you get consistency, job security, above-market salary and equity compensation, and if you’re there long enough you get to specialize in things. The tradeoffs that you face are your own personal impact on a company / directional level, the ability to take big risks, and straying outside of established processes without asking for permission/forgiveness. Depending on what you’re seeking out of work, you may land on either side of these tradeoffs: predictability, compensation, and job security vs. autonomy, individual impact, and the ability to make big bets. The more I talked and thought about it, the more I longed to exchange one for the other.

A framework my next job

At a certain point after this conversation, I realized that I never wrote down the things that I wanted from a potential employer before. I had a lot of ideas about the type of role that I wanted, but not the type of place I wanted to work. Back in 2020, after a few years in a management role, I realized that it wasn’t for me so I dove head-first into a staff designer position. There’s been a lot written about the pursuing a senior+ IC designer track, but I’ve never thought about evaluating this at a company level before. Also around this time I stumbled upon Muan’s On looking for a job, which I would recommend to anyone in tech looking for their next thing. With all of this rattling around in my head, I decided that I needed to formalize some type of framework to help me decide what’s next.

1. Type of product / design

   Working at GitHub made me fall in love with designing developer tools. I get a lot of joy out of making tools for people who make. In my next role, I knew I wanted to stay in this space and perhaps get even more focused on a singular aspect of it. It is developer tools or bust for me. Product taste is also played a role in this, even if the money was good, I couldn’t pursue any company whose products I wouldn’t use myself and truly believe in.

2. Stage and size of company

   This was a big one, perhaps the biggest one and the reason why I started to get itchy at GitHub. Later stage established companies have a lot to offer (see above). At this point though, I really wanted to get in somewhere as an early employee. I wanted to shape the design culture, figure out our own processes as we go, and be a high leverage IC that has a hand in everything. In my case it was a matter of figuring out what I didn’t that helped me navigate this. For example, even getting in at a hyper-growth company with a couple hundred people felt like I would be repeating the last five years of my time at GitHub again (scaling from 300-3000+). I knew I needed to find something that was even earlier: 20-30 employees, series A/B round, and with obvious growth potential.

3. Equity / Salary compensation

   When considering a move from a big tech company ➡️ startup, getting paid usually also means taking on more risk. Typically early stage companies offer less cash salary than and more potential for equity growth. My financial situation allowed me to take a bit of a salary decrease, in exchange for more upside on my equity. Startup equity is hardly a sure thing, but I wasn’t going to take a position at a company that I didn’t have confidence in.

4. Management structure

   Another hard requirement that I had was that I had to, for now, report directly to a founder. This was a forcing function for me not to step into a company that was top-heavy with management, too large, or too process heavy. I fully expected that this wouldn’t be a forever thing, but a near-term thing that would allow me to help scale the design org and eventually hire my own boss.

5. Tech stack / tooling

   There’s a quote from Picasso, “When art critics get together they talk about content, style, trend and meaning. But when painters get together, they talk about where you can get the cheap turpentine.” (I’m sure this isn’t really what he said, but it sounds good!) I am very comfortable with certain stack of design tools and front-end development tech, and veering too far outside my comfort zone wouldn’t allow me to do my best work. Because I was looking for a position where I would be involved in front-end engineering, a modern tech stack was important, engineers who care about performance, design systems, and scalability were all must-haves.

6. Operations

   There is a really fuzzy line between too much operational process and not enough. It moves around as a company grows, and usually companies are on the either side of the line. While having a formal HR department wasn’t a hard requirement for me, formalized People Ops was. This could be a single person or an entire department, but I needed to know that there was some structure around things like raising concerns, asking questions about benefits or company policies, and a channel for career advancement.

   Additionally, I wanted to make sure that the company had a remote-first culture, in 2015 this was more rare than it is now, but any requirements to move or eventually go back to an in-person focused environment quickly disqualified a role for me.

My Goldilocks zone

After talking to multiple companies, I only really seriously considered one position that fit into to the criteria of the framework that I laid out. In the second week of January, I joined the team at WorkOS and I can’t wait to share what we’re building. The process taught me that patience and really honing in on the things you care about and letting go of the things you don’t is the way to find a job that leads to personal happiness.

At Bloomberg Businessweek, we read—a lot. We also listen to podcasts and watch a ton of stuff (often with borrowed passwords). Sometimes we read, watch, or listen to something that we wish we had published. To recognize a job well done, the magazine’s staff and many of our contributors in the Bloomberg newsroom have compiled our annual yearend Jealousy List. Congratulations to those on this year’s list, we hate/love you. —The Editors

h/t pxlnv

In the spirit of sharing great work, I wanted to create a similar list focusing on some of the great work that I’ve come across this past year (and I wish had my fingerprints on it). If anything this exercise has taught me that there isn’t a great place for showcasing small tools and side projects (aside from being lost in the noise of Twitter) and maybe a meta-side project would building such a place.

Automator

As if everything that Jordan Singer makes doesn’t make me jealous, this Figma automation suite is certainly one of the most worthy of this list.

Links: automator.design

Cron

I don’t love using Google Calendar, but I do love using Cron. Cron is a native app that provides an interface to Google Calendar, has some stunning UI design, and a very robust keyboard-first approach.

Links: cron.com

Radix

Radix is a set of un-styled, accessible, and highly composable components for React ready for your next project created by the Modulz team.

Links: Radix, radix-ui on GitHub

Minimal Shapes

I remember when Adrian started playing around with Blender a few years ago… Fast forward and now he’s got the most beautiful collection of wallpapers and textures.

Links: Minimal Shapes on Gumroad

Typefully

It’s been a few years since a new Twitter client did something completely different. Typefully completely re-imagines how you create content on Twitter, optimizing your threads, and making the authoring experience feel more civilized and focused. Made by the talented Mailbrew team.

Links: typefully.com

This Bowl

Kathy made this bowl (amongst many other beautify ceramics) and I love the glaze, size, and shape.

Links: The bowl on Twitter

(mac)OStalgia

I’ve said it before — but I am a sucker for vintage internet nostalgia, so Michael Feeney exploring what various modern apps would have looked like in MacOS 9 is really up my alley. Complete with a MacOS 9 UI kit for Figma.

Links: swallowmygraphicdesign.com

Everything that Vic makes

I’ve tried picking up 3D / Blender about five times, but the learning curve is so steep that I eventually just gravitate toward spending my free time on things that I’m already pretty good at (making music, hacking on side projects, drawing, painting, etc…). Vic’s 3d work has always been inspirational because it is just so damn playful and I love that she posts Twitter threads of her process so you can see how the work evolves.

Links: Vic’s 3D work on Twitter

Open Peeps

Open peeps is a really nice set of customizable, diverse, pay-what-you-want set of hand-drawn people illustrations by Pablo Stanley. Comes packaged up as a file for your favorite web graphics editor (Figma, Sketch, Xd) and is under a Creative Commons license. The drawing style isn’t over-done (yet) so if feels unique compared to other similar libraries.

Links: openpeeps.com

brianlovin.com

Brian Lovin’s site redesign features an app-like interface, internal commenting system, stack-tracking system, and more features that stretch the boundaries personal site and personal app.

Links: brianlovin.com, briOS on GitHub

Poolsuite Mixtapes

The most nostalgically drunk website minted a set of very chill mixtapes mix CDs mix playlists for your infinite summer party.

Links: poolsuite.net

COBE

Need a WebGL globe à la GitHub or Stripe homepages? Look no further. COBE is a 5kB library for generating a globe on a WebGL canvas.

Links: cobe.vercel.app, COBE on GitHub

Sleeve

Sleeve is a custom music display for Spotify, Apple Music, and Dopler that allows you to personalize the UI in almost any way imaginable. I almost built something similar to this a few years ago because I really disliked how bloated the Spotify player UI was, but this solves that problem in a much more flexible way than I could have imagined.

Links: replay.software/sleeve

Companion in a Box

The only NFTs that I’m legitimately jealous of. Fellow GitHubber @mkwng created a beautiful system of companions that hang out in said box.

Links: companioninabox.art

Bueno

Bueno is a no-code toolkit for NFT creators, it makes creating all the permutations of a collection a lot easier to manage. This type of thing feels like the future of NFT creation as it democratizes the process significantly.

Links: bueno.art

Read.cv

Maybe the anti-LinkedIn professional network? Read.cv is a platform created by Mehdi Mulani and Andy Chung which allows users to create a resumé-like profiles and share a bit about what they’re working on.

Links: read.cv

What are some projects that have made you jealous from 2021? Let me know on Twitter.

• Re-wrote it in Next.js
• Switched to Stitches for styling

Loving the perf gains so far.

• Designing principles
• Fewer concepts and more types
• Finding that sweet spot between implementation and concept/shaping
• Looser process/stricter framework

Man you gotta love Benioff (I mean, you don’t but he’s going to try), he clearly worked for Larry Ellison, loved Larry Ellison, and then said, I will be the absolute opposite of Larry Ellison and yet still build the most phallic building in history.

Let’s Skim! The Slack/Salesforce Press Release

The closest thing you can get to drinking Peach Bellinis at your desk. ★★★★★

via Kotaku

98.css is a CSS library for building interfaces that look like Windows 98.

A pretty damn faithful recreation of the UI that sent me online curiously building my first web pages, Winamp skins, Visual Basic programs, and pirated copies of PhotoShop.

Maybe it was chronicles of their life as they got a job teaching in Japan and how it was leaving American for the first time and all the new things there and skateboarding and meeting people and trying to meet girls, or a photographer working for a while in Minorca or some island off Spain when music hit a rock scene period and all the young people were dressing up in leather and tight jeans and going out dancing to dance rock and writing about his thoughts on where he fit into the scene as he was kind of older but not old, or a compilation of weird and unexplained science and gnostic wisdom, or the things some guy was making out of wood or electronics in his garage, or some Japanese girl who posted pictures of herself looking extremely pink and pneumatic and writing little things with them.

Siri Shortcuts aren’t new, but as more developer-centric apps begin using the SiriKit API, developers now have increased potential for upping their productivity levels on iOS (and iPadOS) devices. One great example of this is the Working Copy app. Working Copy is a Git client for iOS and iPadOS, which in itself is handy for editing and pushing code from your iPhone or iPad. Outside of being a nice Git client, the team has also built a deep integration with SiriKit, opening up entirely new workflows not even found on MacOS. Using Shortcuts, we can now access many individual tasks within specific apps (such as basic Git commands from within Working Copy) as pieces of larger workflows that pass data between other Siri-enabled apps.

What are Siri Shortcuts anyway?

Before getting into examples of how to set up your device with handy dev-centric Shortcuts, let’s review exactly what they are and some of the core concepts around them.

iOS 13 brought a new Shortcuts app to our devices. This app is the engine that allows us to create specific workflows using individual tasks, called actions, from many individual apps and connect them together into one string of events called a shortcut. These shortcuts are accessible from OS-level context menus (primarily the share sheet), kicked off manually from the home screen, or automatically run at a certain time interval.

While Shortcuts can be used to accomplish any number of tasks (like getting walking directions to the nearest coffee shop), they are especially valuable to me in transforming my iOS devices into automated development tools. Let’s dig in to some common use-cases.

Running a simple curl command

My initial motivation was fairly niche; I wanted to build a shortcut that used the camera on my iPhone to take a photo of an album cover, identify what it was, and then add that album to a Spotify playlist. It’s handy when shopping for vinyl or cataloging my existing record collection and creating a digital version on Spotify.

I found that the simplest way to identify the contents of a photo was to use Google Vision. Specifically, the image annotation API. After researching several ways to hit this API from my phone, I stumbled upon the Get contents of <url> action could be used to send curl commands. This made hitting the Google Vision API with an encoded version of the photo that I just took feel too easy. This specific action is built into Shortcuts itself (not tied to any particular app) and has many uses. It can hit API endpoints, grab an RSS feed, download and parse the contents of a webpage, or grab any data that is backed by a URL. As I learned, it is also very handy for making a single curl command and getting a response back. A more complicated API integration may be better served using another app with Shortcuts support (like Scriptable, more on this later) to handle more advanced back-and-forth and parsing of an API response.

Another use for this action that I am eager to play with is triggering a GitHub Action workflow run using the repository_dispatch event via curl that is kicked off from a shortcut. There are a ton of possibilities with this flexible action allowing your device to interface with any number of services fronted by public web APIs.

Writing content to a static site (Gatsby, Next.js, Jekyll, etc..)

I use this workflow the most of any in my toolkit. It recently came up in conversation with Brian Lovin (fellow GitHubber) after reading his post about how he architected a way to add links to his Bookmarks page via adding authentication to NextJS + GraphQL.

This workflow solves the same problem, but instead of creating authentication, it uses a Git + GitHub centric workflow to add content to a (static) website in a secure way. I use it to post content to my Inbox simply by searching for the cover art on Google and “sharing” it to my workflow which handles the rest. The basic steps look like this:

1. I search Google for the cover art to the book, film, album, tv show that I’m consuming.
2. I use the native “share” button in iOS and my shortcut lives on the share sheet.
3. My shortcut uses the Working Copy app and checks out the master branch of my website’s repository
4. My shortcut pulls any new changes from GitHub
5. My shortcut creates a new branch using the current time down to the second as the branch name: dd-MM-hh-mm-ss
6. My shortcut asks me what the title of the media is, what the artist name(s) are, and what my current status is (did I finish it?)
7. My shortcut transforms the text of the title using regex to a slug-like format (lowercase, strips out special characters, replaces spaces with dashes, etc…).
8. My shortcut renames the image file with the slug version of the title.
9. My shortcut writes this new file to the content/inbox/assets directory of my repository.
10. My shortcut creates a new text blob with the yaml front-matter metadata (title, artist, status, image path, date, etc…).
11. My shortcut writes this text blob to an mdx file in my repository.
12. My shortcut commits all the changes and pushes them to the remote.
13. My shortcut opens my repository in the GitHub app.

From here, I usually open the repository in Safari to actually create the Pull Request from the recently pushed branch (as of writing this there is no way to do this in the GitHub iOS app yet). I then wait for GitHub Actions to build and Netlify to do my preview deploy and viola — I’m ready to merge 👌.

This shortcut was inspired by this tweet from Rafa showing his shortcut for posting photos to his static site.

Extending Shortcuts with other Apps

Scriptable is an automation app (much like Shortcuts), but it runs on JavaScript instead of a visual block editor. It fully supports ES6, all scripts are stored on your phone, and can be executed from the Scriptable app, Siri/Shortcuts, or the share sheet. If you write JavaScript, this can unlock another level of functionality to Shortcuts giving you native JavaScript APIs to bake in.

As mentioned earlier in this post, this allows for the potential to create relatively complex integrations with any services with web APIs. Specifically for development, GitHub’s API is a great candidate for something like this.

Other tips for writing code on your Phone

While the GitHub app has no editor and is focused on triaging issues, pull requests, and other notifications; it does allow you to “share” to Working Copy if you have it installed, which has a fairly nice text editor built in. This doesn’t actually use Shortcuts specifically, but it does use a similar action in the share sheet within the GitHub app.

…a $400 iPhone SE bests a $3,000 top-of-the-line MacBook Pro in single-core CPU performance.

ht @manton

• I’ve never been this conscious about what I’m eating every day because we only have a finite supply of staples like eggs, butter, milk, bread, etc…
• I’ve never been this conscious of how I manage my time every day because my wife and I are splitting childcare duties and we need to balance getting work done and not sitting my daughter in front of a screen all day
• I’ve never been this conscious of how often I work out because we all need to get some physical exercise to stay mentally and physically well

Wellness in the time of global un-wellness, I guess.

I’ve decided to stream my films for free to viewers stuck indoors anywhere in the world. No catch…

1 cup of 99% isopropyl alcohol, 1 tablespoon of 3% hydrogen peroxide, 1 teaspoon of 98% glycerin, ¼ cup, 1 tablespoon, and 1 teaspoon (or 85 milliliters) of sterile distilled or boiled cold water

Tooling

Let me start out by saying that Xcode is an IDE (integrated development environment) and most modern web development tools are not. VSCode comes close-er, but it’s really not the same thing. Xcode has an editor, documentation, compiler, virtualization, and a rendering engine all-in-one — including all the settings to boot. It feels big in every conceivable way to someone who isn’t used to working with a tool of this scope. In this new version of Xcode (version 11.3.1), Apple has added a new component called Canvas that works exclusively with SwiftUI. Canvas is the real-time preview (+ inspector) that makes writing SwiftUI so compelling. With Swift classic (and ObjectiveC) apps, every time code was edited, a manual build step was required before you could preview the app in a separate process. With SwiftUI + Canvas, the preview updates as-you-type(-ish) which is familiar to those of us using live-reload in our web browsers while developing web pages.

The Apple team has done a lot of things right in not making this version of Xcode overly complex to use, but coming from the light-weight world of Vim, VSCode, Atom, and Sublime Text, I do feel like sometimes I’m driving a tank — and a very delicate one at that. Often times while writing code, response time feels sluggish and triggers syntax error statements that may or may not be accurate. I find myself deleting and writing the same line multiple times to try to get a “true” result from the change. SwiftUI is in beta still, so I’ll chalk this up to it not being production-ready yet.

Despite some of the bulkiness and current fragility, I do really appreciate having the niceties of a full IDE at my fingertips. Take the Library, as an example: it’s a universal command palette that you can pull up while you’re writing code to search for specific parts of the Swift/SwiftUI API to use inline. I love that it has the docs right there and selecting an item inserts it right where I want it with placeholders for all the properties.

Another thing that I appreciate is the approach in integrating Canvas into Xcode and how it is very reminiscent of the early versions of Framer Studio. For those that don’t remember, this was the precursory product that came before Framer X: CoffeeScript on the left, live preview (with device chrome) on the right:

It certainly feels like there was some inspiration there. It’s also interesting to see how technology seemingly continues to pull development and design closer together. Framer Studio was a tool often used to prototype native app interactions, and now with the same level of code abstraction one can actually write the real UI for a native app — animation, interaction, and even integrated into a data model. I’m actually quite surprised that it took Apple this long to create this sort of thing, but I have no idea how long SwiftUI has been in the works.

Writing Swift/SwiftUI

I took an ObjectiveC class about five years ago and it wasn’t even close to this easy to pick-up and just make stuff. It was only on day two of the four day class that I actually had anything running on a device. This is why being a web developer is awesome: you can make a production-ready webpage in minutes with default tools like Notepad or TextEdit, with zero configuration, and using the browser that comes with your OS. As you learn more about HTML and CSS, you can see exactly how the edits you make affect the outcome, and thats when making stuff gets fun. Apple has again done a great job of abstracting out the types of things that will give you the momentum to keep going making them seem conceptually simple.

One such example is how the layout engine that produces variable width and height layouts (similar to flexbox in CSS). This uses the concepts of Stacks and Spacer()s. Spacer kind of reminds me of the old spacer.gif hack from the days of table based layouts in HTML, which brought a smile to my face as I typed it out every time.

// HStack creates a horizontal layout, Spacer() creates a flexible spacer (think flexbox with justify-content: space-between)
HStack {
    Text("Acme Corp")
    Spacer()
    Image("logo")
}

“Hello world!” is a thing of the past, SwiftUI it’s more like, “Hello, beautiful UI complete with animations and dark-mode built-in!”

Here is an example of how to create a simple card UI using out-of-the-box SwiftUI:

// Create a vertical layout for the card "frame"
VStack {
    // Create a horizontal layout to "push" the text to the left edge with a Spacer()
    HStack {
        // Create a vertical layout for each text component to stack on top of each other
        VStack(alignment: .leading) {
            Text("Card Title")
                // Style the text using system styles
                .font(.largeTitle)
                .fontWeight(.bold)
                // Use a color from a color set (a theming file) in the assets catalog, so that it will dynamically shift for dark and light mode
                .foregroundColor(Color("primary"))
            Text("Sub Title")
                .font(.headline)
                .fontWeight(.regular)
                .foregroundColor(Color("secondary"))
            Spacer()
        }
        Spacer()
    }
}
// Specify the size of the card and its styles
.frame(width: 300, height: 200)
.padding(20)
.background(Color("accent"))
.cornerRadius(20)
.shadow(radius: 20)

This will render the following in both dark and light mode, using the color sets that I defined in the asset catalog (which is like a special folder in your project where you keep all your images and color properties for theming).

Despite its quirks and unfamiliarity, I am already a fan of SwiftUI. Intentionally or not, Apple is now courting folks like me who grew up building on web tech stacks. Because in many ways SwiftUI feels like the tools I am already using, I can absolutely see myself building out the UI (and more) of an entire app with this in a matter of weeks. Who knows, maybe I’ll get something in the App Store this year?

The Bill & Melinda Gates Foundation announced today that it will commit an additional $5 million to help public health agencies in the greater Seattle region enhance their capacity to detect novel coronavirus (COVID-19) in King County, Snohomish County and other surrounding communities.

via gatesfoundation.org

Growing up as an early consumer of the internet in the late 90s, I had a desire to join the ranks of those creating for this new space. I found my way to a few dozen websites/zines/portals/blogs/whatever geared towards making. I was immediately drawn in and wanted to soak up as much as possible. Many of these sites had a distinct identity of their own beyond that of the author(s) that wrote them. Specifically in the “web design” community, my digital worldview was shaped by the likes of K10k, Stop Design, Daring Fireball, Design Is Kinky, swissmiss, and others. Once again almost twenty-years later, these pioneering sites inspired me to detach my personal home on the web from my own namesake, giving birth to This Modern Web.

This new site is broken down into three different types of content:

1. Long-form content, like this blog post.
2. Microblogs that take the form of short posts, photos, and links, shown on the home/feed page and on the Everything Archive in monospace (removed during redesign).
3. The Inbox, which is a media diary of what I am reading, listening to, or watching (removed during redesign).
4. Update Feb 3, 2025: The Now page, which is a collection of what I am currently up to.

Beyond the content that I am producing, I wanted more control over the process by which it is produced. This led me to explore many ways of building this site and my ideal workflows for publishing each type of content. I ultimately choose to go with Gatsby.js as the framework to build this thing for two reasons:

• I wanted an excuse to build a JavaScript/React based site and play in all of the possibilities that come with this landscape.

• I wanted more flexibility than Jekyll (my previous static site generator) has out-of-the-box. I love Jekyll and still use it for many things, but there are many things that it leaves to be desired for a website in 2020, like processing assets, SEO, a modern data layer, a more dynamic front end, and flexibility in working with Markdown.

Once I got over the initial learning curve of going from the familiar and fairly boundaried world of Jekyll to the unknown and expansive possibilities of Gatsby, I found the experience of building the site to be quite joyful. Thanks to Theme UI, styling the site was felt familiar and much of the heavy lifting that I normally need to do (with utility classes or custom CSS frameworks) was all there for me and completely customizable to however I wanted to setup my design constraints. It’s responsive out-of-the-box and I didn’t have to write one media query. It feels like cheating. And hell, this whole process even finally converted me to a CSS-in-JS disciple.

Of all the new stuff though, my biggest improvement was making the content creation workflow more ergonomic. I was heavily inspired by Muan’s personal site which is purely Microblog / Micropub-based collection of “notes”. I love the idea of a personal site with short low-commitment posts as it harkens back to all those early blogs that had their own “news feeds”. I toyed around with this before on the last iteration of my site, but it never really felt like I had the right implementation. Behind the scenes, I used Muan’s micropub-content as a template for how to build the Micropub standard into a static site-generator like Gatsby as well as a fork of micropub-endpoint to actually handle the posting of content. On the client side, I’m using the Micro.blog iOS app to write the short posts which is as easy as writing a tweet on my phone. The content gets created in the GitHub repo, Netlify automatically deploys it and the post goes live — just like posting a tweet.

I was 26 years old in 2010. In almost all of my free time I was playing in bands — it was awesome. I was in two at the time: Sun Airway (which began as an electronic duo and had been recently signed to Dead Oceans) and Blood Feathers (a down-home six-piece rock n’ roll band). These two groups couldn’t have been more different in sound, personnel, and personality which worked in my favor as I never found myself bored. There were multiple US tours with both bands that kicked off in 2010, the longest of which was Sun Airway’s first tour to support our debut album Nocturne of Exploded Crystal Chandelier (coming in at a whopping 7.8 on Pitchfork).

Last year (in 2019), Pitchfork published an interesting retrospective of the genre that Sun Airway was ultimately pegged as: chillwave.

This purposeful placelessness—a slight-of-hand attempt at creating mystique—also speaks to chillwave’s escapist tendencies. When Philadelphia duo Sun Airway, one of the few group efforts in early chillwave’s largely solitary confines, emerged with their own slightly emo-tinged sound, the airline-esque moniker made perfect sense: Chillwave existed as the ultimate vessel to leave your surroundings—and, in an authorial sense, yourself—behind.

I couldn’t help but have a laugh at Brandon Cox’s (Deerhunter, Atlas Sound) 2011 remark:

I hope nobody associates me with fucking chillwave.

The ironic thing about this genre pretension is that the guitar-based rock music that Blood Feathers was making at the time was kinda out-of-favor in many taste-making circles in the beginning of “the 10’s”. Music blogs had so much influence in discovering and hyping bands (unlike today’s world of streaming services) and many were trying to break bands that fit into this new internet-era aesthetic of hazy sample-based warbly-cassette-tape nostalgia. This only encouraged us in Blood Feathers to unapologetically lean even further in the other direction. We ultimately put out two records during my time with the band (Goodness Gracious in 2009 & Tingle Tangle Wanda in 2014) and took a sketchy-as-fuck RV across the South in the dead of Summer.

I really loved being on both of those groups and look back on this time as some of the best of my life and certainly the most musically prolific. As fate took us all in different directions, the desire to dedicate this much of my life to music — which is an almost impossible lifestyle — faded. By 2013, Sun Airway was chugging on without me, toured Europe, and put out two more records. Blood Feathers split up by the end of that year and the song writing partnership that held the band together dissolved. My own sense of purpose shifted from trying to make it as a musician to building a life with my partner and to have a meaningful career.

On October 12, 2013, I got married in the most-fun wedding that I’ve ever attended (still haven’t beat it). The next day, as newlyweds, we caught a ride to lovely Newark airport and embarked on our incredible honeymoon to Europe. We toured through Venice, the South of France, Basque Country, and Paris. To say we ate and drank our way through this trip would be an understatement. One of my favorite memories from this trip was going to a small wine bar in Venice where they hand-sliced Mortadella behind the bar. Every day we’d go there around four for a drink and a slice and every day there was a roving gang of street dogs that would come in around the same time. The bar tender greeted them as regulars and tossed them scraps of ham. Satisfied enough the dogs would trot out the door and go about the the rest of their evening, hitting up every cafe in the neighborhood to get fed. What a life.

Flying into Italy and taking a train across France and Spain also taught me that the rail system in Europe is fucking amazing. Spending so much time on the road a musician, I had the privilege to see almost every major city in the US, and this is something that I think more people should experience. If only it was as easy as hoping on a train… that was fast… and had good food and decent wine.

Roughly a month before we got engaged in 2012 (about a year and a half before our wedding), I started working at Happy Cog studios in Philadelphia. Having spent the previous five years cutting my teeth at a fast-growing but way more corporate agency in the suburbs (a forty-five minute commute on a good day), this was an exciting change. This opportunity seemed to align much more with how I wanted to work: smaller and more meaningful projects where quality was regarded as important as revenue. Perhaps most valuable though, was the team I got to work with — super talented, opinionated, and genuinely fun people to spend eight hours a day with. At Happy Cog I made some of the best professional relationships of my career (which would eventually lead me to GitHub), learned a ton about design, web development, and was plugged in to a network of folks who literally made the internet that loved. Relationships aside, I also learned a lot about success and failure at Happy Cog, what I liked and disliked about design (and the industry in general), and what ultimately made me dread coming into work.

A year and a half into my tenure, there were signs that the company itself was beginning to struggle; people were fired, there were layoffs, eventually our Austin office closed without much notice. I stuck through it in hopes that things would get better, but ultimately I just felt burnt out. By the end of the my third year I stopped feeling a connection to the work. I struggled to feel purpose investing my time in solving problems for clients when I knew the solutions would ultimately be at the fate of whatever level of corporate dysfunction they possessed.

I like to imagine that this is when I went through my career adolescence and discovered who I was and what I valued in my work. When I made the decision to leave Happy Cog, I knew that the years I spent doing client/agency work served me well, but there wasn’t much drive left there. Ultimately, I craved the opportunity to work on problems that I felt true ownership over, shared a sense of investment, and had some iterative process in solving. Around the same time, I also gained a deeper fascination with developer tools and the communities around them. To scratch my own itch, I designed and built my the first end-to-end side project, Tab Lab. This little taste of working on a product that I felt passionate about got me hooked, so when I had the chance to interview at GitHub in the summer of 2015, I jumped at it.

My daughter was born in May of 2015 and everything changed. Not only did I want to spend more time at home, I gained the benefit of leaving the pretty strict nine-to-five-ish work schedule in favor of a flexible remote one. This was a huge factor in my choosing to work at GitHub. Being around for all the moments in the early years of my daughter’s life alone outweighed any uncertainties I had about the decision. Working remotely isn’t for everyone though, and I did struggle with some aspects initially. I no longer had to commute so most of my day was spent in a chair at my desk. Finding ways to get out of the house became a must — for me this meant going to the gym regularly and getting my body moving. I seriously took up running and haven’t regretted a second of it.

The next few years seemed to happen at warp speed. Time gets really distorted after you have kids. I imagine that the lack of sleep, the series of temporary routines that constantly get disrupted, and the speed at which kids’ brains and bodies develop, swirl around and affect how our minds perceive time passing. Having settled into parental life, our daughter grew from an infant to toddler to a kid and started going to pre-school in our neighborhood. She gained her own life, best friends, interests, tastes, and opinions. In all of this (and I know it’s cliché to say this) being a parent dwarfs all other aspects in my life in almost every way that I can think of, especially once the develop a true sense of self.

Early on at GitHub, I found an incredibly empowering and energizing sense of autonomy. I was pushing code to production (GitHub.com) in my first month as a designer and I had never felt a sense of sheer power like that before. It really did feel like a drug. Within my first quarter, I joined a newly formed team that completely redesigned and rebuilt the top of the funnel of our flagship products. I loved putting stuff out into the world and seeing the internet light up praising or trashing it. Work then was ergonomic in a way that I had never experienced. GitHub used the best workflow that I had seen to implement and deploy products. The spikes of dopamine that you get from making stuff at that scale is hard to beat and I could see how it becomes addictive.

I decided to pursue management during my second year at GitHub. It was a big adjustment and a different sense of reward, one that I’m still figuring out. Instead of getting the high from designing, building, and shipping products, I had to find what would become my hook into management. It turns out, that takes years (just like learning how to be a designer). In the last few years, I’ve found it in building my team and empowering them to be impactful with what they produce. This takes many forms; helping the team shape products, being a good listener, working on longer-term vision with my Product counter parts, helping my team identify areas for personal career growth. Still though, nothing beats the feeling of waking up on a ship day.

Internet privacy laws have been changing. A lot. Internet Service Providers have unprecedented access to record and analyze your online activity, and a VPN can be a good defense against such prying. There is also the added benefit of spoofing your geographic location (IP-based geolocation services would pick up the location of the VPN server that you connect to, not your physical location), which is a great way to stream Netflix while vacationing out of the country.

Having a VPN server laying around for this type of personal use has historically been cost-prohibitive. But we live in 2018 now, and cloud-based hosting is very cheap (or free) and a lot of IP security tools are open source. This is great if you’re willing to tinker with the setup to make it work for you — which hopefully this post can help with.

Open Source to the rescue

Algo VPN is an open source VPN server geared toward security and ease-of-use. It comes with IPSec features that make allow you to secure your sessions out-of-the-box. Here is a quick set up guide and some issues that I ran into while setting it up for the first time.

1. Figure out where you want to host this

I choose Digital Ocean because it was easy, required next to no setup, and costs less than five bucks a month (and comes with a ten dollar referral credit). If you want a setup like mine, use this link to create your account… Note that you don’t need to configure a Droplet or anything yet, this will happen automatically later.

2. Download the VPN server source locally

Algo’s source is hosted on GitHub, you can download a zip file of the source:

Extract the zip file. This will create a folder called algo-master. Rename it to whatever you want and put it somewhere that you’ll remember. For the purposes of these instructions, let’s rename it algo-vpn. The rest of these instructions assume that you’re on a Mac, as that is what I used… but there are Linux and Windows-based docs.

3. Configure the server locally

Fire up Terminal and cd to your algo-vpn folder…

The first thing you want to do is check to see if you have python installed…

$ which python

You may get back python not found (which means you need to install Python 2) or something like /usr/local/bin/python2 (which means you already have it) or, in my case python: aliased to python3…

Algo requires Python 2. If you’re unsure what version you’re running python --version will give you a clue.

$ python --version
Python 3.6.3

So I’m running Python 3 (which I installed from Homebrew). This means that I need also install Python 2 and tell my computer to use it and not Python 3 for this…

$ brew install python2

Ok, now let’s see how my Python versions are setup:

$ which python
python: aliased to python3

$ python --version
Python 3.6.3

👍 I wanted this to remain my default Python for other nerdy shit that I’m into.

$ python2 --version
Python 2.7.14

👍👍 I now have access to Python 2 using python2 from the command line.

Now we can follow the install instructions from the Algo GitHub repo, replacing the python command to use python2 instead…

$ python2 -m virtualenv --python=`which python2` env && source env/bin/activate && python2 -m pip install -U pip && python2 -m pip install -r requirements.txt

but this doesn’t work because my Python 2 doesn’t have the virtualenv module installed yet. To install virtualenv it, I must use pip (Python’s built-in package manager). I’m going to use pip2 here so it explicitly installs it to my Python 2 instance and not my default Python 3 instance. I’m also going to use sudo here because the command won’t have write access to the proper folders without it, and I’m too lazy to reconfigure access for just this one thing.

$ sudo pip2 install virtualenv

Ok, so let’s try it again…

$ python2 -m virtualenv --python=`which python2` env && source env/bin/activate && python2 -m pip install -U pip && python2 -m pip install -r requirements.txt

… ⏰ this will install a bunch of dependencies ⏰ …

Once you’re done installing the dependencies, you can set up your VPN user accounts by editing config.cfg to add some usernames to the list (replace dan and jack with your usernames):

# Add as many users as you want for your VPN server here.
# Credentials will be generated for each one.
users:
  - pmarsceill

4. Setup and deploy to Digital Ocean

This single command will create a Droplet, set it up, and deploy it to your Digital Ocean account:

$ ./algo

You’ll need access to a Digital Ocean API key, so you should log in to your Digital Ocean account and generate one. When prompted, paste that API key into the command line.

  What provider would you like to use?
    1. DigitalOcean
    2. Amazon Lightsail
    3. Amazon EC2
    4. Microsoft Azure
    5. Google Compute Engine
    6. Scaleway
    7. OpenStack (DreamCompute optimised)
    8. Install to existing Ubuntu 16.04 server

Enter the number of your desired provider
: 1

Enter your API token. The token must have read and write permissions (https://cloud.digitalocean.com/settings/api/tokens):
[pasted values will not be displayed]
:

Name the vpn server:
[algo.local]: FtheFCC

Next, choose your location wisely — remember streaming video services Netflix and HBOGo block restrict access in some countries.

  What region should the server be located in?
    1.  Amsterdam        (Datacenter 2)
    2.  Amsterdam        (Datacenter 3)
    3.  Frankfurt
    4.  London
    5.  New York         (Datacenter 1)
    6.  New York         (Datacenter 2)
    7.  New York         (Datacenter 3)
    8.  San Francisco    (Datacenter 1)
    9.  San Francisco    (Datacenter 2)
    10. Singapore
    11. Toronto
    12. Bangalore
Enter the number of your desired region:
[7]: 8

Run through the rest of your setup — you can answer y to everything.

If all goes well you’ll be greeted with this:

ok: [255.255.255.55] => {
    "msg": [
        [
            "\"#                          Congratulations!                            #\"",
            "\"#                     Your Algo server is running.                     #\"",
            "\"#    Config files and certificates are in the ./configs/ directory.    #\"",
            "\"#              Go to https://whoer.net/ after connecting               #\"",
            "\"#        and ensure that all your traffic passes through the VPN.      #\"",
            "\"#               Local DNS resolver 255.255.255.55              #\"",
            ""
        ],
        "    \"#                The p12 and SSH keys password for new users is XXXXXXXX             #\"\n",
        "    \"#                  The CA key password is XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX                 #\"\n",
        "    \"#      Shell access: ssh -i configs/algo.pem root@255.255.255.55        #\"\n"
    ]
}

Keep this screen handy… you’ll need it later.

You should also now be able to log into Digital Ocean and see your VPN server Droplet running:

5. Configure a computer to connect to the VPN

In your algo-vpn folder, find configs/xxx.xxx.xxx.xx/username.mobileconfig. Send this file to the user of the VPN (if they use a Mac or iOS device — if they use Windows or Linux there are equivalent VPN profiles in here). When they open this file they will be prompted with:

And they can continue through the installation process. Eventually, they will need to enter the password from the previous section (obfuscated with X’s), not their system password:

"    \"#                The p12 and SSH keys password for new users is XXXXXXXX             #\"\n",

Voila, they should be connected automatically. Open up network preferences and they should see something like:

I turned off the connect on demand option because I like to manually connect to VPN when I need to, not automatically connect when not on a trusted network.

There seems to be a weak undercurrent of old and young bloggers like us that feel sentimental or curious and want to bring back blogging. Blogging won’t save the world. But, hell, after two weeks now, we can confirm: it feels great to be back on the blogging line.

If you are one of those old or young bloggers, please join in. Drop Facebook, drop Twitter and drop Medium for original thought. Own your traffic. You can use them to engage in discussion. But don’t get lost in there. Write daily. Publish as often as you have something to say. Link to other blogs.

— Oliver Reichenstein IA.net Web Trend Map 2018

It’s worth talking about how you can do this in 2018. The benefits of using Twitter, Facebook, and Medium are the “built-in” network of users that you can reach and the low barriers to start producing content. Can you be independent, have a nice publishing platform, and still build a community? More, now than ever, the answer is yes. Perhaps you don’t want to be responsible for building your own website or managing your own Wordpress blog (though these still work fine)… Just before the new year, I set up a Mirco.blog account and sincerely hope that this type of model gains traction across other types content-based networks on the web.

On the surface, Micro.blog looks a lot like early-Twitter. But that’s really where the similarities end. On Micro.blog you own and can self-host (if you want to) all the content yourself. This BYO content model uses Micro.blog as the network layer that sits on top of your posts (which are syndicated to Micro.blog via RSS or hosted on their platform). For five bucks a month, Micro.blog also offers a hosted option if you don’t want to set up your own separate blog that syndicates to your Micro.blog account.

Micro.blog adds discovery and conversations on top of previously unconnected blog posts.

— Micro.blog FAQ

Micro.blog also offers a native iOS app to make the browsing and posting a bit nicer, though unless you use their hosted option, your site must support the Micropub API standard to create posts through the third-party services.

↪︎ Read more about why Micro.blog was created

Are you designer who enjoys building products and wants to work on a highly visible one? I’m looking to a hire code-conscious product designer to join my team at GitHub.

What this position is

This is a product design position. You’ll be working with product managers, engineers, design managers, and other product designers to define, design, and build features on GitHub dot com. You’ll research, sketch, create mockups, write code, and deploy to production. You’ll probably introduce a few bugs — its cool, we all do. Your work will be reviewed and you will review others’ work. You will use GitHub to build GitHub.

Is this position remote?

We value a remote work. So much so that most of our product design team is remote. In an effort to create more of a geographically balanced team, we’re currently only considering candidates that live in the San Francisco area (or are willing to relocate) and can work out of our office in SOMA.

What type of projects will I get to work on?

GitHub builds products for developers, businesses, open source organizations, educational institutions, government agencies and just about anyone who is involved in building and shipping software. About 20 million people currently use GitHub.com around the world.

My group within the product design team primarily focuses on the businesses that use GitHub, as well as the integrators that build products to extend our platform in various ways. This means you’ll get to work on stuff like:

• Providing organizations enterprise-class tools to help manage and support teams of all sizes
• Helping developers discover and install integrations to add functionality to their projects on GitHub
• Giving integrators a great experience to build on top of, extending the core functionality of GitHub

Additionally, you’ll provide input and feedback that helps influence the direction of product designers working on other areas of GitHub.

This position might be a great fit if

• You have a few years experience designing software or websites
• You can talk and write about your work
• You’re comfortable with people having strong opinions about your work and are comfortable sharing yours
• You can use HTML and CSS as a design tool (to prototype or build your designs)
• You enjoy shepherding design from concept through implementation
• You can work within a defined design system and can explain why you might need to break outside of it
• You value research as a foundational design component
• You’ve used GitHub before or are familiar with modern developer workflows

This position may not be right for you if…

• You’ve never held a professional design position before
• You don’t have a desire to expand your front-end development skills
• You have serious front-end development chops, but aren’t excited by an iterative design process grounded in research
• You’re really into designing editorial content, digital marketing experiences, conference websites, etc… (we’re hiring those types of web designers, too!)

Applying

If the above interests you, but you aren’t sure if you would be a good fit, feel free ask me any questions via Twitter (my DMs are open). Otherwise, head over to the job application, we’re excited to meet you.

Thanks to Sophie Shepherd for inspiring me with her post and for her help editing this one.

Spotify (the streaming service that I use) is dropping the ball pretty hard when it comes to personal listening stats and communal listening features. So much so, that I believe that Last.fm could fill this void, while connecting users across multiple streaming services together.

You started as a way to bring listeners of downloadable media together. Around 2006, I began using your service so I could update my blog with the songs that I was listening to at the moment. A lot has changed since then, huh? I stopped blogging regularly… and then started again, and then stopped again, and then recently started again… and with the rise of streaming music services with “social” features built in, people like me kind of forgot about you.

After logging into my Last.fm account for the first time in a long while, a few things dawned on me. First, Spotify’s social features leave a lot to be desired. The sole reason why I came back today was because I wanted to track/see my most played songs, artists, etc… (seems like a simple request?) According to this article, the only way to achieve this with Spotify is to use Last.fm. Secondly, I don’t have a Facebook account. If you’re like me, you know that Spotify treats users without Facebook accounts as second-class citizens. You can’t have an avatar (recently fixed) or even a real first and last name without one. Beyond being nameless and faceless—forget about connecting with friends as they’ll never find you. “Normal” users (those with Facebook accounts) will have to know your handle and search for it (and most people just connect to Facebook and use those connections). Lastly, a big chunk of my friends don’t use Spotify. The streaming music ecosystem is pretty diverse with streaming services like Apple Music, Tidal, Google Play, Bandcamp, and many other smaller niche services.

I think this leaves you with a tremendous opportunity. Not since Rdio (RIP 💀) has any single streaming service done anything innovative with social listening features. Users are spread across various services and ecosystems and are dying to connect with each other. Could Last.fm be the thing to bring us together? I’m writing not to complain about your ads or to ask you to implement anything specific. I’m writing in hopes that you might take this opportunity head-on and innovate between the cracks in the digital music landscape so that we can discover music new, universally share my playlists, and stay up on what my friends are listening to regardless of service they use.

When the @font-face directive (which allows the use of non-system font files on webpages) made its official debut in the CSS3 fonts module, Flash was still a big part of the web. Compared to CSS at the time, Flash allowed for seemingly limitless possibilities in layout, typography, animations and consistency across platforms. It was extremely attractive to adopt with its relatively shallow learning curve and gave designers a more visual way to put content on the web.

A lot of folks (myself included) developed a palpable distaste for Flash-based sites as they were often slow to load, relied on a locally installed plugin, and often were a black box of content that was inaccessible to a large chunk of the web’s users. @font-face was just the thing CSS needed if was going to seriously compete with Flash and become adopted as part of the modern (and standard) way to build websites. HTML + CSS offered a more extensible and accessible way to present content and with the addition of features like @font-face we could start to see a future where the aesthetic consistency of Flash could be replicated with CSS.

I started experimenting with web fonts in 2007 after reading CSS @ Ten: The Next Big Thing. Ten years prior, this CSS2 draft from 1997 mentions the @font-face directive but it was removed in the CSS2.1 spec.

🎉 Fun fact: Internet Explorer was the first browser to implement web fonts with @font-face, back in version 4 (1997).

The web is now available on any capable device, largely thanks to the adoption of mobile-friendly web design (like responsive), the downfall of Flash as a web technology, and a user base glued to their phones reading Facebook at any given time. This has forced those who build web pages to consider performance impacts (load time, render time, etc..) more than ever before — or at least since the days of dialup when that draft was written in 1997.

Like images, JavaScript, and CSS bloat; web fonts can easily become performance bottlenecks if not kept in check. While they allow for consistency in typography across devices and platforms, concern for performance and accessibility over pixel-perfect consistency is a valid reason to think twice before using them.

Today, there are some newer fonts available that make setting type with system fonts on the web a little nicer. Since 1997, major OSs now ship with (and continue to release) native system fonts that can be easily adopted using a few stylesheet hacks and some carefully planned fallbacks.

Let me preference this list by saying that I am not anti-webfont and I think the technology was/is a huge step forward for CSS. I do think there is still work to be done when it comes to how browsers load these resources as it can lead to user experience issues like FOIT (flash of invisible text). Likewise, this list is experimental and hasn’t been tested on many devices beyond recent OSX / Android / and Windows 7+ devices. These stacks can work independently or in conjunction with web fonts and hopefully will be useful for folks looking for alternatives.

1. The modern serif

A modern and more humanist serif stack ideal for both body and display sized text.

body {
  font-family: "Hiragino Mincho Pro", Cambria, "Roboto Serif", serif;
  font-size: 16px;
  line-height: 1.4;
}

On the Apple side of things, we’re using a font intended for a Japanese character set which includes good support for latin characters. I think this is a hidden gem on Apple’s OSes that isn’t used nearly enough.

• macOS / OS X / iOS - Hiragino Mincho Pro
• Windows 7 and up - Cambria
• Android / ChromeOS - Roboto Serif
• Falls back to - local serif

2. The Helvetica / Arial alternative

Modern sans stack suitable for UI and body copy. A variety of weights (with a light option on most operating systems).

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

You might have seen this type of stack used on Medium, GitHub, and Facebook recently.

• macOS / OS X / iOS - San Francisco
• Windows 7 and up - Segoe UI
• Android / ChromeOS - Roboto
• Falls back to - Helvetica, Arial, local sans serif

If you want to stay strictly with neo-grotesque typefaces, you could pull out Segoe UI font to allow Windows to render the fall back (Arial). Segoe UI is one of the only default fonts on Windows that has a light weight option, which makes it useful in many display sized contexts.

3. The humanist sans

A humanist sans stack that works best with body copy set above 18px.

body {
  font-family: "Gill Sans", "Segoe UI", "Lucida Grande", Calibri, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

• macOS / OS X / iOS - Gill Sans
• Windows 7 and up - Segoe UI
• Android / ChromeOS - Roboto
• Falls back to - Lucida Grande, Calibri, local sans serif

4. Classical serif

A traditional serif stack suitable optimized for legibility in body copy.

body {
  font-family: Athelas, "Times New Roman", serif;
}
 
h1,
h2,
h3 {
  font-family: Athelas, "Palatino Linotype", "Times New Roman", serif;
}

Here we are only using Palatino Linotype for display sized headings on Windows machines as I find it hard to read at small sizes on lower resolution displays.

• macOS / OS X / iOS - Athelas
• Windows 7 and up - Palatino Linotype for headings and Times New Roman for body
• Android / ChromeOS - Roboto Serif
• Falls back to - local serif

Suggestions or additions?

If you have suggestions or additions to the stacks above, open an issue on this site’s GitHub repo and I’ll update or append them to this list.

… has been my mantra for the last six months. It’s been in the back of my head from the first conceptual sketch, to the last code deployment. As of Saturday evening—I can finally respond with a definitive, “nothing.”

I have launched my first product, Tab Lab, and I couldn’t be more excited for its future.

I’ve been working on this thing for a while now, and I think I’m finally ready to share it. Twitter, meet Tab Lab https://t.co/aoB0fXg6SQ

— Patrick Marsceill (@pmarsceill) February 7, 2015

Of the obstacles that I faced in putting Tab Lab together, three define my experience most completely:

1. Time.
2. Ignorance.
3. Fear.

And though the first two were surmountable, the third is a mountain that I’m still climbing.

At first, I struggled to reclaim my free time. I stopped watching TV every night, going out on the weekends, and spent almost every waking moment (when I wasn’t at work) chiseling away at this thing. Despite being incredibly productive, it became isolating and marginally unhealthy. Finding a good balance of hard work with measured breaks was more difficult than I could have imagined. I was truly immersed in what I was doing. When I was home alone some weekends, it wasn’t uncommon for me to wake up and start working only look up at the clock to discover that almost ten hours had gone by.

Fortunately, I have a encouraging wife who helped tame this habit—and even got me outside sometimes. If I hadn’t learned to tackle small bits at a time, I would have never left my desk, let alone launched a website. Stepping away became progressively easier, even necessary the further along the app was. The more I focused on other things, the more I realized that the quality of my work was improving. I reevaluated problems and saw them differently. My brain needed breaks, sometimes long ones, to perform at its best.

My second problem was that I had no idea what I was doing. Sure, I’ve designed a lot of sites and apps for a variety of clients—but I’ve never individually designed, built, and launched anything from start to finish aside from the site you’re reading right now. Fortunately, I was guided by services like Stack Exchange, Railscasts, and Code School to steer me through the unfamiliar territory of building a web app. In the beginning, I knew very little about the inner workings of a site like Tab Lab, let alone how to architect an application around them. By the end, a holistic operational view of these components allowed me to design them from a more enlightened point of view.

Consistent with my personality, I shared very little about this project until close to launch day. At one point, I was so paralyzed by the thought of not being able to pull it off that the project sat stagnant for a few months. I kept going back to the mantra, “So, what’s stopping you?” and was comforted by the fact that the list never grew beyond three items.

Fear is a steep and constant climb. I know I’m not at the top yet, but I’ve reached a bivvy and I’m not looking back.

Beyond actually reading drum charts, improvising, practicing technique, and all the things a student might do one-on-one with an instructor, I learned how a professional musician goes about honing their craft. My teacher patiently explained that this is called woodshedding. I imagined a small shack in a snow covered valley where bad musicians were banished if they messed up during a performance. Despite his best efforts, my eleven year old mind couldn’t fully understand what he was trying to explain to me.

Woodshedding isn’t a punishment. It’s a necessity. Woodshedding isn’t just practicing an instrument. Woodshedding is putting your understanding of an instrument and a song under a microscope. All of the ugliness and the mistakes come into focus. Woodshedding is working through it. Meticulously figuring it out. Dissecting a song until it’s a big mess, and then cleaning it up. Going at it until every dynamic is observed, every note and every rest is understood. Not just playing the song, but becoming so familiar with it and the theory behind it that improvising on top of it becomes the next step.

I don’t study music anymore, but I still think about woodshedding. As a younger designer, I had an idealized misconception that my craft was a precise, structured practice reliant on organization and cleanliness. Straight lines, stainless steel tools, white rooms and all that. Quite the opposite of how a jazz drummer might describe their profession. At a certain point—maybe after painfully working through projects that challenged this notion—my perspective shifted. These things really don’t seem that different to me anymore. Tearing up my work and examining all the components, consolidating, streamlining, rethinking, understanding, and rebuilding are daily rituals. I work on systems until extending and improvisation are possibilities. Making a mess is almost essential in order to maintain that kind of focus. When successful, the mess fades away with out a trace. The end result, whether it be a musical performance or a product or a website seems effortless to its audience.

In other mediums that I work with, like recorded music, the time spent leading up to an idea often reveals itself to be one of the most active and rewarding parts of my creative process. There is no formula for it, the only constant is time. Time to think, time to re-think, time to create, time to destroy, and time to think again. I find the same is true when designing. Most designers, like musicians, develop stronger intuitions as they gain experience. This intuition not only shapes the work itself, but it also determines when a piece of work can be deemed finished. It’s easy to forget this when working on the web due to its nature of being such a flexible format. Where recordings have the constraint of being finite and unchangeable, websites do not. Is a website ever finished? It’s certainly easier to justify “fixing it later” in the absence of this constraint, but I’ve found this can become a crutch if not consciously kept in check.

For my personal site’s redesign, I fundamentally changed my personal design process to avoid relying on this crutch. This gave me an opportunity to get back to why I started in this profession in the first place, my love of creating things. I kept things loose at first, emphasizing creating smaller ideas over the entire site’s execution. Surprisingly, the biggest challenge that I faced wasn’t in the design or development of the site, rather trusting that things would either naturally come together or be edited out as part of the process.

To keep myself disciplined, I set a pace of constant ideation, followed by editing (both by myself and peers), and finally iterating in code. Once I had something resembling my site I kept refining it until it felt right. Here is general overview of what that schedule looked like:

• I kept a Photoshop diary for a few months. I don’t know what inspired me to start doing this, but I found it to be extremely useful. Every week I forced myself to add at least one new element to it, even if it wasn’t entirely related to this site design. Just to get something out of my head and in front my eyes, without any judgment. I liken this to a personal, private Dribbble account contained in one giant PSD file. While the majority of its contents never got used, somewhere in that messy jumble I had the beginnings of what you are seeing here.

• I edited and edited and edited. I took everything I liked from that diary and massaged it into a loose layout. I kept refining it in Photoshop over and over until it started to resemble something like fragments of different pages. I sent early versions of the design to other designers and asked for feedback. Finally—and perhaps most importantly—I took time away from the design and came back to it with fresh eyes every few days.

• I set a code deadline. The design certainly wasn’t perfect in the PSD by the time I started coding it, but it didn’t need to be. By getting it into the browser by a certain date, I could make better design decisions and execute them faster. The final grid and type scale were developed entirely in code using general ideas of columns/gutter proportions and loose type sizes from the PSD. At the same time, I had little patterns established from the design comp that I iterated on and re-used throughout the site as a coded it.

• I didn’t set a launch date. This really wasn’t a purposeful decision. Just a feeling that if I could live with the design locally and chisel away at it until it felt right, it would evolve in the most organic way possible. I looked at the fully coded site every day for about a month (in my local dev environment), even if just for five minutes at a time. While I was browsing other sites, I would purposefully pull it up to see what the experience was like—judging how natural or jarring it felt. This lead me to discover more details that I wanted to temper and I hammered at them until they felt done.

Out of this thing comes a desire to try to break some of the rigidity that I impose on myself for both personal and professional projects. Designing for yourself is an exercise in confidence and trust in your own intuitions. It’s a challenge in restraint and a willingness to allow change to happen as consequence of growth. It’s a reminder to foster the formation of ideas, constantly evolve their execution, but allow their core to remain true.

I’m a front end dev that’s been in the business for over 15 years. I’ve always hand coded my sites, and I’ve never really gotten into grid systems. (I was working online back int the table days).

Grid systems and “hand coding” are not mutually exclusive. For me, grid systems are just as much of a design tool as they are a development tool. Designers have been using proportional grids to layout designs on paper since the days before the printing press was invented.

In the context of web development, grids allow designers and developers to layout pages with the consistency and flexibility that modern day web development requires. While it is a good idea to use a grid to help layout your pages, you may not want an entire “front end framework” like Zurb Foundation or Twitter Bootstrap to weigh down your production-level code. At Happy Cog, we use these as tools to get ideas into the browser early, but we don’t use these for production. Here are a few options that still allow a developer to use grid-based designs efficiently in front-end production:

• Roll your own. Chris Coyier did a pretty good demo here. I’m not a super huge fan of using class names like .col-1-2 so if I were developing a site using this method, I would make all those classes Sass mixins so I could just @include them within the element selectors that need to use them.

• Use a light weight grid system framework. Susy is a pretty good example of this. Susy is a Compass based grid framework that easily allows you to customize your grid using Sass mixins. This enables you to keep your CSS class names semantic. Neat is a similar framework that is built on top of Bourbon, if you that is what you prefer.

While both of these options are indeed technically frameworks, they exist purely in the pre-compiled Sass layer, do not contain additional UI elements (unlike Foundation and Bootstrap), and are relatively lightweight in terms of what gets served to the user. I tend to think of them less as frameworks, and more as as set of mathematical functions that make it easier for a developer to quickly divide a page up using proportions, percentages, ems, or pixels.

Does Happy Cog use foundation for live production websites?

No we do not. Foundation requires you to use a very specific patterns for class names, and markup.

And has Happy Cog ever taken something that was prototyped out in foundation then converted it into a live website for a client?

Prototypes serve as an alternative to exclusively creating paper wireframes. Their purpose is to more effectively document and communicate designs to our internal and client stakeholders. Frameworks like Foundation allow us to quickly and easily get our ideas into the browser and allow us to think about how things will scale from small to large screens. When prototyping, we aren’t as worried about the quality of the code—but the content, information architecture, and interaction design take priority. Prototyping may also be a good time for developers to get involved in thinking early about how they may approach a problem, while not actually spending time fully executing it.

If Happy Cog doesn’t use foundation or convert their prototypes to live sites, isn’t it more work to try and hand code a site later to match your Foundation prototype? (You’re re-creating the styes and html but without the “cruft”)

Since our prototypes have essentially replaced paper wireframes in most cases—it actually speeds up the design process and facilitates more conversations between our design and development teams. This allows our front end developers to see how elements on the page should behave and then plan for the best possible implementation sooner in the process. If prototyping were not part of our process, we would spend a fairly large chunk of time trying to document the same information on paper—which can be very time consuming. Front end teams would still have to hand code the site based on paper wireframes which inevidably leaves some nuances left undocumented. We’ve found that prototyping provides a more complete and definitive documentation, with clearer direction to stakeholders and developers alike.

HTML Prototyping is available for purchase on Mijingo.com. For more questions about the prototyping process, email me.

Ryan Jahn and I spent a day biking around Austin trying to eat lunch. After multiple unsuccessful attempts, we gave up and focused our collective energy on something that would get us through the rest of the day / night. The Russian Joe was born out of lack of energy, need for sustinance, and the desire to get in some day drinking.

Shoot the vodka, then dump the espresso into the stout and enjoy it at a hefty pace.

Credits:

• Drink recipe: Ryan Jahn and Patrick Marsceill
• Drink name: Allison Wagner
• Testers: Who ever was with us at Easy Tiger
• Honorable mention: Our waitress who let us do this

The Russian Joe

• 1 chilled shot of Russian vodka
• 1 shot of espresso
• 1/2 pint of stout

Such a waste of talent. He chose money over power, in this town a mistake nearly everyone makes. Money is the McMansion in Sarasota that starts falling apart after ten years, power is the old stone building that stands for centuries. I can not respect someone who does not see the difference

The first season of House of Cards has ended for me. I tore through the thirteen episode season in about a week after having recently cancelled my cable. I miss watching House of Cards, I do not miss having cable television.

I would have never even considered Ikea as the place to go when searching for the top of my desk, had it not been for Jessica’s blog post. The Ikea Numerär counter top in oak is actually the perfect size for this project and looks great after you stain and finish it.

This counter comes in a few sizes and I built my frame to hold the 73 1/4” x 25 5/8” size top. After getting it home (it’s way heavier than it looks), I sanded it with a hand sander and some medium grit paper. I then used a tack cloth to get all the dust up before staining.

I had some walnut stain left over from when I finished the hardwood floors in my house, so I evenly applied it to the countertop with a clean rag and let it absorb into the wood for about five minutes. After wiping off the excess, I let the stain dry overnight before finishing it with polyurethane.

I applied one coat of poly, let it dry for about 4 hours. Lightly sanded it, wiped it down with another tack cloth, and applied another coat. Due to the impending thunderstorm, I had to act rather quickly and didn’t have time to apply a third or fourth coat—which I would highly recommend doing.

I got the finished countertop onto the frame I built, centered it, marked off where the screws would be going with a pencil and drilled the pilot holes. The oak top is very hard wood and it would be extremely difficult to screw into it without drilling pilot holes first. The screws went in a bit harder than I expected—mostly due to awkward angles. Finally, I eagerly setup my desk for its first test run that evening.

A success.

I’ve been using it now for about a month and it is by far the best desk I’ve ever owned. I added a keyboard tray too keep the desktop clutter free, and its perfect for my setup.

First, a little backstory… A few years ago, I saw this post on Apartment Therapy about constructing shelving from steel plumbing pipe. I instantly latched on to this idea and added it to the list of projects that I wanted to take on in my then—new house. If you’re a home-owner, you know that this list quickly gets re-prioritized in favor of things leaking, mold growing, and whatever else requires immediate (and usually expensive) repair. Needless to say, the pipe-shelving project had been in the back of my head for a few years.

About a month ago, I stumbled upon Jessica’s blog through a link that someone posted on Twitter about some of her work at Engine Yard. I then found my way to this very detailed post about how she constructed a standing desk, using similar materials and construction methods as the shelving unit mentioned above. This immediately got the gears turning in my head and I spent a few days imagining how I could construct something like this.

Unlike Jessica’s desk, I didn’t want mine to be that of the standing variety. I did some research and found a few photos of other sitting desks that people had made out of plumbing pipe. Based on these photos and Jessica’s design, I sketched out some plans borrowing ideas from both.

Next, I took an inventory of everything I would need to execute this plan and headed off to Lowe’s. As Jessica noted, Lowe’s will cut and thread the pipes for you right in the aisle. They also have pre-cut and pre-threaded pipes from about 1 inch through 20 inches in length.

Parts required to build the frame

All parts galvanized steel, 1” diameter and the fittings made by Mueller

Fittings:

• 5 x Flanges
• 11 x “T” Joints
• 6 x Elbow Joints
• 4 x End Caps
• 16 x ‘close’ pipe nipple
• 1 x 4” pipe nipple

Pipes:

• 4 x 21.5”
• 2 x 28”
• 4 x 18”

Finishing Products:

• 1 bottle of spray degreaser, citrus scented
• 1 can of Rustoleum spray metal primer
• 1 can of Rustoleum matte black spray paint

When I got home, I decided to clean all the parts and quickly assemble the frame (without measuring or really tightening anything) just to make sure I had all the pieces I needed. The saw and the pipe threading machine at Lowe’s gets the pipes pretty greasy, so I used some spray degreaser and rags to clean each piece and remove any stickers.

The next weekend, it was time to prime and paint the frame. I reconstructed the frame and measured all the fittings, legs, and connectors to ensure I had a symmetrical table before it was too late to turn back. I put on one coat of primer, let it dry for about 2 hours, and then one coat of spray paint. This actually used up the entire can of paint and if I could do it again, I would have bought another can for a second coat.

Note: This was written for those using a Mac running OSX 10.7 or later.

Step 1 — Install Xcode and the “Command Line Tools”

You can download and install Xcode from Apple’s App store after creating a Developer Account.

After Xcode is downloaded and installed, there is another step that I always forget about. I mean always… And it takes me a good 20 minutes of cursing trying figure out why my compiler is taking a dump. So here is what you gotta do: You open up Xcode and select “Preferences…” from the Xcode menu and manually install the “Command Line Tools” by clicking “Downloads” tab, and then the “Install” button next to the item in the list.

Install Command Line Tools

…AND you have to do this step every time you upgrade to the latest version of OSX as well.

Step 2 — Install RVM and a non-system version of Ruby

I don’t like to muck around with the version of Ruby that comes installed with OSX. RVM (Ruby Version Manager) is a useful piece of software that lets you have segregated versions of Ruby installed at the same time. This lets us start from a clean Ruby enviroment every time, upgrade very easily, and not have to worry much about system configuration.

This is where you need to open up Terminal and get busy…

Install RVM & install the latest stable version of Ruby

$ \curl -L https://get.rvm.io | bash -s stable --ruby

Verify you a running on the newly installed “RVM” version of Ruby

$ which ruby
/Users/patrickmarsceill/.rvm/rubies/ruby-1.9.3-p327/bin/ruby

The important thing to note here is the /.rvm/rubies/ruby-1.9.3-p327. Your version numbers may be different, and thats ok but the path should be /.rvm/rubies/ruby-x.x.x-pxxx. If you don’t see something like this, you should switch to the newly installed version:

$ rvm use 1.9.3

This just tells your machine to switch to Ruby 1.9.3 installed by RVM. You may have a different version number installed by RVM, in which case you would run rvm use 1.9.2 or rvm use 1.9.4.

Step 3 — Install Git

The easiest way to install Git on an OSX machine is to download and install the Universal .dmg file from git-scm.com. There are other ways to do this from the command line, if you are a Homebrew user like me you can use:

$ brew install git

Step 4 — Build your development environment

/images/blog/prototype-setup/active-projects.png Active Projects Folder

Create and/or open the folder where you might want to house all your prototyping projects. I like to use a folder called “_active” where all my current projects live.

Switch back over to terminal and CD (change directories) by typing cd and then a space, do not press “Enter” yet:

$ cd

Then drag the folder icon (in this case it’s called “_Active”) immediately following the space after cd. Like magic, the full path to this location will appear after the cd:

$ cd /Users/patrickmarsceill/Dropbox/_Active

Press “Enter”

Now it’s time to get some development tools and start building:

<controversialname> “StrapOn” </controversialname> is a pre-packaged set of tools and rake commands that I build with the help of my friend Stephen for quickly building HTML prototypes.

From your current location in Terminal run:

$ git clone git@github.com:pmarsceill/StrapOn.git

This will pull down a directory called “StrapOn” that you can use as a starter for your projects. A more detailed tutorial is in the works, but to get started cd into the “StrapOn” directory:

$ cd StrapOn

Then install all the tools that are needed for this project by running:

$ bundle install

If successful you should see something like this:

Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

Start the StrapOn dev mode by running this rake command:

$ rake start
 
DEPRECATION WARNING: ActiveSupport::Memoizable is deprecated and will be removed in future releases,simply use Ruby memoization pattern instead. (called from require at /Users/patrickmarsceill/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:36)
 
 
StrapOn starting.....................
 
DEPRECATION WARNING: ActiveSupport::Memoizable is deprecated and will be removed in future releases,simply use Ruby memoization pattern instead. (called from require at /Users/patrickmarsceill/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:36)
DEPRECATION WARNING: ActiveSupport::Memoizable is deprecated and will be removed in future releases,simply use Ruby memoization pattern instead. (called from require at /Users/patrickmarsceill/Desktop/StrapOn/config.ru:14)
[2012-11-19 17:02:23] INFO  WEBrick 1.3.1
[2012-11-19 17:02:23] INFO  ruby 1.9.3 (2012-11-10) [x86_64-darwin12.2.0]
[2012-11-19 17:02:23] INFO  WEBrick::HTTPServer#start: pid=30507 port=4000
 

Voila, StrapOn has started a local server on your machine that you can use for development by pointing your browser to: http://localhost:4000

This also includes starts an auto-compiler for SASS, and all the built-in templating engine included in the Serve gem. Both of which will be explained in my next post about developing with StrapOn.

Downloads

• Command Line Tools (Included in Xcode)
• Ruby Version Manager (RVM)
• Git