DEV Community: Ryland @ Stackbit

How Dan & Bob (and a Company You've Never Heard of) Changed Computers Forever

Ryland @ Stackbit — Tue, 09 Nov 2021 21:53:04 +0000

You’ve never heard of Dan or Bob.

But you should have.

They built a company, VisiCalc, that led to Apple's first big success and changed computers forever.

Here’s their story.

The year is 1976

And Dan Bricklin is walking into class at Harvard Business School

He sees a dozen chalkboards connected by one massive matrix of rows and columns. With a calculator, you could change one cell and ripple thru all the connected cells.

This made Dan think:

A few years later, Dan built the first version of VisiCalc

It took 1 week.

It didn’t scroll. The decimals weren’t fixed. But it solved one huge problem—it lettered the columns and numbered the rows, so you could refer to each cell

Heres a photo of it from Dan’s old 35mm camera

Dan was ecstatic. But he hit his programming limits. So he recruited his buddy Bob Frankston from MIT

Bob went to work in the attic of this house. He used a shared MIT system that was expensive to use during prime daytime hours.

So Bob slept during the day. And worked at night.

Bob hit one huge problem.

He couldn't condense his 20KB VisiCalc code in the 16KB of the low-end Apple II.

So when it shipped it was only available on the much more expensive 32KB Apple II. They were nervous it wouldn't sell.

(Here’s some of Bob's first source code.)

Before launch, Dan sneakily used it for a class assignment.

The teacher told his class to analyze a Pepsi marketing campaign.

The next day Dan came back with 5-year projections, testing all sorts of possibilities.

When asked how he did it, he said "multiplication and addition"

Dan and Bob debuted VisiCalc – the very first computer spreadsheet – at a computer expo in Manhattan.

It wasn’t well received.

Only 22 people showed up. Of which 20 were friends and family.

The 2 “real” attendees walked out early to see the TI 59 Calculator presentation. lol

In late 1979, Dan and Bob sold their first unit for $100.

And it became a huge hit.

News stories spoke about business folks lining up to buy VisiCalc and then, the next day, lining up again to buy the $2,500 Apple II when they realized it was the only computer it could run on.

4 yrs later, Dan & Bob had sold >1M copies.

It sold so well with the Apple II that Steve Jobs claimed VisiCalc the biggest single event that led to Apple’s success.

"If VisiCalc had been written for some other computer, you'd be interviewing somebody else right now" -Steve Jobs

Beyond all the success, Dan and Bob’s work convinced people that computers are not just toys.

They are tools.

And for that, we should know who they are and give them our thanks.

If you liked this story, I share more like it 1-2 times every week on Twitter here. Cheers!

5 CSS shortcuts

Ryland @ Stackbit — Tue, 09 Nov 2021 14:47:55 +0000

It's amazing how long I didn't know about these. They make my style sheets much more clean.

I hope they do the same for yours. :-)

1/ List properties, made simpler:

2/ The background property, made easier:

3/ Font and line-height properties, made like a pro:

4/ Margin and padding properties, made how they should be:

5/ Border property, made with love:

An alternative way of looking at your career as a developer

Ryland @ Stackbit — Wed, 03 Nov 2021 18:26:48 +0000

The computer scientist, Bret Victor, empowers people to think the unthinkable.

He’s become famous for it. And he’s done it with an approach to his career (and life) that’s not normal.

I’ll explain Bret’s approach.

Bret is fascinated by ideas.

He believes great ideas in the form of art, story & invention give meaning to people’s lives.

Hence, bringing ideas into the world is one of the most important things people do.

So he asks: What tools create a healthy environment for ideas to grow?

Let’s take coding. Here’s how a normal code environment works:

Your time is spent working in the code blindly.

To better nurture ideas, Bret invented a different coding environment.

Here Bret's coding environment, next to this picture:

Say you add code for the sky and sun.

That's become Bret’s principle:

“Creators need an immediate connection to what they create.”

Meaning if you make a change, you see the effect immediately.

When he notices that principle is violated, he takes it as his responsibility to fix it.

Here's another example.

In this game, we want the little guy to bounce through the
little passageway.

He built in immediate controls of space and time.

So Bret has this principle — that creators need an immediate connection.

When he notices it being violated. He builds tools to right that wrong.

But why is this important?

As a technologist, you can recognize a wrong in the world. And you can have a vision of what a better world could be.

You can dedicate yourself to fighting for that principle. Social activists typically fight by organizing. But you, you can fight by inventing.

The takeaway is that this lifestyle is an option that’s available to you. And it’s one you’re not going to hear much about.

You can choose to sleepwalk through life and accept the tech world defining you by a skill. But you don't have to.

If there’s something in the world you feel is a wrong. Then you can have a vision for what a better world could be. And you can find your principle

So after this, think about what matters to you. What you believe in. What you might fight for

Decide to define your life your way.

If you’d posts like this on your twitter feed, follow @stackbit on twitter.

7 design principles for developers

Ryland @ Stackbit — Wed, 13 Oct 2021 15:01:21 +0000

Ever said this? And then have that happen?

Yeah, me too. lol

Here are 7 tips to help.

1/ Use Relative Units & Percentage Widths

Using em, rem, and percentages helps your CSS styles flow across screen sizes.

ex: If you need to change a breakpoint, your widths work across the board. And your font-sizes can change by simply changing the element's font-size.

2/ Content (not device width) determines breakpoints

You don't want to end up in this loop: New device, new media queries, new device, new media query...

To keep that from happening, here's what you do:

Base your breakpoints on the natural qualities of your content. As screen size increases, pick where it’d be better in a new formation

Boom! Breakpoint.

3/ Use min-width media queries

Using min-width ensures that mobile styles get loaded without desktop styles mixed in.

This can significantly improve the mobile experience and your site's SEO.

4/ Start by listing features, not designing layout.

If you’re building a cheap flights site don’t ask: “Should this item be on the left or right?”

Instead ask: “What will our users need?”

Write out items like a datepicker, input field, search button, etc. Then piece them together.

5/ Follow the thumb rule

75% of people use their thumb to operate their mobile device. Place key actions where it's easily accessible.

💚: Easy access = Most important elements
💛: A small reach = Secondary elements
🧡: Takes effort = User always notices

6/ Sketch, Design, Code.

Sketch first, always. Notice how the sketch is rough and details are left out. It gives room for interpretation on a design tool.

But it’s also specific. It’s very clear how it works, what needs to be built, and what doesn’t need to be built.

7/ LT Browser

The LT Browser was made specifically for testing website responsiveness.

✅ +45 screen sizes to test on
✅ Built-in dev tools for debugging
✅ Network throttling testing
✅ Local testing
✅ Google Lighthouse performance reports

How am I hearing about this now!?

Big thank you to the folks quoted here.

Luke Wroblewski: Mobile First Book
@adamwathan Steve Schoger: RefactoringUI
@chriscoyier: CSS Tricks
@dhh, @jasonfried: Shape Up Book

And that's it!

If you found this helpful, let me know by liking the tweet thread on Twitter. 💖🙏

7 Ways to Escape CSS Hell

Ryland @ Stackbit — Tue, 12 Oct 2021 00:23:51 +0000

Ever have this happen? lol

Yeah, me too.

Here are the 7 ways to completely center whatever you want with CSS.

`1. text-align: center;`

This works only on display: inline & display: inline-block elements. Note also that it must be applied to the parent element.

`2. margin: 0 auto;`

This works only on display: block elements. And the element must have a width.

You can also specify just margin-left: auto and margin-right: auto if you want margins on the top or bottom.

`3. vertical-align: middle;`

This works only on display: inline & display: inline-block elements.

`4. float: center;`

lol (You cannot center floated elements.)

`5. Centering absolute`

When this comes up, use transform and 50% coordinates to center an absolutely positioned element.

`6. Centering with flexbox`

Flexbox has a bunch of different alignment classes that are always applied to the parent. This here will be completely centered within the box.

`7. the one I forgot ;-)`

Jamstack Setups: The good, the bad, the ugly.

Ryland @ Stackbit — Mon, 11 Oct 2021 19:00:49 +0000

9 questions to ask nontechnical folks before working on a project

Ryland @ Stackbit — Tue, 05 Oct 2021 17:58:40 +0000

1/ What's your website do today?

Encourage them to complain about what's frustrating them. Learn their true problems.

Once done, repeat their problems back to them.

2/ What does your ideal website accomplish?

Wrong Answer: "It gets more customers."
Right Answer: “It enables us to sell our products to people who live far from our store location.”

Learn their ideal end-state. Repeat it back to them. They'll love hearing you understand.

3/ Can you tell me more about X?

Keep them talking with phrases like:

What do you mean?
Why is it done that way?
How do you like that?

Extract as much as possible about their pains, needs, and use-cases.

4/ Who's responsible for design?

Clarify that design is separate from development.

Are you responsible for design? Do you have to find the person? Are they giving you a design?

5/ How many different component & page layouts?

Devs are infamously optimistic.

Use the number of layouts to help estimate your project timeline.

You should overestimate the time you think it'll take on every project — even double it! You may still be under.

6/ Who's responsible for content?

Content is a beast of its own.

Make sure it's crystal clear exactly who owns content creation. Add that to your estimates.

7/ What 3rd party services will we use?

It's likely they won't have an exact answer.

Audit their existing site, propose services based on their needs, and recommend tech based on what their in-house teams may be using.

8/ How will we communicate during the project?

Check-in consistently — even if you don't have an update.

Simply message them, "No new updates since we chatted last." They will appreciate it and you may get new info from them.

9/ Offer multiple tiers.

Offer 3 tiers of solutions from "everything and more" to "just the basics."

Let them move items around and customize their own tier. This will help you land more deals because you give the client flexibility.

Thanks for reading!

If this helped you, let me know by giving the article a like. :-)

