<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>I Love Ramen Noodles</title>
    <description>I'm Gareth. I make things on the web. Sometimes I write here. 
</description>
    <link>http://www.iloveramennoodles.com/</link>
    <atom:link href="/feed.xml" rel="self" type="application/rss+xml"/>
    <pubDate>Fri, 10 Feb 2017 11:19:16 +0000</pubDate>
    <lastBuildDate>Fri, 10 Feb 2017 11:19:16 +0000</lastBuildDate>
    <generator>Jekyll v3.2.1</generator>
    
      <item>
        <title>Unsplash Instant for Safari</title>
        <description>&lt;p&gt;&lt;a href=&quot;https://unsplash.com/&quot;&gt;Unsplash&lt;/a&gt; is an amazing stock photo library. Hundreds and thousands of amazing quality photos. All free, even for commercial use.&lt;/p&gt;

&lt;p&gt;They have &lt;a href=&quot;https://instant.unsplash.com/&quot;&gt;an extension available for Chrome&lt;/a&gt; which displays a new image every time you open a new tab, but I use Safari most of the time and wanted something similar for that.&lt;/p&gt;

&lt;p&gt;So I made it!&lt;/p&gt;

&lt;p&gt;Set &lt;a href=&quot;http://www.iloveramennoodles.com/unsplash-instant-start-screen/&quot;&gt;Unsplash Instant for Safari&lt;/a&gt; as the &lt;a href=&quot;https://support.apple.com/kb/PH21487&quot;&gt;default page for new tabs in Safari&lt;/a&gt; and every time you open a new tab, you’ll be greeted with a gorgeous random full-screen image.&lt;/p&gt;

&lt;p&gt;And, of course, it’ll work in other browsers the Chrome extension won’t too.&lt;/p&gt;

</description>
        <pubDate>Fri, 10 Feb 2017 00:00:00 +0000</pubDate>
        <link>http://www.iloveramennoodles.com/blog/unsplash-instant-safari/</link>
        <guid isPermaLink="true">http://www.iloveramennoodles.com/blog/unsplash-instant-safari/</guid>
        
        
      </item>
    
      <item>
        <title>Presentation Timer &amp;mdash; countdown timer for conferences</title>
        <description>&lt;p&gt;I’ve completed the first stage of my first &lt;a href=&quot;/12-projects-in-12-months/&quot;&gt;12 projects in 12 months&lt;/a&gt; mini project: &lt;a href=&quot;http://www.presentation-timer.com/&quot;&gt;Presentation Timer&lt;/a&gt;, a countdown timer for conferences and presentations. It’s designed to provide a visual countdown for use at conferences, to help presenters stick to their allocated time when speaking.&lt;/p&gt;

&lt;p&gt;It’s quick and easy to use. Type in a time, hit start, and it counts down. When it gets to three minutes, the screen turns amber and starts flashing. Then, when the time’s up, it turns red.&lt;/p&gt;

&lt;p&gt;It’s quick because you can use your mouse or drive the whole timer from keyboard shortcuts. It’ll run full-screen in one click.&lt;/p&gt;

&lt;p&gt;And, of course, it all runs in a web browser; there’s nothing to install.&lt;/p&gt;

&lt;p&gt;I spent about three or four days writing this. As I write, it’s still only mid-January so if I get the chance there’s a couple more bits I might add before the end of the month, but they are not essential. This is a basic, working, minimal viable product, that people can use today.&lt;/p&gt;

&lt;p&gt;I didn’t want to use jQuery in this project. It’s all vanilla JavaScript. I’ve tested in Chrome, Safari and Edge and it works fine. The JavaScript is very simple in this case. There’s no point loading a huge library like jQuery if the only part of it I’d use are query selectors. You can do that directly in Javascript with &lt;code class=&quot;highlighter-rouge&quot;&gt;document.getElementById&lt;/code&gt; and &lt;code class=&quot;highlighter-rouge&quot;&gt;document.querySelector&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;I also used the excellent &lt;a href=&quot;https://codekitapp.com/&quot;&gt;CodeKit&lt;/a&gt; which is setup to check my JavaScript syntax for errors with &lt;a href=&quot;http://jshint.com/&quot;&gt;JSHint&lt;/a&gt;, minify the output, and also compress, run &lt;a href=&quot;http://blesscss.com/&quot;&gt;Bless&lt;/a&gt; and &lt;a href=&quot;https://github.com/postcss/autoprefixer&quot;&gt;AutoPrefixer&lt;/a&gt;, and compile my &lt;a href=&quot;http://stylus-lang.com/&quot;&gt;Stylus stylesheets&lt;/a&gt; to CSS.&lt;/p&gt;

&lt;p&gt;Keeping it simple is key, and something I must remember for my other projects!&lt;/p&gt;

&lt;h2 id=&quot;things-i-learnt-while-making-presentation-timer&quot;&gt;Things I learnt while making Presentation Timer&lt;/h2&gt;

&lt;p&gt;There are no productivity tricks or magic shortcuts to getting a project completed. You just have to sit down and put the hours into the work. Even getting a little bit done every day keeps building momentum and gets you to the finishing point.&lt;/p&gt;

