I have sweared to a RSS-reader for following blogs and interesting webpages for over a decade now. I love that I once a week can sit down with a cup of coffee and read all the blogs/websites I follow without switching context and webpages all the time.
From whatisrss.com
RSS solves a problem for people who regularly use the web. It allows you to easily stay informed by retrieving the latest content from the sites you are interested in. You save time by not needing to visit each site individually. You ensure your privacy, by not needing to join each site’s email newsletter.
I got introduced to RSS-readers with Google Reader, and became quickly addicted. When Google shut it down in 2013 I needed to find an alternative. My choice fell on Shaun Inmans Fever. It was a self hosted solution, which meant a bit of work, but on the other hand I owned my own data and it would still work the day support for it stopped.
I loved how it worked and that I had control over all the files – especially the CSS. I even made my own theme people could use. Sadly Shaun Inman stopped supporting fever two years ago. I’ve been using it until now, but it’s time to admit that it’s just running on fumes now. We had a good run.
Therefore one of my weekend activities became finding a new RSS-reader. On my iPad I’ve been using Reeder 3 for reading the content on Fever. I therefore started with the list of RSS-readers Reeder supports. I checked out more or less everyone of the competitors, but there was one clear winner:
Feedbin is a small company with two persons running on a subscription-based model (5$ month). Good news: a sustainable business-model unlike Google Reader and Fever.
Subscribe to emails
The one killer-feature which made the choice to switch to Feedbin easy was the ability to subscribe to newsletters and have them appear as a feed together with your other subscriptions. The last years it has, understandably, become very popular to make newsletters. There is a lot of great newsletters out there that just excist as newsletters and the only way to access them is by getting mail. I personally hate to get newsletters mixed with other mail and things I actually have to respond to. Mentally it’s better for me to read those email-subscriptions while I read the other RSS-feeds thereby seperating work from reading / getting updated. Therefore this feature in Feedbin really struck home, and I’ve been transferring each newsletter as I get mail in my inbox.
Clean up old feeds
Luckily it is usually easy to switch RSS-reader since there is an open standard for consuming and exporting them, OPML, which almost everyone use. I used that when switching from Google reader to Fever, as well as now from Fever to Feedbin. That meant there were lot of feeds that needed to be cleaned up - some feeds hadn’t been updated since 2012. Luckily Feedbin has a simple solution for seing how frequently blogs are updated and when they last were updated which made the cleaning job rather easy.
A lot of great features
Feedbin got itself a new fan this weekend. I recommend trying it out. It also has a bunch of other great features like:
- Nice typography. Hello Hoefler & co!
- An impressive webapp which makes me forget Reeder 3 exists. (Seriously: the only thing to complain about is if your are switching to another app and back and it forgets it’s state)
- It can fetch full text from article for feeds that only offer partial content
- They are private by default
- They even have a solution for reading Twitter (which I haven’t checked out yet)
Now and then I find myself in the situation where I need to create a pdf from some images. I often resort to Preview, but it can be quite cumbersome at times. There is however an easier and faster option, but it requires that you use the Terminal.
Images to pdf step by step
- First you need Homebrew, which is basically the app store for Terminal. If you don’t have it installed open up your terminal and paste in
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" and press enter. Then follow the instructions in Terminal.
- Once done close your terminal and open it up again (to make sure that Homebrew works)
- Then type in
brew install imagemagick. This installs imagemagic which is the program that will help us create the pdf-files.
- When finished close and open up your Terminal again.
- Next step is to find the folder where we have the source images we want converted. The easiest way to do that is to find the folder in Finder. Then in your Terminal type in
cd and then drag your folder into your Terminal window. Now it will read cd Downloads/images or something similar. Then press enter. Now we have navigated to a new folder in Terminal!
- Type in
convert *.jpg output.pdf which means use imagemagick to convert all jpg-files in this folder and combine them to a pdf called output.pdf. You can adjust this if you f.ex. have png-files, or create your own name on the pdf: convert *.png myAwesomeFile.pdf.
- You now have a pdf-file with all your images combined!
ProTip 1
If you want the file in a specific order I recommend naming your files with numbers. F.ex: 1-onboarding.png, 2-signing.png. You can also type your files directly out like convert onboarding.png signing.png output.pdf
ProTip 2
If the resulting pdf is too big in size you can try: convert -quality 60 *.jpg output.pdf
Tl;dr
To convert images to pdf:
brew install imagemagickconvert *.jpg output.pdf
Source
Svgs are awesome. They are scalable, small, and you can actually edit the file both visually and in code. This is my current workflow for optimising svgs for webpages.
Visual editing
At the moment I do most of my design work in Figma, even though its svg exports is not the best. I know they are working on it, but at the moment I export the svg from figma and import it into Sketch where I usually remove some groupings and clipping masks and export it out again.
Preparation
How you prepare the svg in your editor is an important part of optimizing your svgs, but there are two quick-fixes you can do before you export that I would recommend:
If your shape has any form of transform remove it by selecting the shape in Sketch and go to Layer > Combine > Flatten. Now the Transform should say 0.
If you have multiple shapes that visually combines to one shape Combine them by selecting them and going to Layer > Combine > Union|Subtract|Intersect|Difference F.ex. an arrow consisting of a rectangle and a triangle should be combined into one shape for smallest file-size.
Export
How you export and compress your svg are important for the final file-size. The default export from Sketch has a lot of bloat (Hello, <desc>Created with Sketch.</desc>), and we don’t want that in our final files. In Sketch I therefore have the plugin SVGO Compressor installed. It just magically compressses your files when you export as usual.
I have changed the default settings to compress the files even more than the default-setting. To copy my settings you can select Plugins › SVGO Compressor › About SVGO Compressor and then click the Edit SVGO Settings… button. Your default editor will open the svgo.json file, where you’ll be able to tweak the settings. Remove the content in the file and paste this file instead. In my experience it at least halves the file-size from the default settigs. Your milage may vary if you use a lot of masks/gradient etc. but I would recommend testing out tweaking the different parameters. They are very descriptive like cleanupAttrs, mergePaths, removeTitle etc. You can see all the parameters here
Svgomg also exist as a webtool, and even though it works like magic on the svg filesize, it doesn’t change the structure of the svg. If you have unneccesary shapes, masks or shapes that could have been combined you should fix this before exporting. This is probably whats going to save most space.
Manual editing
You’d be surprised how much of a regular svg is not needed. SVGO helps a lot with this, but just to a certain point. Most tools add unnessecary class-names and divs or groups that you don’t need any-more. They are mostly not needed unless you are doing something more complex like controlling your svg via CSS or having gradients or masks. I always recommend opening up your svg-file in your favorite editor and just delete elements that doesn’t seem neccessary.
Attributes
When you export out an svg you usually get a lot of attributes added to the svg like <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >...</svg> but when do you actually need to use them?
xmlns
The xmlns="http://www.w3.org/2000/svg" attribute is
xmlns:xlink
The xmlns:xlink="http://www.w3.org/1999/xlink" attribute is:
version
The version="1.1" attribute is:
viewBox
This says a lot of the size/placement of the elements in the svg so this is always needed.
height and width
You don’t need to specify this. If you don’t the svg will take as much space as it is allowed. Much like a regular <img /> without width specified.
grouping
Very often you don’t need the grouping (<g>) of elements if the file is simple, or you are not editing the file any more. If you f.ex. are exporting out an icon with just one shape, the grouping is unnecessary.
fill-rule=”evenodd”
This is often not needed. I recommend trying to remove it to se if it affects your svg. Here is an article outlining how the fill-rule property works.
Implementing on the web
Inline svg
To get the most control of the svgs just copy the code in the svg and paste it into you html/twig/php/react-file and your good to go. I usually change the fill-color to currentColor to control the color better via the color-property in CSS. Other times I just remove the fill-color completely and target it in the css via fill. Or, if I need multiple colors, i might add classnames to each path and shape so that I can target them directly with css.
svg in CSS
There are multiple ways to add an svg to your CSS. Lets take this link with an arrow behind is an example. We can add this multiple ways:
A couple of things to note:
- If you link to the svg-file it’s going to be a new http-requests, and microscopically slower.
- You can directly inline svgs like this:
background-image: url('data:image/svg+xml;charset=UTF-8,<svg>{content here}</svg>'); (Link 2). This however doesn’t work very well with some versions of internet explorer. The fix for this is to URI-encode your svg. I use this tool to convert the svg to data URI.
- Another solution is to Base64-encode the svg, but is usually create a larger file than uri-encoding the svg directly.
- You can’t use currentColor or similar when you URI-encode the svg since the browser reads it like it’s a svg that you are linking to. If you want the hover-color of the icon to be the same as the rest of the link I have 3 solutions for you:
- Link to another colored URI-encoded-svg on hover (Link 4)
- Use mask-image and use
currentColor on the background-color. The support for this is not the best, so use with causion. (Link 5)
- You could also fake a mask in SVG (basically create a box in the same color as the background, and clip out the symbol from that shape). Again we use the background-image with
currentColor. The support for this is much better, but a bit hacky. ¯_(ツ)_/¯ (Link 6)
Useful links:
As a designer one of my jobs is to recognise patterns. Small design- and code-patterns that get used again and again on every project. Every time I get to a new pattern I stop and ponder how to mark it up. Accessibility is important for me, but I often find it unclear what’s best practice for these patterns.
This is a short list of some elements I wish existed in HTML. By officially becoming HTML elements, these patterns would then be more likely to be marked up for accessibility. They would also be marked up more consistently — and frankly they’d also be easier to talk about, since we’d all use the same names for them.
Filter
The first pattern I think of is an element that filters or sort the rest of the content. You’ve probably used this on a webshop sorting from cheapest to most expensive. Or most popular to least popular. Or to filter by brand. Or color. I think you get the gist. Usually these filters are just marked up with a simple div around them. My proposal is something along the lines of the snippet below, just to make it clearer that some content is filtering another block of content. I guess there should also be some kind of indication if it is filtered or not, but I’m not sure how this is best solved.
<filter for="product-list">
However you would like to filter the content. Select, radio-buttons etc.
</filter>
<ul id="product-list">
<li>The content you are filtering</li>
</ul>
Select
“But we already have the <select>-element”. Fair point. I often find myself wishing the Select element was more flexible. Maybe I want to add a flag to a list of countries, or maybe two lines on top of each other like an account-name or an account-number. My proposal here would be that you could actually use spans, images and divs inside the select-element. I guess this could cause headaches for creators of mobile browsers. But they are really smart people. They have created a browser. I guess they will find a way.
<select>
<option>
<img src="norway.svg" />
<span>Norway</span>
</option>
...
</select>
Expanding table
Imagine that you have a list of contacts with information about their names, addresses, telephone-numbers, and e-mails. Now place everything in a regular table and try to make it responsive. Yeah? Struggling, right? One solution is one of these fancy responsive tables, but what I want is to hide the columns that don’t fit on the screen and when you click each row it expands and show the rest. My hack for now is to use a <tbody> for each row and then place two rows inside that. One is the regular row and one is a row with just one column that is hidden but which appears when you click the first row in the <tbody>.
<!-- how I am doing it now -->
<table>
<tbody>
<tr>
<td>Visible</td>
</tr>
<tr>
<td>Hidden until you click on the row above</td>
</tr>
</tbody>
...
</table>
<!-- how expanding tables could work -->
<!-- thr = TableHiddenRow -->
<table>
<tbody>
<tr for="example">
<td>Visible</td>
</tr>
<thr id="example">
<td>Hidden until you click on the row above</td>
</thr>
...
</tbody>
</table>
Step-indicator
You are applying for a loan, or maybe you are filling out your tax report or answering a questionnaire. Each page has a lot of fields you need to fill out and every time you click ‘Next’ you hope you are done, but you just get more boxes to tick and fields to type in. Wouldn’t it be nice if there were some kind of common navigation that told you how far in the process you were? My proposal for this is something like <step current="2" of="6"></step>. The idea is that you can place what you want inside of it and style it however you like. The nice thing about this feature is that browsers could indicate subtly that you now are in a flow and how far through you are. Screen readers could for example say “step 2 of 6 of car loan“ reading the steps before the title of the page.
Carousel
Ahh. Carousel. Much hated. Much used. Much badly implemented. I guess there are as many people who know html as there are ways to code up a carousel. You have a wrapper, some content, some arrows maybe, and a navigation showing where you are. Imagine using a screenreader to browse a website and suddenly your screenreader stops midway through reading a description and starts on a new one, and a new one. If we just had some consistent markup this could have been avoided. I have no suggestions for how it would work, but it would be useful.
Expand
One pattern that comes up again and again is expand. An element that when you click it, shows more content. I thought quite a bit about how, in a perfect world, this should be marked up. Then I asked around, and it seems the world is perfect, after all. There actually is an ‘expand’ element being implemented in browsers today. Internet Explorer hasn’t caught up yet, nothing new there, but almost all the newest browser have implemented it:
<details>
<summary>Read more</summary>
Text that is hidden and appears when you click read more.
</details>
Do you have any ‘HTML elements’ that you lie awake at night, wishing existed?
Originally published on Medium
Let’s talk about how you store your photos. Since you probably don’t use film anymore you need to store them somewhere digitally, and probably not just on your computer. You don’t want to risk all your images if your computer crashes or gets stolen.
I’ve gone through a couple of the cloud-storage solutions out there and compared them with each other.
* €10 / user / month minimum of 5 users
** Doesn't seem like you can buy more than 2TB.
Some findings
- Google Photos is ridiculously expensive (100 times more than Amazon Cloud) if you have more than 1TB of files
- No-one can compete with Amazon Cloud prices
- iCloud and Google Photos have the best search. iCloud is probably a bit better because it has face-recognition
- Google Photos has an amazing Assistant that creates albums, animations and adds filters etc. to your images automatically. It’s actually pretty good!
- The Norwegian Jottacloud is a good competitor to the rest and the only solution that stores it’s files in Norway
My current setup
I sync my iPhone images with iCloud. I store the RAW-images from my camera on a Synology NAS that syncs the images to Amazon Cloud. This way I don’t have to store them on my computer, but has fast access to them at home. I use Adobe Lightroom as my image-organizer and Amazon Cloud more as just file-storage. Since all my pictures are RAW-files I sadly miss out on a lot of the great search-functionality that’s out there.
My dream setup
If Google Photos supported RAW-files and had a regular filesystem (so I could use it with Lightroom) I would pick that. Mostly because I love the Google Photos assistant.
What should I do if I just have images on my mobile phone?
Do you have an iPhone? Sync it with iCloud. It works great, is simple to use and works out of the box. It is however a bit more lock-in solution than Google Photos (and doesn’t have the assistant).
Do you have an Android-device? Sync it with Google Photos.
Are you switching between iPhone, Android or similar? Use Google Photos.
A last little tip
There is a clever app for macOS called Expandrive that can mount a lot of these cloud-solutions as a Network Drive. This way you don’t have to store the files on your computer, but they are accessible in the filesystem. It works great with Amazon Cloud Drive, Google Drive, Dropbox ++.