Also, I'm building a website builder for NextJS. If you're interest in testing it out email me at ryland@stackbit.com.

❤️ More articles to come!

How Emma Bostian's resume landed her a job at Spotify

Ryland @ Stackbit — Wed, 02 Dec 2020 19:59:12 +0000

Here's how Emma Bostian’s resume got her hired at Spotify.

1) Stand out

Recruiters spend 7.4 seconds reviewing a resume.

Knowing this, Emma built her resume to capture a recruiter’s attention.

Look.

It stands out with an organized layout, an order that makes sense, and a little visual flair.

2) Easy to read

After earning the recruiter's attention content becomes king.

Emma strategically placed her most relevant info on top.

If you’re experienced, list your most relevant and recent roles first.

If you’re brand new, list your most relevant projects, internships & certifications first.

3) Impact statements

Beneath each role in Emma's Work History, she wrote 2-4 impact statements.

She doesn't just explain her responsibilities here. She highlights her impact and quantifies it wherever possible.

Nailing the work experience section is critical to landing the interview.

4) Action verbs

Each impact statement needs to feel powerful.

To do this, Emma started each of her statements with an action verb like these:

(Hack: Review the job description and use the action verbs they use!)

5) Skills

Rule of thumb: Anything you list on your resume an interviewer will likely ask about.