&lt;p&gt;At some point you have to call it done. I could literally go on forever making tweaks, improvements, changes, some of which would be nice, others probably wouldn’t make a difference. But that means it’d never ship. That’s a habit I’m trying to build on in my &lt;a href=&quot;/12-projects-in-12-months/&quot;&gt;12-projects-in-12-months quest&lt;/a&gt; this year, so my ethos is very much: plan it, build it, ship it, iterate and improve it — but keep it simple.&lt;/p&gt;

&lt;p&gt;There are, I’m sure, bugs. But there is nothing that stops it working completely. As I use the software myself and find bugs, I can fix them while I go. No software is without bugs!&lt;/p&gt;

&lt;p&gt;It’s not fun to sit down and work. I love programming. I could happily loose hours and hours of my life just sat in-front of my laptop writing code. But getting that last 10% done so I can ship a finished version of the project is always a chore. It’s boring. It’s not fun. It’s work. I never want to do it. But the only way to get my projects shipped is to just sit down and do the work. It’s focusing on my longer-term goal of successfully shipping 12 projects this year, instead of my short-term impulse seeking desire to watch TV, listen to podcasts, and nap all afternoon instead.&lt;/p&gt;

&lt;h2 id=&quot;whats-bad-about-this-side-project&quot;&gt;What’s bad about this side project?&lt;/h2&gt;

&lt;p&gt;It has no source of revenue! Pure and simple, this won’t make money. It doesn’t really matter as my focus at the moment is just on building the habit of shipping and getting stuff done, but it’s something I will address later in the year. I’d love for my software to sustain my lifestyle.&lt;/p&gt;

&lt;h2 id=&quot;is-it-finished-yet-or-is-there-more-to-do&quot;&gt;Is it finished yet? Or is there more to do?&lt;/h2&gt;

&lt;p&gt;No, it’s not finished. Nothing is ever finished, just abandoned at some point!&lt;/p&gt;

&lt;p&gt;For example, I’d really like to add some kind of on-boarding or tutorial system like you see when you first play a game. To change the time you click on the number, and type. It’s really simple to use, but it’s not obvious. I’d like to make it easier for new people to understand this when they first see the software.&lt;/p&gt;

&lt;p&gt;I want to add a kind of pop-up message to the numbers when you first visit the website that points this out, so new users see this time saving technique instantly. But I’m shipping it without that as that is a few days work, and I want this to be up and running.&lt;/p&gt;

&lt;p&gt;It’s something I might come back to before the end of the month, but I have one other priority that is going to be my main focus for the next few weeks.&lt;/p&gt;

&lt;h2 id=&quot;marketing-i-need-people-to-use-it&quot;&gt;Marketing… I need people to use it!&lt;/h2&gt;

&lt;p&gt;There are two other parts to the 12-projects-in-12-months challenge that I want to learn from and grow: improving my marketing and writing skills.&lt;/p&gt;

&lt;p&gt;Now I’ve shipped a working version of Presentation Timer, I really want people to get on and start using it rather than immediately spending my time updating it and adding new features. I want to learn from people’s experiences, and add things that they’d use.&lt;/p&gt;

&lt;p&gt;Right now… I’m not quite sure what to do. I want people to use it, but I don’t want to start spamming everywhere with the URL. Any suggestions are welcome. I’ve got two weeks left of this month and I intend to spend most of them learning how to market a website effectively, to put those ideas into practice, and to build a check list I can use again and again with my other projects.&lt;/p&gt;

&lt;p&gt;I read about how Jack Canfield initially marketed Chicken Soup for the Soul once, which went on to make him bazillions of dollars. He’d try five different marketing techniques per day. I’m going to do something similar for this project; not five per day, but at least one.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://www.presentation-timer.com&quot;&gt;Give it a try&lt;/a&gt;, and let me know what you think.&lt;/p&gt;

</description>
        <pubDate>Sun, 15 Jan 2017 00:00:00 +0000</pubDate>
        <link>http://www.iloveramennoodles.com/blog/countdown-timer-for-presentations-conferences/</link>
        <guid isPermaLink="true">http://www.iloveramennoodles.com/blog/countdown-timer-for-presentations-conferences/</guid>
        
        
      </item>
    
      <item>
        <title>Flexbox Quick Reference Cheat Sheet</title>
        <description>&lt;p&gt;I use CSS's Flexbox all the time, but not enough to actually memorise all the options! 
I created this cheatsheet as a reference for myself to make it quick and easy to develop
flexbox layouts.&lt;/p&gt;

&lt;p&gt;CanIUse says this &lt;a href=&quot;http://caniuse.com/#search=flexbox&quot;&gt;modern syntax of Flexbox&lt;/a&gt;
has about 98% support in modern browsers, across Desktop and Mobile.&lt;/p&gt;



