A Journey Through Code to Why No-Code
Finally, finding the visual development tools, I always wanted.
The Backstory
I’ll keep this short, but knowing a little of my backstory helps to understand why the no-code revolution appeals to me, and why I’m devoting my time to building and sharing.
I first started working with no-code tools in the early ’90s, when cassettes were still a thing and long before the term no-code. I began with FileMaker Pro, a visual database development tool by Claris, an Apple Inc subsidiary. I built visual databases and consulted for small companies.
In 1999 I started teaching myself HTML and began building websites that led me to a ten-year career as a webmaster, 9 of those at the University of Central Florida.
I wanted to build things 100% visually, but the tools weren’t there yet.
During this same period, I was a budding photographer and eventually started and ran my portrait and wedding photography business on the side for seven years.
While I enjoyed web development challenges, I never liked the coding or server management part of it. I’m more visual-minded, and early visual web development tools such as Dreamweaver were not the best. I wanted to build things 100% visually, but the tools weren’t there yet.
Relocating to Japan
In 2009 my family and I relocated to Japan. I took a step away from web development and worked as a full-time photographer until 2016. You can view some of the work I created during this time here on my photography site. I then moved into my current job as a digital marketing manager, which immediately reignited my technology passion.
Fortunately for me, the world of app and web development has changed significantly in the last ten years.
Discovering #NoCode
Late last year, I discovered AirTable, then Notion and Coda, the pandemic hit, and I found myself spending far more time at home. Like any technology nerd, I spent all my quarantine time watching YouTube videos and learning about new tech. 😂 Then, I logged onto my Twitter account that I had neglected for years (I spend my life on Facebook at work, so I didn’t want to be there) and discovered #NoCode.
Like any technology nerd, I spent all my quarantine time watching YouTube videos and learning about new tech. 😂
At first, I was admittedly skeptical, thinking of tools like Dreamweaver or other clunky visual app and web development tools. As I traveled down the #NoCode rabbit hole, my initial skepticism began to wane, and my excitement began to rise.
Professional-level tools like Bubble and Webflow have revolutionized what visual development can be. I was blown away. I then discovered an entire community of no-coders and incredible tools such as Carrd, Dorik, Softr, Pory, Tabel2Site, SpreadSimple, and many others. These tools allow anyone to build apps, landing pages, and complex websites without writing code.
It’s like a virtual candy store. The amount and quality of no-code/visual development tools available today are incredible and growing daily.
The visual development world I had dreamed of was finally real. It’s like a virtual candy store. The amount and quality of no-code/visual development tools available today are incredible and growing daily.
In late May or early June 2020, I met Max Haining on Twitter from the #100DaysOfNoCode Challenge, where people dedicate themselves to learning and building every day for 100 days with no-code tools and posting their daily progress on Twitter. I was intrigued, and Max kept encouraging me to join.
I decided just to do it, to join the 100DaysOfNoCode challenge, and start learning all the excellent no-code tools.
Why No-Code
The community is a small group, but there are new no-code tools and resources available every day, and keeping up with everything can be a challenge.
Photo by freestocks on Unsplash
When you first discover no-code/visual development, Information overload is a real thing.
When you first discover no-code/visual development, Information overload is a real thing. The smart thing is to choose one no-code tool and get really good with that tool. I found this easier said than done with so much available to choose from.
When I joined the LaunchMBA.co group end of July 2020 and committed to building and launching twelve products over the next twelve months, I knew I had to settle down and focus. The question was, what should I make first?
Knowing about the information overload for newbies in the no-code space and my need to have a “real” project to learn on, I decided to build a website about the no-code space.
I choose whynocode.com because of the confusion about what no-code is, and because nocode.com was already taken. 😂
I choose whynocode.com because of the confusion about what no-code is, and because nocode.com was already taken. 😂
The term no-code can be a little polarizing to some. Developers are annoyed by the term, and some think no-code means no work. I decided to build a website to answer the following questions about no-code;
What is no-code?
Why should you care?
Where can you learn more about no-code?
What can you do with no-code tools?
When I build something, it’s 80% inspiration and 20% perspiration. No inspiration equals no motivation, which leads to procrastination.
When I build something, it’s 80% inspiration and 20% perspiration. No inspiration equals no motivation which leads to procrastination. So, when I create anything, I do the following;
Buy the domain name. I know this is frown upon as a starting point, but the domain name is a guidepost to what I’m building. The domain name is the simplest way to explain the project. IMHO. I always look to the domain name to focus my efforts. The downside to this being first, however, is if I can’t get a domain that I like and inspires me, I’ll put off or never do the project. That’s not good.
Create social media channels. I don’t think every site requires this step. It depends on the type of site and how you plan to promote and engage with users or customers. Since whynocode.com is not about me, I wanted it to have its own social media presence. The downside is that I have to keep up with more social media channels now.
Research the subject and other similar apps or websites. I take note of how they are designed, what information they provide, and similarities among them.
Pick a design/development tool. I spend time looking at design templates looking for inspiration and ideas for how the content flow should work. Tools are always a source of inspiration for me. The hardware, software, cameras, and any other tool needs to inspire me in some way. I even get inspiration from well-made pens and pencils. Japan is famous for this. Great design inspires me to create, period.
Sketch out design ideas. At this point, I usually will sketch design ideas on paper, especially for mobile apps. In the case of whynocode.com, I skipped this step and ended up designing the site three times. 😂 I got excited playing with the tools and dove in. Note: While diving right in may not the optimal way to create or develop, it can be a fun way to learn new tools. You just need to be ok with a lot of redos.😂
Share the first draft for feedback. I shared my first draft of whynocode.com with Max Haining @hainingmax from 100DaysOfNoCode, Mark Bowley @markbowley from Tiny Design Lessons, and a few other people. The feedback I received was incredibly valuable and convinced me to do almost a complete redesign.
Make changes based on feedback.
The First Draft
Behind the scenes, whynocode.com started as a very different website. The human eye is attracted to colors and the brightest parts of a photo first. This is why it’s easier to learn composition shooting in black and white. I loved the illustrations from Blush Design, but the colors and illustrations were guiding the site, rather than the content.
I originally designed the site using Carrd but was inspired by the templates I found at Dorik, so I choose them in the end. The final site still had the illustrations that inspired me, but they were toned down and sized down a bit to not steal the show from the content.
I designed the logo in Photoshop and incorporated the comment hiding code elements <!- -> as a pun. :)
Here is a link to the original design you see below. https://whynocode.carrd.co/
The Launch
I created a Twitter channel @whynocode and used the graphic below as the header. The graphic was created using Canva, except it said coming August 2020 below “Launch Your Idea.”
When I was ready to launch, I changed the header to the one above and posted an animated version as a launch post and pinned it to the top of the feed. See below. I did this using Canva as well.
Lessons Learned
Below are a few things I learned during the process of making whynocode.com;
Do more research than you think you need.
Write out your copy before you start designing. This is something I knew but ignored, and it cost me time. I still think the copy is the weakest part of the site and something I’m working on.
If you are using embeds (embedding content from other websites), check how they work on mobile. The current Pory embeds I’m using need to be tweaked. It’s hard to separate between the main content and the embed when scrolling with your fingers on a phone. The embed from Paper in the news section works much better. I think Pory is working on this, however.
Too many embeds on the same page can slow the page loads down. Dorik is releasing multipage soon, so this will enable me to relocate the embedded sections onto their own page.
I hope this information is of value to someone out there. This issue of One to Better was probably longer than usual because I had already finished the project. Future content will be more focused and based on what I’m working on that week.
One to Better is my first newsletter, and I would love your feedback.
If you read this far, thank you so much. Your time is valuable, and I’m grateful.
Until next week, stay safe and have a great week. If you enjoyed this content, feel free to buy me a coffee.
Thomas