Emma believes you should feature all your skills, but not overpromise. So she recommends organizing your skills by expertise.

If you have basic experience with Ruby, mark it as basic. If advanced, mark it as advanced.

6) Education

Your education section depends on your background.

If you're a recent grad, list your relevant projects, internships, and certifications here.

If you're self-taught, leave it out. Showcase your top accomplishments instead.

Remember: Most relevant info first.

7) Certifications

If you have any awards or certifications, add them!

Emma’s awards showcase her ability to excel in the workplace.

Emma doesn't list her certifications. But for those new to the industry, certifications are a killer way to learn new skills and beef up your resume.

8) Contact info

Emma's contact info makes a great first impression.

It's complete, relevant, up-to-date, and professional.

(In other words, no emails like ricky_baker1993@hotmail.com.)

9) LinkedIn

If you look at Emma's LinkedIn you can tell she treated it as an extension of her resume.

She dialed in her: professional photo, job title, accomplishments & awards, etc.

This all helped her convince Spotify's recruiters she was a great fit for the role.

10) Github

Emma's Github also reinforced her resume.

For each skill she lists on her resume, she highlights it with a featured repository.

With this, she's making it a no-brainer for Spotify to offer her an interview.

Nod of Appreciation

Big kudos to Emma.

I used her amazing LinkedIn Learning Course, 'Writing a Tech Resume' to help put this together. Definitely check it out.

Ok, thanks for reading!

Tbh, this took about a week to put together alongside my full-time job.

If you found it helpful, perhaps share it with some pals. This really helps.

