[Jakob Nielsen] (https://www.nngroup.com/articles/mental-models/) defines mental models from a UX perspective: “A mental model is what the user believes about the system at hand."

[James Clear] (https://jamesclear.com/feynman-mental-models), in a fantastic story about mental models, brings it back to its essence: “If all you have is a hammer, everything looks like a nail… When a certain worldview dominates your thinking, you’ll try to explain every problem you face through that worldview."

When we look at web technologies, they are dominated by all kinds of mental models.

The new JavaScript programmers, those who came to the web in the last 5 years or so, believe that the web is JavaScript-first, with HTML and CSS as annoyances that never “work” correctly. Those who have been in the web field for over 10 years know you start with semantic HTML, layer on the CSS for styling, and use JavaScript sparingly. However, when we’ve taught the JavaScript-first model, we wind up with the modern day messes we see dominating the world of custom development.

One of the big advantages I bring to the technology space is a breadth of knowledge in many areas. I started with Dreamweaver and HTML, later bolting on CSS. I moved on to pushing content management systems to their limits. I learned in a time when we didn’t have a zillion command-line tools for managing files. I started working with CSS when there were no browser developer tools. All I had was the HTML and CSS from “view source.” I had to figure out what was broken on my own.

Now as I make the switch from teaching code to teaching no-code, there is so much I bring to this new world.

• I can ground the problems that no-code tools solve in coding language. Or not.
• I can frame the problems no-coders encounter in the words of a model that speaks to them.
• Someone needs to teach HTML and CSS to those who will not use it professionally. Our current courses assume you have 27 different command line-based tools and make it look so difficult. But yet, we provide the “CSS editing box” for those who want to dump in their custom CSS. If you’re going to put CSS in that box, you have to know how to write it. And in some ways, this problem is more difficult than what the professionals face. Have you SEEN the crap that passes for HTML these days? Have you tried to override it?

There are plenty of artists making a living by creating art. Let’s define “art” narrowly here: painting, pottery, handmade jewelry, fiber arts, woodworking, sculpture, etc. The basic stuff you’d see at a craft show.

They typically have several outlets for their work, and through the combination, they make their living:

• personal studio space where they create work, which may also have a show space (or a separate show space)
• craft shows, previously all in-person, now some virtual
• Etsy store
• Galleries

Fundamentally, artists love making art. The business side is what they do to support their work.

I’ve realized I’m an artist too. I create courses. I create lots and lots of courses. I put them out in the world in many ways:

• higher education via Harvard Extension
• commercial video courses at LinkedIn Learning, Frontend Masters
• conference talks and workshops

But although I have a “home studio” where I create content, I don’t have a “show space” of any kind. For artists, that’s usually where they start.

Maybe it’s time to fix that.

Sometimes it’s best to simply move forward with something and reset the goal as you move forward.

Rather than initially setting the goal as “I’m reworking my entire life and this is my future full-time job,” start with “this seems like a super fun thing to do, so I’m going to do it and see what happens.”

[dina Amin] (https://www.dinaaamin.com/) was an inspiration for pursuing fun. I saw her speak at the October 2019 Smashing Conference. She told a story of how she enjoyed taking things apart. Then she got a camera and figured out stop-motion photography. She made adorable little videos from the things she took apart. People love her work, and it eventually started to pay the bills through conference talks, commissions, workshops, commercial work, and so forth. This is the model of an artist.

It’s also hard to think about a problem when you’re personally invested in it. When I think about new businesses, I think about all of the things that could go wrong, what happens if no one likes it or wants it, what happens if it doesn’t make enough money (or any money), and so forth. These doubts are powerful.

But what if it goes right? Sometimes that’s even more scary.

In non-pandemic times, I speak at a lot of conferences. While there, I attend talks.

There are two ways to look at every talk at a conference.

a. It is adding on to a topic or area that you already know well. As a CSS expert, any CSS talks usually fall in this category for me.

b. You know nothing about the topic, but you’ve heard about it peripherally and have some curiosity in this area. I’m not a JavaScript expert. However, I’m curious about what problems the latest JavaScript framework addresses. What are the advantages of React over Vue? Vue over React? Why do we need all of these frameworks anyway?

In the first 3-5 minutes of your talk, you can satisfy both of these audiences quickly and easily by grounding the audience in the technology you’re presenting.

Amazing! How do you do it?

1. “The technology I’m talking about today is Y. Y is {type of technology} that addresses ABC problems. It’s put out by JKL Corporation/open source project/whatever, under a DEF license. It requires GHI technologies to configure and run.” (describe dependencies, technology stack, or server configurations here)

2. “Y solves the following types of problems…”

3. “You may wonder why we need Y, when we already have X, which addresses the same problems. X and Y are indeed similar, so let’s compare their strengths and weaknesses.”

4. “Now let’s get into the meat of Y.” (Time to go geeky wild!!!)

This formula conveys all kinds of background information about your technology very quickly. In 5 minutes, as a geeky person fluent in web technologies, I’ve got all of the high-level details I need to decide if Y is any interest to me at all. That is an excellent talk already. Five stars!

What if you already know X? Well, in 5 minutes, you may still pick up a nugget you didn’t know before, or make a connection you hadn’t previously made. For example, when you look at strengths and weaknesses of various technologies, you may not have been able to articulate why you’re so excited about Y to your boss. Now you have the argument to do it.

By the way, the true experts in technology never mind these high level discussions or think less of you for giving them. Everyone must learn sometime. If you can explain a technology in 5 minutes, that’s mastery in action.

The next time you give a talk, internally at your company or externally at a conference, keep these points in mind.

You don’t have to be comprehensive in your presentation. You need to be memorable.

And being comprehensive means you’re not memorable.

Present so the audience learns and remembers, not like a specification. We can always look up the specification later.

Here it is, in four easy steps:

1. Statement of problem encountered; brief, high-level description of solution.

2. Let’s walk through an example together, with every item explained.

3. Now you try it. Here’s a similar issue with a small twist. How would you solve this?

4. Let’s walk through how I thought about this problem. Your answer may be slightly different, and that’s OK.

{while there are more problems, repeat the loop until all problems are addressed}

This can be molded into a conference variation, a video variation, or a classroom variation. The fundamental steps are the same.

I teach because I want to make the web a better place.

I want everyone to have a voice.

I don’t want anyone kept out by gatekeepers.

When I started in this industry, the gatekeepers were understanding files and folders, FTP, and syntax errors.

Those gatekeepers are still around, but there’s much more now: command lines; configuring the computer with more complicated technology to get around files, folders, and FTP; new kinds of syntax errors. Tech bros. Smugness. Dismissiveness of anyone not white, male, and no more than 33 years old. A belief that technology must be complicated and hurt to work.

Also: “Really? You’ve never heard of XYZ technology?” Deliver this line with a slight air of smugness and superiority. Follow that with, “I’d be happy to sit down with you and walk you through it,” again delivered in a very slightly condescending way, implying that you cannot figure out this information on your own and thank goodness there’s someone to help you.

So, time for the guide to help the other guides. Let’s build a list of teaching tips.

(As always, my world is front-end web development. These are observations made after watching conference speakers and attending workshops in my field.)

The motivation for teaching is often to get attention or get famous, show off their personal skills, gain fortune, or to try to be an early dominator in some obscure technology or another.

Notice how not one of those reasons is to help other people.

In other words, these prospective teachers want to be the hero, not a guide.

A hero is Batman. A guide is Alfred.

Where would Batman be without Alfred? Luke without Yoda? Cinderella without her fairy godmother?

The hero is the student. The student is slaying the demon of ignorance.

Your role is to help them by providing them the sword. They will take the skills you teach and wield them on a chaotic universe.

Super proud of how my studio is coming along.

I never thought I’d have a home recording studio. Then there was a pandemic.

Where I’d been traveling to California to record LinkedIn Learning courses 3-4 times per year, recording 2-3 courses per trip, I was suddenly reduced to no travel.

I started recording at home, screencast recordings only, without me on camera. That’s when we thought maybe we’d be able to resume in-person recording in the fall.

Now we’re experimenting with on-camera recording. I know nothing about cameras, video, sound, lighting, or anything else in that realm. But now I have free consulting from some very talented LinkedIn Learning staff, who are able to recommend equipment, walk me through setting it up, and helping me look and sound the best I can.

I can’t imagine that we’ll be back to 100% on-site recording at LinkedIn when the pandemic is over. A home studio becomes an asset that I can use in many other ways going forward.

About the shelf

[The shelf] (https://www.wayfair.com/furniture/pdp/hashtag-home-dakota-geometric-bookcase-w001787825.html) has been so much fun to assemble. I bought it for this purpose, so it’s fun and different. It’s mounted on the wall with some brackets and a support board.

The items on the shelf are things from around the house, plus a few items I bought especially for this purpose.

Things bought specifically for the shelf:

• The light-up sign
• The bonsai tree light
• The music note "neon" (LED) sign
• Fake succulent plants!

Other shelf additions:

• My Shattuck Teaching Award from Harvard, and an Extension School glass
• A ceramic box from my maternal grandmother
• Hulk and Thor USB drives, and a tiny pottery teapot ornament
• Russian nesting dolls, brought home from the USSR by my paternal grandparents in the 80s
• DVD versions of some old Lynda.com courses
• Photo of my old German shepherds
• Copies of all three of my books with a very cool lava rock
• Pottery jug from North Carolina, bought while traveling with an old friend
• A ceramic box from my parents and a handblown glass vase from an old friend

Sidebar Preamble

My [current website] (https://www.jenkramer.org) is a total embarrassment.

I’ve needed to change it for years. In fact, it’s been on my whiteboard “things to do” for five years.

As I move into the world of no-code, I’m redesigning my site with many different no-code platforms. I’ll be trying out different platforms and putting together some kind of website over the next several weeks.

[Read more about the project] (https://learnnocode.dev/2020/12/23/redesigning-jenkramerorg-an.html)

Today’s Lovely Contestants

I’ve started with [Softr.io] (https://www.softr.io) and [Airtable] (https://www.airtable.com/) because I’ve heard a lot of buzz about Softr lately. As for Airtable, I already had a base available that I need to integrate into my site better.

Airtable base

Earlier this year, I created a [single video on Airtable for LinkedIn Learning] (https://www.linkedin.com/learning/no-code-solutions-for-websites-and-apps/organize-data-with-airtable). It’s a base of currently active video courses I’ve created for different publishers.

Base: Airtable’s word for “database.” I guess database is too scary.

The base, as it currently exists, is [public and available for viewing] (https://airtable.com/shrE6tr0nt0tPVhLi).

I have this integrated on my current website via iframe. Again, easy, low maintenance, but there’s more that can be done with Airtable.

Softr

Feels very much like Squarespace, but with fewer design features, less heavy lifting, and more integration with other tools.

There are a few templates to choose from, but these are just assemblages of blocks with a certain theme. These templates seem to drive content in the no-code space. Probably another topic for another rant sometime… this is not exclusively a Softr thing.

Choose from a series of “blocks” with fixed layouts to assemble the page. Populate with data. Limited ability for changes to colors, fonts, layouts.

The Big Reveal

[My Softr/Airtable website] (https://jen4web.softr.io)

Money spent: $0 (free version of Airtable, free version of Softr)

The state of jenkramer.org is pretty horrible.

I redesigned this site in 2014 using Bootstrap 3, LESS for styling, and PHP includes.

You might be wondering why I chose those technologies, of all of the technologies that were out there.

a. Keep in mind that while 2014 was only 7 years minus one week ago, the web has changed radically since then.

• The initial React release was in mid-2013. Angular was in 2016. We were in a period of "framework flavor of the month" at this point. Every conference seemed to have people desperate to dominate the next big thing in JavaScript. There were a lot of things coming out then.
• jQuery was still very much a thing in 2014. jQuery Mobile was starting to decline with the availability (and superior responsive design) of Bootstrap. jQuery UI wasn't responsive and was declining as well, plus Bootstrap had its own UI components.
• Bootstrap was a massive game-changer on the front-end. In 2014, people were only starting to transition to Flexbox for layouts from floats. People don't understand floats for layout. And people definitely don't understand CSS. Responsive design was still a mystery to many people, particularly how to code it by hand. And Bootstrap was HUGE in the bootcamps, which were thriving by this point. Indeed, that's often how CSS was taught: Here's Bootstrap. Use it.
• Grunt might have been a thing, with Gulp gaining traction. Webpack didn't exist. Node was out there, but only just getting started.
• This sounds like my web stories from 20 years ago. Keep in mind it's only been SEVEN YEARS.

b. Bootstrap only integrated with LESS at this point. Sass integration was coming, but not for a while.

c. OK, PHP includes were old, even then. But they are super easy to configure, and they gave me some simple moving parts for repeated content on the site to make maintenance easier. Technology doesn’t have to hurt to work, people.

d. It’s only a 10 page website. I wasn’t blogging. I wasn’t trying to sell anything. No one was maintaining the site but me. I could have installed WordPress, but then I’d have to maintain it. There wasn’t any real reason to build anything but a static site.

Redesign time

So why does one need to redesign?

• The technology driving the site is old and dated. It's too hard to maintain, or it's a security threat.
  Well... yeah, OK, Bootstrap 3 is old, and so are PHP includes. But nothing is a security threat here, and I don't mind writing HTML to update content. Basically, I'm "meh" on my tech stack, as long as the site is telling a good story. Honestly, I don't need to take hours to set up a development environment, or installing things, or figuring out why X in the stack isn't working. I don't have time for that. It's a simple website.
• The content is dated and needs revising.
  THIS is the reason the site needs a redesign. There's waaaaay too much blah blah on the site. Nothing is focused. It's all over the place, trying to be comprehensive. So time to focus the story.

Focusing the story

I have a lot of writing to do before I’m ready to redesign completely. Honestly, this is a separate post to explain what I’m doing and why.

But let’s just say it’s this, in a nutshell:

• Cut the blah blah in half, or three-quarters.
• More showing, less telling.
• Use Donald Miller's Storybrand principles to drive layout.
• Reframe the site to the customer as hero, rather than I'm the hero. (Also Donald Miller.)

The Plan

Since I’m pivoting to the no-code world (probably another story elsewhere), I’m going to try out a bunch of no-code tools to see what I can learn and create in those environments.

I’ll try creating something once a week as possible.

I’ll post the results here, along with a review.

These might not be the final versions of my site. Indeed, they’re probably not. But they’re a great way to try out the products, identify positives and negatives of each, and decide what I want to do going forward.

Code -> no code:

• Authenticated -> logged in
• Margin -> spacing outside
• Padding -> spacing inside
• Typography -> Fonts (use Word terminology)

It’s more than database -> collection/base/etc.

There’s a pile of 20-somethings building no-code tools without realizing that many of these problems have been solved before. We’ve all seen the movie already.

In 2005, we had a battle between WordPress and Joomla. WordPress won. They had a great user interface. They tested it carefully and made sure it was “intuitive.”

Today, no-code tools are “intuitive and easy to use” for the people who build them, or the people who are invested in learning them. They are not easy to pick up. User testing would show that these tools are still pretty uniformly horrible.

No-code isn’t getting rid of coding syntax, but keeping all of the names, labels, and requirements of coding.

You have to take it a step further. If I still have to know how to think about an application, how to build it, where the data is going, which box is the right one to apply the class, then you haven’t really solved my no-code problems.

Start with terminology. Stop thinking like a coder.

Setting Goals

For people who believe _____, who want ____, my work creates ______.

Seth Godin

Value Proposition

[company name] makes it easy for [target customer] to [thing that product does] so that [benefit of the product].

Tara Reed

Tools mentioned in a December 3 networking event…

www.glideapps.com

www.adalo.com

www.metaranx.com

webflow.com

carrd.co

bubble.io

airtable.com

coda.io

www.notion.so

zapier.com

www.softr.io + airtable

www.notion.so/Notion-Advent-Calendar-e159dcd0e70c4e919e278a2f95ec125d

www.mightynetworks.com

circle.so

Some products built with no-code (bubble mostly) www.getcuppa.io

beta.shoutout.so

nutriso.so

Gumroad for selling products gumroad.com

A look into how products are built sideprojectstack.com

www.sheet2site.com

pory.io

badunicorn.vc

[‘People rapidly create things, rapidly deploy things and rapidly regret things. Each subsequent generation of technology makes it easier to build bad solutions fast.'] (https://www.zdnet.com/article/as-low-code-and-no-code-approaches-rise-developers-brace-for-new-challenges/)

One of the things that bothers me about no-code approaches is [technical debt] (https://en.wikipedia.org/wiki/Technical_debt).

It’s 1996 in the No-Code Universe. As the web was in 1996, the No-Code Universe is at the phase where the tools are exploding, the money flows like kegs of beer at a frat party, and new companies are created, get bought, and go under every day.

We will come out with some winners, but as we should have learned from the web, there will be far more losers than winners. The consolidation will be significant. Your data will slosh around all over Silicon Valley, and you may not even realize it’s happening.

Be sure you know how to get your data out of a system before you commit your business to running on it as a platform.

[Spoiler alert: No.] (https://builtin.com/software-engineering-perspectives/no-code-replace-programmers?es_id=b1380061cf)

When I started working as web professional in 2000, there were no “tools.” You used a text editor or you used Macromedia Dreamweaver (current version: 3).

The #1 client request was to be able to edit their own website without having to go through their web designer. That’s because most web designers SUCKED. They were utterly incapable of answering or returning phone calls or emails. The common story was the designer sitting on the client request for weeks at a time.

Then in 2002, along came Macromedia Contribute. Designed to integrate with Dreamweaver templates, this simple(r) software let clients make their own updates to their websites.

Much handwringing ensued. OMG, there would soon be NO WORK for web designers!

Of course, nothing could have been further from the truth. There was plenty of work for web designers. However, if “work” meant fixing typos or updating copy, yeah, you did lose out on some of that. But there was still a ridiculous amount of work for those wanting to build new websites.

Fast forward to 2020. The latest round of no-code tools are allowing people to automate tasks, build forms, create their own simple websites, and integrate technologies without developers.

Much handwringing ensued. OMG, there would soon be NO WORK for programmers!

And just like before, nothing could be further from the truth.

a. Who codes the no-code tools?…

b. Who does one call when one pushes no-code to the limit, or wants that one feature that seems to be nowhere in the no-code space?

c. The power of creation from nothing will still lie with programmers. But the junk work of building yet another form that emails the contents to the owner, or writes it to some spreadsheet? That stuff is going to go away.

Trust me, you won’t miss it.

*Ones I know well: *

🔹 Squarespace

🔹 Wix (wizard version)

🔹 WordPress (.org, .com) (also debatable if this is no-code)

🔹 Webflow

Learning:

🔹 EditorX

Need to look into:

🔹 [Carrd] (https://carrd.co/)

🔹 [Softr] (https://www.softr.io/)

🔹 [Pory] (https://pory.io/)

🔹 [Dorik] (https://dorik.com/)

Several of these are Airtable integrators for web apps. Others are for single page sites.