Welcome to this week’s design and development roundup! 

And would you look at that, it's October! Halloween is just around the corner and Christmas is soon to follow.

But before then, we have all of the design and development goodness that you need for the next week. Check out what the team have scoured the internet for below!
 

Ruth AvatarRuth

Apple Watch Hidden Plain Text Emails & Putsmail

Apple Watch and Putsmail

Photo: Pixabay

I was given the arduous task recently of setting up a whole suite of new emails for a project we have in house. After realising there was no way of getting out of it, I put all my efforts into making sure we had a robust set of email templates that can be used, built upon and expanded without ever having to redo any markup. 

After building them in a lovely responsive format, I realised that Apple Watch now has an added MIME (Multipurpose Internet Mail Extension) which allows for a new plain text format to be sent, which is only readable by the Apple Watch itself!

Content-Type: text/watch-html; charset=“utf-8”
Content-Disposition: inline

To create a hidden watch email, you need to be aware of a few pointers in regards to formatting. 

Bold            <b>Text</b>
Italics        <i>Text</i>
Underline        <u>Text</u>
Font Color        style=”color: #00800;”

Text set to black (#000000), or not specified, will be converted to white (#FFFFFF). Other colors are supported.
Alignment        <div style=”text-align: right;”>Text</div>
Only left, center and right are supported.
Quoting        <blockquote type=”cite”>Text</blockquote>
Nest quotes up to 7 levels deep, no indentation occurs, but shading does indicate quote level.
Numbered List    <ol><li>Item 1</li></ol>
Bulleted List    <ul><li>Item 1</li></ul>
Images        <img src=”cid:…”>Text</blockquote>

Although there is image support, it’s the bare minimal. 

All imagery must be embedded, and there is an annoying bug which messes with the image ratio. 

 "When the watch resizes your embedded image, it inserts a 2px (4px once on the retina screen) transparent border. Unfortunately, it does this inside the image, causing the image to distort. For example, if you have a 100x50px image, the Watch will resize it to 96x46px, failing to preserve the image ratio."

MORE INFO

To get an Apple Watch to fall back to your watch-html, it needs to read something in the HTML body which is unsuitable, which will kick in the new watch-html copy. (A remote image will do it!)

So now I’d created this triple MIME, responsive, table happy email collection with blood sweat and tears – and I wanted to test it. We have multiple online email marketing solutions in the studio, but I wanted a very quick way of testing these emails, especially for the Apple Watch. 

Introducing Putsmail! Putsmail allows you to send your 3 part email for design testing and debugging, which you can send to up to 10 email addresses, allowing testing for HTML, Plain and Watch!

Putsmail also has an inbuilt inliner, which moves the css inline when you click send, which is a lovely added bonus. I, myself, prefer to build my emails with an external SCSS stylesheet, which I compile and add inline using Zurb’s Inliner as it is easier to update multiple emails having one core stylesheet.

To anyone having to code emails, good luck! – I feel your pain.

VIEW PUTSMAIL


Juma AvatarJuma

Koel

Koel Preview

Photo: Koel

Koel is a simple web-based audio streaming app that is aimed at web developers. Koel is designed to be simple, it doesn’t handle audio file uploads or stream from other musical streaming websites rather it allows users to upload their files to a readable directory and configure Koel to scan and sync the audio files.  Koel utilises Laravel for their server-side scripting and therefore requires Laravel's minimum requirements to be fulfilled prior to installation. In addition, a DBMS is required, any supported by Laravel can be used. Koel also requires the latest stable version of NodeJS to be installed due to it’s use of VueJS for client side scripting.

For installation, the following easy steps can be followed:

git clone https://github.com/phanan/koel .
composer install
vi .env
php artisan koel:init

From the steps above, the third step is used to enter the database and admin account information. Below are the minimum settings required:

    DB_CONNECTION
    DB_HOST 
    DB_DATABASE
    DB_USERNAME 
    DB_PASSWORD 
    
    ADMIN_EMAIL 
    ADMIN_NAME
    ADMIN_PASSWORD
    
    APP_MAX_SCAN_TIME

The settings include server and database connection details, admin login credentials and the maximum scan time. Once configured, the server can be accessed on the localhost via http://localhost:8000/ 

VIEW MORE


Lewis AvatarLewis

LibHunt

LibHunt Logo

Photo: LibHunt

Having just surfaced on ProductHunt recently, LibHunt is a fantastic curated list of useful libraries and resources for pretty much every programming language you can think of: Android, iOS (and yes, Swift is its separate network altogether), PHP, Node.js, Go, Rust, and the list goes on… The resources cover everything from frameworks, development environments, data management, testing, static code analysis, continuous integration, animations, layout, UI aspects and much more. What's included changes per-language but the list is a pretty extensive and thoroughly tested source of fantastic resources for any project.

VIEW

Twicket – Segmented Control for iOS

Twicket Logo

Photo: Twicket

Twicket provides a custom UISegmentedControl replacement for iOS, written in Swift. Used in the Twicket app, the development team made the entire UI animations open source and available for all to use. The package handles the inertia of the movement so you're able to throw your selector from one side to the other.

Twicket enables you to handle a seamless drag and tap gesture, provides all the movement animation, is fully Interface Builder compatible and everything can be completely customised to your own needs.

VIEW


Thanks for joining us! Enjoy this roundup? Let us know on Twitter or Facebook!

0
Make your Instagram beautiful. Preview your images before you post them ›