Oh, and if you'd like more on how real developers level up their career, then you might enjoy my newsletter. :-)

Till the next one! –Ryland

How Samantha Ming lands developer jobs without applying

Ryland @ Stackbit — Tue, 17 Nov 2020 19:04:26 +0000

Samantha Ming got her first developer job in 2016 (without ever getting a CS degree).

Today she’s a Front End Developer at GitLab fast-tracking her way to becoming a Senior Developer.

Here are the insights behind her career growth success.

When you dig into Samantha’s magic, you’ll see she’s fully optimized her LinkedIn.

Step 1? Keywords.

A recruiter might be looking for a Javascript developer. If you don’t have the word Javascript in your profile, forget it, they won’t find you.

Samantha also ensures she's toggled on the right settings in LinkedIn.

Here's her set up.

A few months ago Samantha had a friend let her know his company was hiring.

Why?

He said he’d seen some of her posts on LinkedIn and thought she’d be a good fit.

The more you share on LinkedIn, the better chance you have of opportunities FINDING YOU.

Samantha's other superpower is simple – being kind & friendly.

When she was looking for a job a friend advocated for her & she immediately got an interview.

Other developers are your best resource to get a job. If you’re kind you can easily ask for a referral.

So don’t be a jerk!

Here are email templates you can use to ask for a referral.

Now, networking and LinkedIn may help you get an interview, but acing the interview and algorithm will land you the job

Here are Samantha’s tips on whiteboard questions and take-home challenges.

In whiteboard challenges, you can’t use Google.

So Samantha actually treats the interviewer as Google.

Forget a method name? She’d just ask.

Interviewers want to see your thought process, not that you memorized the syntax.

Speak your process aloud. Even if you get stuck.

Take-home challenges always have a time limit, so speed is the game!

Samantha figured out the biggest time saver is optimizing her set up time.

The faster she could set up her dev environment, the more time she had to actually tackle the challenge.

And lastly, the culture interview...

So what makes a person a cultural fit? In Samantha's words:

'It means you’re not an asshole! That’s it!'

lol

In the end, people want to know you’re someone they'll LIKE working with.

Kindness, positivity, empathy are the winning formula for landing a job.

To summarize!

Samantha’s success landing jobs stems from:

1/ Being kind & friendly, sharing her successes, and optimizing her LinkedIn to create serendipitous opportunities.

2/ Preparing for the interview thru simple tactics to help her land the job.

Simple.

Ok, thanks for reading!

If you'd like to learn more from Samantha, she's killing it on Twitter and Instagram,and here’s her site too.

If you learned something and are feeling generous perhaps show some love to the Twitter thread.

I work a full-time job while creating these articles on the side, so this really helps.

Till next time! –Ryland

A Guide to Career Growth by Facebook's Director of Engineering

Ryland @ Stackbit — Fri, 06 Nov 2020 22:06:09 +0000

In 2009, as a new grad, Raylene Yung started as an engineer at Facebook.

In six years, she went on to help scale Facebook from 700 to +10k employees. Then she did the same at Stripe from 200 to 1500.

Here are her engineering career growth tips (for new engineers to org leaders).

Top 3 lessons thru every stage:

1/ Strive to be the most valuable, but least critical.

Early on Yung got paged constantly.

She had become the sole person to fix a job. She learned that being the lynchpin is a drawback. So her goal became — be extremely important, but not a failure point.

In other words, think about how long you could be away from your team and how far off course they would get. Do everything you can to close that gap.

2/ Want to succeed as a manager? Establish emotional equilibrium.

As an individual contributor, Yung believes you don’t see the full picture of the ups and downs managers deal with.

So she sketched this chart as a visual metaphor.

3/ Focus on growth and learning at every step — not quickly climbing the ladder.

Yung believes management and individual careers (IC) aren’t strictly parallel paths.

But to have flexibility, you need to learn to break down large problems & DELIVER on technical projects.

If you can do that, you will enable yourself to choose any career path later (IC or manager).

For New Devs,

Yung outlined these three moves as ones that knock early engineers off-course:

skipping engineering fundamentals to pivot into other roles prematurely.
moving on from a team or company too quickly.
chasing the latest trend.

Instead, as a new dev, she said to lean on these two tactical, guiding questions:

