I decided to learn full stack development using the fantastic I want to not just design, but completely build my own web apps. teamtreehouse.com. As part of the course there was the following bonus task: Hmm, 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. lorem ipsum The classic along with some fun variants: , and . lipsum.com Gangsta Lipsum Cupcake Ipsum 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, (for 1984-style websites), all in one? Trump lipsum 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. , a Roman-style font was perfect. The . It complements the Twitter-meets-Roman style of the app. Cinzel dove icon is from Noun Project Exploring the layout and visual direction in Sketch. The dominant colour is , 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. Tyrian purple 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 . 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?” Middleman 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 is so important. Without it you’re doing a lot of repetitive, manual work. Express.js The repository on Github. Building the site took 95% of time. Lots of reading, debugging and a ton of: Fast-forward later, and I have shipped . 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. 23 Git commits Twipsum Now, promoting it would be another blog post, but off to learning Express. The shipped Twipsum 🚀 if you want to hear about updates to or any of my future projects, and let me know what you think of the app. Follow me on Twitter Twipsum 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
