I decided to learn full stack development using the fantastic teamtreehouse.com. I want to not just design, but completely build my own web apps.
As part of the course there was the following bonus task:
Hmm, lorem ipsum generator. I’ve used those a lot when I was working in agencies. It’s placeholder text you use when you’re making websites the wrong way — by doing the design without the content. Thankfully, I don’t use lorem ipsum as much these days. When I do use it though, I appreciate the fun alternatives to plain ol’ vanilla latin.
The classic lipsum.com along with some fun variants: Gangsta Lipsum, Cupcake Ipsum and Hipster Lipsum.
One thing I never liked with these generators is that they don’t give you the content when you land on the page. To get to the screenshots above you first have to find the form where you can generate the lorem ipsum.
I don’t care about all these settings. Just give me the lorem ipsum!
The requirements for my lorem ipsum site would be for it to Just Work™. On top of that, I didn’t want to limit it to one theme. I wanted it to be flexible. Why not have a generator that can spit out gangsta lipsum, cupcake lipsum, hipster lipsum, Trump lipsum (for 1984-style websites), all in one?
And what lorem ipsum do I want most? One that sounds like me, or people that I know.
Nailing the idea
How can I make a flexible lorem ipsum generator that can mimic famous people and my friends? Would this be some AI product? I could scrape content from people’s social media, throw it at some machine learning code to generate the text? And then it hit me…
Why not just use people’s Twitter feeds directly without any fancy AI machine learning? It’s easy to build, and all the good content is already on Twitter.
What would I call this?
Twipsum!
Perfect. I have a neat idea, it’s doable, and I have a name for it. Let me just check that this doesn’t exist already.
“Sipmsons did it”
Of course! Someone had already thought of it 5 years ago. 😑
Turns out the guy sold it, and since then it disappeared of the net. I couldn’t even find screenshots of the UI anymore. Oh well. One man’s trash…
Turning idea into concept
An app this simple shouldn’t have more than one screen. I split the screen in two. One for input, the other output.
Sketch to refine the idea, and design a logo. For the visual style I wanted to honour the latin roots of lorem ipsum. Cinzel, a Roman-style font was perfect. The dove icon is from Noun Project. It complements the Twitter-meets-Roman style of the app.
Exploring the layout and visual direction in Sketch.
The dominant colour is Tyrian purple, which was a fancy-shmancy colour at the time (still is!) and lorem ipsum sounds like a fancy-shmancy design concept, so I was happy with how it all turned out.
Crunch time
Warning: Web dev geekery ahead!
It took me a little while to get my head around where to start with my Node.js project. I’ve been so used to building static sites using Middleman. I built the static HTML/CSS front end first. Opening localhost:3000, I’m like “why isn’t this showing up in my web browser?”
I built my very first web server. Sure, Node.js is there to do a lot of groundwork. But, you have to do all the routing, fetching, interacting with HTTP calls and so on. It made me understand the web better than ever. That’s when I also realised why Express.js is so important. Without it you’re doing a lot of repetitive, manual work.
Building the site took 95% of time. Lots of reading, debugging and a ton of:
Fast-forward 23 Git commits later, and I have shipped Twipsum. A responsive app hosted on Heroku, that talks to a REST API, routes traffic on the server, and hopefully puts a smile on someone’s face. Sure, a seasoned veteran could pump out something like this over a weekend, but you gotta start somewhere.
Now, promoting it would be another blog post, but off to learning Express.
The shipped Twipsum 🚀
Follow me on Twitter if you want to hear about updates to Twipsum or any of my future projects, and let me know what you think of the app.
Are you a Node.js veteran? Want to help out a newbie getting into the field? I’d love it if you could do a 5-minute code review of Twipsum here: https://github.com/damirkotoric/twipsum