how can I make every code change a great one?
how can I be as good at [X] as [this person] on my team?

For Technical Leads,

Yung said they should focus on three growth-focused questions:

do I deeply understand the systems I work on, and how they can break or be improved?
how do I know we are working on the right things?
how can I build better people leadership skills?

She mentioned that people can get trapped as a domain expert here. To keep that from happening consistently ask yourself:

how do I keep learning & stay challenged?
how do I continue to show value when I’m starting over in a new area?
how can I transfer knowledge to the people around me and lay out a strategy for future generations?

For Engineer Managers,

Yung's advice is to consistently ask yourself:

how healthy is my team? How high-quality and high-impact is our work?
how well can my team operate without me?
don’t default to adding more engineers.

Instead of increasing headcount, ask:

why does my team exist? And why does what we work on matter?
how can I help my teammates grow across all experience levels and scenarios?

And for Organization Leads,

Yung's advice is to continual question youself with:

what unites your teams and why are you supporting them together?
are your teams as healthy as they can be? Are they even the right teams?
am I spending time with my teams in the right way?

I'd love to hear your take on these tips, especially from people who've been through a few of these career stages.

The article did take me a while to unpack. So if you enjoyed please share the thread.

Till next time!
-Ryland

923 Days Ago I Typed "How to Make a Website" into Google (My Journey Learning to Code)

Ryland @ Stackbit — Thu, 24 Sep 2020 22:59:17 +0000

923 days ago, it was day 1 of learning to code.

I was consuming Pieter Level's How to Bootstrap a Business presentation.

And something stopped me.

He said,

"To build your idea, you should learn to code yourself.

Just open Google and write, "How to make a website."

The biggest thing in coding and business is learning how to learn. Or learning how to figure things out yourself."

Just F—in' Doing It

I'd never considered that.

Back then, I wanted to build a map of the world's best surf spots and provide cheap flight and beachfront hotel discounts to them.

So 923 days ago, I did what Pieter said.

I literally typed "How to build a website" into Google and began learning to code.

Here's me literally doing it.

I even recorded it.

Here's the YouTube. Check it out.

Getting Stuck Meant I was Doing It Right

I did this for 3-4 days. But I began to feel constrained or stuck.

Like, I didn't know what to learn next.

So I asked a friend.

She was so excited about what I was doing!

She told me to learn HTML, CSS, Bootstrap, Javascript and Jquery. And to do it using Treehouse.

So that's what I did that.

I’d take a tutorial.

Then I’d code on my project for as long as I could and slowly I'd become completely stuck.

Like here.

I couldn't figure out how to show multiple surf spots without the code being un-godly long (Javascript loops!).

At that point, I'd take another tutorial.

Once I'd figure out how to keep going, I'd continue coding the project.

Rinse. Repeat.

In case you want to learn to code too, here's the exact tutorials I took at Treehouse:

HTML Basics
CSS Basics
Bootstrap Basics
Beginning Javascript Track
jQuery Basics

Learning How to Use a Database

After getting stuck because I my code was getting crazy long

my friend told me to check out Firebase for my first database.

I Googled around and found the tutorial playlist below by The Net Ninja.

Firebase tutorial playlist

I watched each video, did the full tutorial and slowly figured out how to create, read, update and delete (CRUD) items in a database.

This was completely game-changing.

I remember feeling like I could build forever at this point.

Here's what the project started to look like:

I still needed to Google how-to's for almost everything, but I could build and build and build.

It was so empowering.

Learning How to Use APIs

A few weeks from here, I wanted to add a map with pins to my site.

This was my first time engaging with an API.

I learned how to do this from this YouTube tutorial by Brad Traversy.

From that one tutorial, I added a map with surf spots and places to stay right next to the waves.

I was so amped on it. I remember wanting to show everyone I know.

Here look:

It's worth mentioning, Brad is my favorite online teacher by far.

I’ve taken every YouTube tutorial he has online. And I've bought multiple of his Udemy courses.

Any course Brad makes is worth its weight in gold.

Feeling Unstoppable, Then Getting Stopped

Once I figured out how to plug into APIs I felt unstoppable.

With all the knowledge above, I coded and built Surf Trip List for 9 months.

Here's me describing the end product.

It’s a story for another time, but life changed and I gave up on Surf Trip List.

