Wunderlist is amazing – here’s why

Wunderlist

There are about a million to-do lists out there claiming they are capable of managing your crazily congested life.

In fact. There’s just too many to name in one post.

One of the first projects you are taught to make as a JavaScript developer in 2017 is the legendary “to-do app”.

However too many developers have done this and added too many features that make them bloated. Sometimes making your life too complicated.

My choice of to-do app is Wunderlist and here’s 10 reasons why:

  1. Everywhere – If your todo list is not accessible you won’t use it. No matter where I turn, my Wunderlist is there. I can access it on the Web, on Mac OS X, on all my mobile devices (see below), on Linux, and even Windows.
  2. Simple – Ever use a todo app that looks like the control panel to the Space Shuttle? So many options, buttons, and fields that it is a burden to use? Wunderlist presents a simple interface. In fact, some may find it too simple. Yet, behind that simple appearance is quite a bit of power. Most of the options stay out-of-the-way until you need them. (BTW, do you really need to set the “context” for each todo and the “colour” of each task?)
  3. Push Reminders – On my iPhone, I can set reminders for tasks that I want to recall at specific times. They can be either email notifications or push notifications. I prefer the push notifications because they appear in my iPhone’s notification center.
  4. Share – Want to share a list with someone else? Wunderlist can do that in one click. You can share via email and let a family member or friend edit the list too. You can also share lists via email or via the CloudApp.
  5. Sync – Wunderlist syncs magically via the cloud. There is no effort required to keep your lists in sync across all your platforms and devices. More apps are finally getting sync, but Wunderlist has had this right from the start.
  6. Priorities – Wunderlist has a simple priority system. You won’t find A, B, C’s or 1, 2, 3’s, but rather a simple Star system. When you “star” an item, it shows up in your Starred list (as well as its original list). I use this “hit list” prioritisation to make my Today List of my highest priority tasks that must be done today.
  7. Multiple Lists – Wunderlist allows you to have as many lists are you would like. For those that like to sub-sort tasks into many different buckets, you can do this. I tend to minimise the number of lists of I have. However, I can quickly create a list if I have need to capture something. Of course, all these lists are tied together by the “Starred Priority.”
  8. Notes – Need to add more detail or important info to a todo? You can add a note to any todo. I will sometimes “paste” supporting information or even a URL into the notes field.
  9. Mobile – It doesn’t matter what mobile device you are on, Wunderlist presents a great user experience. Unlike apps that are limited to one mobile device, Wunderlist is available on: iPhone, iPad, Blackberry, Android, and even Windows Phone. Not that you would ever need all of those.
  10. Quick – I like to be able to capture ideas and tasks quickly. Otherwise, they can be lost. With Wunderlist, I can open the app, type a todo and hit return. Done. There is no setting of 17 fields just to record a todo. (See #2) I don’t even have to go to the app. I can email myself a todo at me@wunderlist.com and the task is added to my inbox.

So do yourself a favour (seriously) and pick up Wunderlist for free. It is by far my favourite app right now and will no doubt keep its spot as my number one to-do app for a long time to come!

HTML & CSS Basics #1 – What is HTML?

So you’ve been dying to build a website for that amazing idea you had whilst sitting on the loo at your current job. You know some people that do this for a living but what you really want to do is make the whole thing yourself. Great. There’s just a few things you need to know before you get started.

You’ve heard people throwing around terms like ‘HTML’ and ‘CSS’, but you haven’t got a clue what these things are and how they are used together to build websites. Well lets begin with a brief history and description of what these two things are and what they do.

– HTML or Hypertext Markup Language is basically a long way of saying code that represents our website’s content.

Lets start with the word Hypertext. The web is built on a thing called the Hypertext Transfer protocol or ‘http’. Yeah that thing you see before the www. In your address bar. All http means I’m using the Hypertext transfer protocol to grab data from this address. I’m using http:// to get data from www.saganic.co.uk

So now we understand http is just a way of transmitting data, HTML is the Hypertext data itself.

Easy.

So what does HTML look like? Well something like this:

<h1> My Website </h1>

My Website

So now we’re starting to see what the markup language looks like. We see some open and close carrots a slash and a weird ‘h1’ thing wrapping the text ‘My Website’.

<h1> is an HTML tag. The <h1> denotes the beginning of a tag and the </h1> denotes the end of the tag.

This particular tag, h1, is a tag used for headings on websites, hence the ‘h’ . The ‘1’ represents of type 1, the largest or most important heading, a main heading.

<h2> is a subheading, <h3> a sub-subheading and even <h4> a sub-sub-subheading.

So what are some other types of HTML tags? Well there’s the <p> tag which represents paragraphs on our website. There are <a> tags which represent links or ‘anchors’ on our site. Let’s try using these below:

<h1> My Website </h1>

<p>Welcome to my website, feel free to look around. </p>

<a href=”facebook.com/saganic”>Link to my Facebook Page</a>

My Website

Welcome to my website, feel free to look around.

Link to my Facebook Page

So here we can see the <p> and the <a> tags used in context. But what is the href=”” part of the <a> tag? We haven’t seen this yet using heading or paragraph tags but this part is known as a property. The href of the <a> tag is the Hypertext reference, ‘href’ for short. Get it now? Within the href=” ” we enter the address for where we want people to go when they click on the link.

In the example above, the link takes us to facebook.com/saganic

When someone clicks on Link to my Facebook Page they will be taken there.

Finally, how do we use HTML? Well we can use something like notepad on Windows or Textedit on Mac to save our files as .html files, these applications are designed to edit plain or rich text usually, but they can also save as .html format. Try writing your own basic page with an h1, p and a tag and let me know how it goes.

This concludes part one of the HTML & CSS basics series. Keep a lookout for part 2, ‘What is CSS?’ next time, when we will learn what makes our HTML look pretty.

10 Reasons Why I Love Brackets.io

Brackets.io

Brackets is a modern, open-source code editor for HTML, CSS and JavaScript that’s built in HTML, CSS and JavaScript. I have been using Brackets since I began serious Web Design back in 2012 and since then it has come on leaps and bounds. I used to use code editors like Sublime Text, but these editors are bloated in the sense that they did more than what I needed them to do.

So why the switch to Brackets from Sublime? Well, the bulk of my work was taking designs made in Photoshop, Illustrator and other graphic design packages and converting them into real, functioning HTML & CSS. Some would call this ‘Front-end development.’ Brackets enables people in this sector to work with tools they find familiar, code hinting in a design-centric & visual way, allowing people like us to move much more efficiently and view our changes more rapidly, if not live, as we make them.

So without further ado, here’s 10 things I LOVE about Brackets.io.

  1. Brackets is lightweight and superfast

    Brackets 1

    When you launch Brackets, it takes very little time to load, ready for your input. This is because it is built in HTML, CSS and JavaScript, languages native to the web. This enables Brackets to launch almost instantly, requiring no real dependencies. We’ve all run into situations where we have required the latest .NET framework update or C++ distribution. Brackets does not need any of this, allowing users to get into development very quickly.

  2. Brackets isn’t feature bloated (unless you want it to be)

    Brackets 2

    Brackets is designed to be as clean as possible when you first download it. There’s syntax highlighting for HTML, CSS and JavaScript/jQuery, but nothing else. No libraries for highlighting native languages and no highlighting for server-side languages like PHP or Python. This doesn’t mean you can’t get syntax highlighting for these languages. Brackets has a built in Extension Database, where you can search for useful extensions and modules, allowing you to build on the initially lightweight application.

  3. Brackets supports live preview

    Brackets 3

    This is without a doubt one of the most useful things for a Front-end developer. Brackets allows you to see your changes in real-time, without you having to refresh your page every time or set up a local server. Brackets comes with a built in node.js server that runs on localhost, enabling this feature and requires one click to open the live preview for your project.

  4. Brackets supports CSS preprocessors

    We all know how important preprocessors are to our workflow. With Brackets you can use Quick Edit and Live Highlight with your LESS and SCSS files which will make working with them easier than ever.

  5. Brackets is highly customisable

    Brackets 4

    As previously mentioned, there is a built in Extension database that allows you to extend the features of Brackets. And as Brackets is built in HTML and CSS, you can install themes easily and even make your own!

  6. Brackets has inline visual tools

    Brackets 5

    Sometimes, we forget that hex value, or we just want to find a new colour, inside our code editor. Brackets allows us to do this and more by giving us inline visual tools like a Hex Colour Picker, or an Animation Curve Editor. These tools can be invaluable for those times when you’re tweaking a design to get something just right for the web.

  7. Brackets’ file browser is A-W-E-S-O-M-E

    Brackets 6

    Back in the days of Dreamweaver we used to use the operating system’s built in file browser to open our projects. This was long and often presented us with a file rather than a folder (what a pain)! In Brackets, we have a sidebar containing our project hierarchy. A quick glance and you can see the location of that rogue .js or .css file. Brackets also supports drag-and-drop for folders and files, allowing us to quickly open up our project from our operating system. Nice.

  8. JSLint

    Brackets 7

    Among other features is a JavaScript code check, which will run through your JavaScript file and check for any errors. This comes in handy for making sure your syntax is correct and telling you any errors without having to manually check them in the browser. Combined with the Minify extension, we have a powerful way to check for errors and enhance the speed of our JavaScript, right within our code editor!

  9. Run anywhere!

    Brackets 8

    Another incredible benefit to developing with open web standards like HTML, CSS and JavaScript, is Brackets has the potential to run nearly everywhere. While the team are focused on the macOS, Windows and Linux desktop at the moment, they hope to supplement that version with a version of Brackets that can run exclusively in your browser. They also have a few ideas about how Brackets might be able to turn your tablet into your development environment. Brackets could even be embedded in your existing web applications. With a little help, all these versions could be developed in parallel. The possibilities are wide open.

  10. PSD code hinting

    Brackets supports a feature called “PSD lens” which helps to smoothly extract each of pictures, logos and design styles from PSD file without opening Photoshop to check for them. By calling this feature a preview, Adobe conveys that there is much work ahead before this feature can be perfected. This feature brought in positive reviews from developers but many issues were reported during the initial stages of the feature release. However I look forward to trying the new version very soon.

 

So there’s 10 reasons why I use Brackets. I recommend all budding Front-end developers give Brackets a try. If you don’t like Brackets, feel free to leave a comment below with your reasons why. What code editor do you use and why does it enhance your workflow?

The Downfall of Kodak & the Rise of the ‘Selfie’

Kodak vs Instagram

Kodak vs Instagram

 

Have you ever looked at yourself in the mirror and thought, ‘Yeah, I’m killing it today’?

Well, you wouldn’t be the only one. According to the data representation site infogr.am, 1 million selfies are taken globally each day by 18 to 24 year olds and over 58 million photos have been posted with the hashtag #selfie on Instagram. But when did this selfie revolution begin? And why do we take so many selfies? The answer may be more complicated than you think.

A picture, they say, is worth a thousand words. And if the people of Rochester, USA knew the value of anything, it was that of a picture. As the global headquarters of the Eastman Kodak Corporation, pictures were to Rochester what cars once were to Detroit or what the Internet is today to Silicon Valley. Known as “the World’s Image Center” and “Snapshot City,” Rochester had built its prosperity on the many millions of “Kodak moments” captured by all of us over the last 125 years. “You press the button, we do the rest,” Kodak’s founder, George Eastman, promised when he introduced his first handheld camera in 1888. And that’s exactly what we all did throughout the industrial age—press the button on our Kodak cameras and rely on high quality Kodak film and Kodak imaging and processing services to do the rest. We paid for all this, of course—exchanging cash for the developed photographs that then became our property. And so for more than a century, millions of Kodak moments had made Rochester wealthy and famous. But now a darker kind of Kodak moment had transformed Rochester from the World’s Image Center into a picture of failure.

Kodak’s control of the global picture business had enriched the city with the brightest colors of all: a thriving local economy and tens of thousands of well-paying jobs. We haven’t stopped taking pictures. The problem is actually the reverse. We took 350 billion snaps in 2011 and an astonishing 1.5 trillion in 2013—more than all the photos ever taken before in all of history. “Pictures are more sexy than words,” explains Joshua Chuang, the curator at the University of Arizona’s Center for Creative Photography. “I snap therefore I am,”  adds the Wall Street Journal’s Ellen Gamerman, about a culture in which we are using our camera phones so obsessively that if just the 125 billion photos captured in the United States in 2013 were turned into four-by-six prints, they would extend to the moon and back twenty-five times.

The saddest thing of all about Rochester is that the more photos we take, the fewer jobs there are in Snap City. In the 1990s, Kodak controlled 90% of the film sales and 85% of the camera sales in the United States.  Twenty-five years later, Kodak halted the manufacture of its Kodachrome film, ending a seventy-four-year history of production. And in September 2013, a few months before my arrival in Rochester, an emaciated Kodak emerged from Chapter 11 bankruptcy having sold the vast majority of its assets and laid off most of its employees.

So what happened? It begins with a story about one wannabee Silicon Valley entrepreneur. 

In the summer of 2010, Kevin Systrom, a Silicon Valley entrepreneur, took a trip with his  girlfriend to Mexico. Despite graduating from Stanford with an engineering degree and having worked at Google for three years, the 27 year old considered himself a failure. Kevin had moved to Silicon Valley to, as he so bluntly put it ‘get rich really quickly’. But he’d yet to make the kind of money that Zuckerburg had made from Facebook or that Larry Page or Sergey Brin had made from Google.

Systrom had missed two opportunities to develop photo sharing systems for the, at the time, startup ‘TheFacebook’ and Odeo, the San Francisco-based startup that would eventually hatch into Twitter. He had a startup called Burbn, an online check-in service backed by Andreessen Horowitz, a private American venture capital firm. But there was little about Burbn in the summer of 2010 that distinguished it from market leaders like Foursquare.  Systrom’s pivot was to reinvent Burbn as a social photography-sharing app—a kind of Flickr meets Foursquare meets Facebook app designed exclusively for mobile devices. And it was on a Mexican beach in the summer of 2010 that he made his great breakthrough. Systrom decided to share his new idea with his girlfriend on a summer’s evening on a beach in Mexico. As they walked hand in hand together beside the Pacific Ocean, Systrom began pitching her on the idea of a social network built around photographs taken from smartphone cameras. But she pushed back, saying that she didn’t have sufficient faith in her creative skills to share her mobile photos with friends. It was then that he had his ‘aha’ moment, the kind of alchemic epiphany that transformed a serial failure who’d missed two great opportunities at Facebook and Twitter into the next Zuckerburg.

What if the app featured filters? he thought. What if  it enabled users to create warm and fuzzy photos, the sort of photos that appeared retro and more analogue than the photographs that had been taken on smartphones up until that point? And what if this personalized technology was engineered to operate so intimately on mobile devices that users not only intuitively trusted the social app but also believed that they somehow owned it? And so Instagram and its photos—what Systrom, shamelessly appropriating Kodak’s phrase, calls “Instagram moments”—were born. With fuzzily named filters like X-Pro II, Hefe, and Toaster, this free mobile network became an instant viral hit. The scale and speed of its success was astonishing. Twenty-five thousand iPhone users downloaded the app when it launched on October 6, 2010. A month later, Systrom’s startup had a million members. By early 2012, as the writing on the Eastman House wall reminds us, it had 14 million users and hosted a billion Instagram moments.

And like Eastman’s late-nineteenth-century startup, Kodak,  Systrom’s early-twenty-first-century photo network has imprinted itself on our everyday lives. The Instagram moment has replaced the Kodak moment. Not a bad return-on-investment from a day spent swinging in a hammock on a Mexican beach. But the benefits of Instagram for the rest of us are about as foggy as one of Instagram’s Hefe or Toaster filters. “Instagram is focused on capturing the world’s moments,” Systrom likes to say. But that’s a fiction—just like Instagram itself. In contrast with Kodachrome, a film stock dedicated to sharp-detailed, grain-free images, Instagram’s value is its graininess—designed, as the New York Times’ Alex Williams explains, to make “everyone look a little younger, a bit prettier, more cover-worthy.”

Whoever first said that “the camera never lies” had obviously never used Instagram. If Kodachrome was designed as an unsparingly honest window, then Instagram is its reverse, a complimentary mirror “where,” as Sarah Nicole Prickett, writing in the New York Times, observes, “the grass looks greener.” That’s its greatest seduction. So rather than accurately capturing the world’s moments in all their colorful complexity, Instagram —“the highest achievement in Internet voyeurism,” according to Alex Williams, and “the app built to make you covet your neighbor’s life,” as Prickett puts it—is actually creating what Williams, citing the title of a 1959 work by Norman Mailer, calls “Advertisements for Myself.” Social networks like Instagram can’t, of course, be entirely blamed for this epidemic of narcissism and voyeurism now afflicting our culture. As the work of prominent American psychologists like Jean Twenge, Keith Campbell, and Elias Aboujaoude indicates, our contemporary obsession with public self-expression has complex cultural, technological, and psychological origins that can’t be exclusively traced to the digital revolution.

Nor is Instagram alone in crossing this narcissism line. There’s also Twitter and Tumblr and Facebook and the rest of a seemingly endless mirrored hall of social networks, apps, and platforms stoking our selfie-centered delusions. Indeed, in an economy driven by innovator’s disasters, new social apps such as WhatsApp, WeChat, and Snapchat—a photo-sharing site that, in November 2013, turned down an all-cash acquisition offer of more than $3 billion from Facebook—are already challenging Instagram’s dominance. For us, however, Instagram—whether or not it remains the “second plotline” of the networked generation—is a useful symbol of everything that has gone wrong with our digital culture over the last quarter of a century. “I update, therefore I am,” I once wrote, half jokingly, about the existential dilemma created by our obsession with social media. And yet, for all its sad narcissistic inanity and even sadder existential angst, it would be a mistake to see Instagram’s problems in primarily cultural terms. Selfie culture is a big enough lie, but it’s actually billions of dollars and hundreds of thousands of jobs less dishonest than the economics of selfie culture. And it’s here—in the realm of jobs, wages, and profit—that we can find the most disturbing implications of the shift from the Kodak to the Instagram moment.

Instagram had just thirteen full-time employees when Facebook paid a billion dollars for the startup. Meanwhile,  Kodak was closing 13 factories and 130 photo labs and laying off 47,000 workers. And these thousands of Kodak employees weren’t the only professional victims of selfie economics. Professional photographers have been badly hit, too. Between 2000 and 2012, the number of professional photographers, artists, and photographers working on American newspapers fell from 6.171 to 3,493—a 43% drop at a time when pictures have become “more sexy” than words and we are taking trillions of photos a year.

So who, exactly, is doing the work, providing all the labor, in a billion-dollar startup that employed only thirteen people? We are. All 150 million of us are members of the new Snap Nation. Kevin Systrom’s creation is the quintessential data factory of our new digital economy. In contrast with the old industrial factory—that former skyscraper, on the corner of Factory and State in downtown Rochester—these twenty-first-century factories are as ubiquitous as selfies, existing wherever there is a networked device. You may be reading this on one right now. You almost certainly have one in your pocket or on your desk. And it’s our labor on these little devices—our incessant tweeting, posting, searching, updating, reviewing, commenting, and snapping—that is creating all the value in the networked economy.

So next time you take a selfie, think twice about the jobs you could be destroying.

 

 

 

 

Sources:

Neate, “Kodak Falls in the Creative Destruction of the Digital Age.”

“The Last Kodak Moment?,” Economist, January 14, 2012. economist.com/node/21542796/print.

Jason Farago, “Our Kodak Moments—and Creativity—Are Gone,” Guardian, August 23, 2013, theguardian.com/commentisfree/2013/aug/23/photography-photography.

Charles Blow, “The Self(ie) Generation,” New York Times, March 7, 2014.

James Franco, “The Meanings of the Selfie,” New York Times, December 26, 2013, nytimes.com/2013/12/29/arts/themeaning-of-the-selfie.html.

Sophie Heawood, “The Selfies at Funerals Tumblr Tells Us a Lot About Death,” Vice.com, November 1, 2013.

Stacy Lambe, “14 Grindr Profile Pics Taken at the Holocaust Memorial,” Buzzfeed, January 31, 2013.

Craig Detweiler, “‘Auschwitz Selfies’ and Crying into the Digital Wilderness,” CNN, July 22, 2014.

Stuart Heritage, “Selfies of 2013—the Best, Worst and Most Revealing,” Guardian, December 22, 2013.

Rachel Maresca, “James Franco Allegedly Attempts to Meet Up with 17-Year-Old Girl via Instagram: Report,” New York Daily News, April 3, 2014.

“Selfie Is Oxford Dictionaries’ Word of the Year,” Guardian, November 18, 2013, theguardian.com/books/2013/nov/19/selfie-word-of-the-year-oed-olinguito-twerk/print.

This number is from the research advisory firm mobileYouth. See Olson, “Teenagers Say Goodbye to Facebook and Hello to Messenger Apps.” Interestingly, the mobileYouth research shows that the proportion of selfies on Snapchat is even higher than 50%.

Steven Johnson is perhaps the most relentlessly optimistic of Web believers. See, for example, his latest book: Future Perfect: The Case for Progress in a Networked Age (New York: Riverhead, 2012).

Tom Standage, Writing on the Wall: Social Media—The First 2,000 Years (New York: Bloomsbury, 2013).

Williams, “The Agony of Instagram.”

Rhiannon Lucy Coslett and Holly Baxter, “Smug Shots and Selfies: The Rise of Internet Self-Obsession,” Guardian, December 6, 2013.

The Problem with Squarespace

The Problem with Squarespace

And why you should avoid DIY website builders.

Choosing an ‘easy’ DIY website builder may be appealing. The marketing for these builders often promise that it’s so easy and so quick to accomplish what may take an independent developer weeks, or perhaps even months. “Anyone can make a professional website in minutes!” they say, “drag and drop your way to an online presence” they say. However, to get the website to look decent, these small business owners and young entrepreneurs begin to invest a lot of their time in figuring out how to use said website builder. How can I change the font of my heading? How do I resize my image for my homepage? How do I set up the blog? These are questions that you as a small business owner should not be worrying about. You should instead be concerned with campaigns to induce growth and revenue for the market YOU know.

It’s not even these small extra things that are the main concern. It is these PLUS the time spent fixing things when they don’t look quite right, its the time spent training someone else to make updates to your website when you finally throw in the towel and cannot face looking at that sub-optimal GUI (graphical user interface) any longer!

What it truly comes down to is the cost of your time.

 

Extortionate Prices of Wix

 

However, time is not all you will be spending with these website builders.  It also comes down to cost of premium features. This is an important point. You will need to factor into your research how much  you will actually save by using a site builder.

Once you begin, you will find that using a DIY site builder will cost more than just your time. In some cases, the cost of a DIY site builder could amount to more than you would have spent on a web developer in the first place and over time this is inevitable due to the on-going costs DIY site builders incur.

Take Weebly for example, they offer the comprehensive business package for £19.61 a month, so £202.82 a year. That’s £202.82 every year- for a site you have built yourself… After a few years, you will probably be cursing the fact you didn’t just hire a developer in the first place.

Or take Wix as another example, to use a custom domain name (yourwebsite.com) you need to spend £7.67 per month, this package does give you unlimited ‘bandwidth’ though, unlike some of the other packages they offer. I will get down to the problem with ‘bandwidth’ later.

‘But it won’t take long because I’ll use a pre-built template…’ So you’ve caught us out. You could go for the fast approach and drag and drop a few pictures into an existing template.

But if you’re trying to build an original brand that truly reflects your business and that consumers and clients can relate to, we would avoid using templates that will make your company look like thousands of other stock websThe Problem with Squarespaceites. You will also run into long term problems too. One of these long term problems is the bandwidth I already spoke about. The issue with bandwidth is that when you’ve chosen that lovely template from the template store, you know, the one with the massive photographic background and parallax scrolling effects? Yeah, that one, the one that you chose so you could upload the awesome images of your company at work, some stunning photography work from the photographer you hired. The problem with that is that your images are not optimised, they are not ready for the web as Wix, Squarespace and Weebly would like you to believe. All of those images result in poor loading times for your users, and that translates into less clicks through to your product, whether that is your radical T-Shirt range or your services contact form.

Whenever a client asks me for advice on starting a website, I tell them to get a domain. Whether it’s custom designed by me or a a paid theme just for starters, the investment in time and energy learning and working with the people who know what they are doing will serve them both now and in the future.

So, should you use a DIY website builder to build your own website? The answer is no.

And that, my friends, is the problem with Squarespace and other DIY website builders.

Chris

 

Hello World (Website Launch)

Website Launch!

New website launch!

I’ve been massively busy over the last few weeks developing projects for an array of clients. I decided it was time for some ‘me’ time.

Soon I will begin a HTML5 and CSS3 basics series sharing my knowledge of these two technologies, hopefully they will be of use to you as they have been to me!

Speek soon,
Ciao