&lt;h2&gt;Terminology&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Flex container&lt;/strong&gt; &amp;mdash; the parent element&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Flex items&lt;/strong&gt; &amp;mdash; children elements, wrapped by the parent&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Main axis&lt;/strong&gt; &amp;mdash; horizontal axis, from left to right&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Cross axis&lt;/strong&gt; &amp;mdash; vertical axis, from top to bottom&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;Flex container options&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;display&lt;/strong&gt; &amp;mdash; &lt;em&gt;flex, inline-flex&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;flex-direction&lt;/strong&gt; &amp;mdash; &lt;em&gt;row, row-reverse, column, column-reverse&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;align-items (vertical alignment/stretching)&lt;/strong&gt; &amp;mdash; &lt;em&gt;stretch, flex-start, flex-end, center, baseline&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;justify-content (horizontal alignment)&lt;/strong&gt; &amp;mdash; &lt;em&gt;flex-start, flex-end, center, space-between, space-around&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;align-content&lt;/strong&gt; &amp;mdash; &lt;em&gt;stretch, flex-start, flex-end, center, space-between, space-around&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;flex-wrap (keep items on one line, or not?)&lt;/strong&gt; &amp;mdash; &lt;em&gt;nowrap, wrap, wrap-reverse&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;Flex item options&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;align-self&lt;/strong&gt; &amp;mdash; &lt;em&gt;(vals as per align-items)&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;flex (relative size of item)&lt;/strong&gt; &amp;mdash; &lt;em&gt;integer&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;order&lt;/strong&gt; &amp;mdash; &lt;em&gt;[integer]&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;!--
&lt;p&gt;&lt;strong&gt;Illustrated examples&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Header -- as per ILRN (space-between)&lt;/p&gt;
&lt;p&gt;Centre element in DIV&lt;/p&gt;
&lt;p&gt;Example page layouts&lt;/p&gt;
--&gt;</description>
        <pubDate>Fri, 13 Jan 2017 00:00:00 +0000</pubDate>
        <link>http://www.iloveramennoodles.com/blog/flexbox-cheat-sheet/</link>
        <guid isPermaLink="true">http://www.iloveramennoodles.com/blog/flexbox-cheat-sheet/</guid>
        
        
      </item>
    
      <item>
        <title>Chris Guillebeau's Side Hustle School</title>
        <description>&lt;p&gt;The best podcast I’ve discovered lately: Chris Guillebeau’s 7-episode-a-week &lt;a href=&quot;http://www.sidehustleschool.com&quot;&gt;Side Hustle School&lt;/a&gt;. Learn how to gain new skills, have fun, and make money.&lt;/p&gt;

</description>
        <pubDate>Tue, 10 Jan 2017 00:00:00 +0000</pubDate>
        <link>http://www.iloveramennoodles.com/blog/chris-guillebeau's-side-hustle-school/</link>
        <guid isPermaLink="true">http://www.iloveramennoodles.com/blog/chris-guillebeau's-side-hustle-school/</guid>
        
        
      </item>
    
      <item>
        <title>Welcome, again, to my blog</title>
        <description>&lt;p&gt;Welcome again. Yes, again. Last time I rebooted this blog it didn’t end up going anywhere. This year that’s going to be different.&lt;/p&gt;

&lt;p&gt;In 2017 I’m taking part in the &lt;a href=&quot;https://medium.com/1ppm/the-1ppm-challenge-eaed5df0ef5a&quot;&gt;One Project Per Month Challenge&lt;/a&gt;. Hat tip to &lt;a href=&quot;https://twitter.com/levelsio&quot;&gt;@levelsio&lt;/a&gt; who did this a few years ago and has become massivley successful as a result.&lt;/p&gt;

&lt;p&gt;I’ve got ideas for software, ebooks, tutorials, and videos to make this year. The skill I really want to work on is getting stuff done. I need to learn to ship stuff, and iterate continuously. My life has ground to a halt for years now because I’m just treading water. I hope this project will help me to kick those bad habits.&lt;/p&gt;

&lt;p&gt;I also want to improve my writing. I’m not a good writer! I always remember really struggling in school to write anything over 300 or 400 words long. I don’t know why. I think I just need practice. So I hope shipping products and blogging about them here will help me have a better year in 2017 than I have had recently.&lt;/p&gt;

&lt;p&gt;I want to make money too, of course. I have a figure in mind that would support what I need to make. But it’s not my main focus at the moment, so I’m currently completely ignoring it. I have a decent income from consulting. I can live off that this year, then slowly dial that back and live off my product income, once I am in the habit of shipping products and can create something good that solves a painful enough problem that people will pay me for it.&lt;/p&gt;

&lt;p&gt;My first product is a &lt;a href=&quot;http://www.presentation-timer.com&quot;&gt;countdown timer for people giving presentations&lt;/a&gt;. It’s simple, it’s not ground breaking, just an idea I have that I want to do. Seems like a good one for my first project.&lt;/p&gt;

</description>
        <pubDate>Sun, 01 Jan 2017 00:00:00 +0000</pubDate>
        <link>http://www.iloveramennoodles.com/blog/hello/</link>
        <guid isPermaLink="true">http://www.iloveramennoodles.com/blog/hello/</guid>
        
        
      </item>
    
  </channel>
</rss>