If I’m honest, I got pretty depressed at this point too.

I felt like a total failure.

I kept starting other projects, but I couldn’t finish them.

I remember wanting to build a project with the languages I knew.

But I felt constrained.

Like it'd be super hard to build a large project with only Javascript.

When Stuck, Build for Someone Else

Finally, I decided to build a project for someone else (a blog for my fiance) as a forcing function to learn React.

At this point, I had a full-time job.

So I'd learn for an hour here or an evening there.

I took the React Docs tutorial (three times lol) and read through the docs multiple times too.

And I took Brad’s MERN Front to Back Udemy course and all his React related courses YouTube. Here’s the best one to start with.

I should have filmed some of this.

But like I said, I just needed to complete something here. I wasn't in the mind space to share the journey then.

As I went, I learned React wasn't great for SEO.

So I did some research and found NextJS.

Learning NextJS

NextJS is incredible.

It's a React framework for static sites.

It's server-rendered, so it's crazy fast and optimized for SEO.

I read the docs and took this tutorial (which is so good, btw).

Learning Tailwind CSS

At this same time, I learned about Adam Wathan and Steve Schoger's Tailwind CSS.

It’s basically Bootstrap on steroids.

It’s a CSS library that you can customize as much or little as you want.

Here’s the tutorial I used to start.

I even bought Tailwind UI for all the pre-built components and templates, and it sped up my dev process at least 2X.

Ready to Go! Well Almost...

I had my fiance's blog all set up (with placeholder content):

But...

My plan was to convince her to write the blog in Markdown.

(And push it up to Github with git CLI commands. lol)

Which yeah... would never have happened.

Learning Sanityio

Luckily, my buddy Dylan Jhaveri saw this and told me about Knut Melvær's Sanityio.

Sanityio is a customizable CMS (like Wordpress) that serves up content to the DOM with the perfect amount of flexibility.

I worked through their docs to understand it and used this Next/Sanity template by Shaswat Saxena to re-start my project with Sanity.

Here's the Sanity Studio I set up for my fiance's site:

React's Context API

As always, I built until I got stuck.

I hit a place where I needed a tool to help manage semi-complex interactivity on the site (in coding terms this is the ability to more easily manage state).

In Lehman terms: If you click on this button, have the code change these elements inside these four different files.

Changing the state of elements inside numerous files gets messy. So you need a state manager.

After some Googling, I found React's Context API (it's React’s version of Redux, which I had heard of before).

I took this Brad Traversy tutorial and learned the Context API. Start at 15.00.

Here's what I ended up with inside my code:

Ability to Build Forever

After this point, I felt like I could build and build and build again.

I’d still Google simple things (and always will), but I could flow.

And after many nights and weekends (since I have a full-time job) I finished my first React project, Here Now Body!

My fiance's site still has placeholder content…

But check it out:

But I'm super stoked on how it looks and works anyways.

After that, I built my most recent project — a whole other site called Remote Dev Jobs.

This is totally under construction, but it's been amazing to hack on a project again.

It looks like this so far:

And with all that, I feel empowered to take on projects that seemed too big previously.

So to sum my journey learning to code!

Summary of Tutorials

HTML Basics
CSS Basics
Bootstrap Basics
Beginning Javascript Track
jQuery Basics
Firebase Course
Google Maps API
React Docs’ Tutorial
React Docs
MERN Front to Back Udemy
React Basics
NextJS Docs
NextJS Docs’ Tutorial
Tailwind Tutorial
Sanity Docs
Context API Tutorial

Summary of Learnings

Take a tutorial. Once you've learned a little, build your own project from what you learn.

Build until you feel a constraint, then learn more. Don’t learn just to learn.

Once you understand a language’s keywords, you’re set. Code until you're stuck. Then Google keywords for whatever you need.

I’ve been stuck for 7 days on one problem multiple times. Ask people online. They will help.

You can do it.

Thank You

Thank you for reading! I’m not going to lie. This took a while to put together.

If you’d like to say, "Thank you" please retweet the first tweet on the thread on Twitter below.

// Detect dark theme var iframe = document.getElementById('tweet-1308833542735093761-874'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1308833542735093761&theme=dark" }

That would be the most meaningful way to say, "Thanks".

Yew, yew!

– Ryland