Another week, another roundup! Check out our latest design and development resources for your viewing pleasure.

This week we’ve included a CSS iPhone 6 mockup, Product Hunt for Mac and TNTSearch!

Adam AvatarAdam

iPhone 6 CSS Mockup

iPhone 6 CSS

Photo: Codepen

Another Apple product mockup for your arsenal, this time in the form of an iPhone 6 made purely with CSS! Everything is editable, including the screen and colour (anyone for a green iPhone?)


Bootstrap 4 Cheat Sheet

Bootstrap 4 Cheatsheet

Photo: Bootstrap

A quick reference guide in the form of a cheat sheet for Bootstrap v4.0.0-alpha.2 courtesy of Alexander Rechsteiner.


Ruth AvatarRuth

Product Hunt for Mac 

Product Hunt for Mac

Photo: Product Hunt

A simple (and maybe counter productive?) app to have in your menu bar allows you easy access the latest hunted products without having to go to the main site. It’s a brilliantly small app, built on Swift by the guys at Product Hunt: @DeVladinci and @sethbwilliams

The app took "about two weeks to build the core functionality, followed by about another week of polishing, bug-fixing, and some smaller feature additions, like the "firehose control" in the settings" – which is remarkable seeing as though the finished product is beautiful! 




Photo: Hologram

Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful style guide.

Quick start: gem install hologram 
And then: hologram init

Hologram makes this easy by extending Markdown code blocks that can be marked as examples. The block will then be rendered twice: Once as the actual HTML output and once again as HTML code.




Photo: Showbox

Showbox is an app which enables anybody to create studio-quality video content. It’s is a cloud-based solution that transforms video creation into a simple, scalable process that gives you beautiful results. 

Showbox includes:

  • Show formats: our formats are the storytelling "blueprints", which guide you through specific steps for the video you want to create. For example a top 5 countdown, a video to showoff your apartment for AirBnb, or even just you talking about a subject for 60 seconds.
  • A library of graphic packages, all created by professional video artists, that give your video a professional look & feel
  • Background replacement (“keying”) without having to use a green screen!
  • Free-to-use licensed content libraries (from Getty images/videos, ShutterStock, and more)
  • Automatic audio mixing and recording a voice-over
  • Import your own content from Facebook, Instagram, Dropbox, etc.

The platform is free of charge for individual creators, with a paid version for brands and publishers.


Juma AvatarJuma

Caffeine Claims to Make iOS Networking 200% Faster with Software


Photo: Caffeine

Caffeine is a protocol stack that claims to improve application speeds often by 200% or more by targeting the bandwidth and latency efficiency of the requests sent by your iOS application. Furthermore, no backend changes are needed to your application.A Caffeine bundle has to be imported into your application in order to make use of Caffeine which the documents claim can be done in 15 minutes. The bundle contains 4 frameworks and two files these are:

  • The caffeine.license file which is required to use Caffeine.
  • CocoaAsyncSocket.framework an open source library that Caffeine uses for fast-UDP diagnostic logging.
  • NaOH.framework an open source library that implements Caffeine’s security.
  • Nitrogen.framework which contains Caffeine’s proprietary protocol.
  • Proxeine.framework a proxy interpreter that converts client’s networking library into Caffeine.
  • Proxy.key file containing the public key the client uses to authenticate with Caffeine’s proxy servers.

All these components are included to help make Caffeine a one-stop-shop for all your networking needs by handling both security and application speed. Caffeine’s aim is to make application speed as fast as the network speed limit allows by sending less data which incur fewer round-trips than the equivalent HTTPS implementation. Currently developers have to apply to use Caffeine.

A report of Caffeine’s effect on image downloading may be found here.
A search demo can be found here.
More can be read below:


Lewis AvatarLewis



Photo: Stocksnap

Writing your own boolean searches in MySQL is an horrendous task on the best of days. With TNTSearch you can create a fully featured full text search engine straight from the backbone of PHP. Create, manipulate and search against custom built indexes.

$tnt = TeamTNTTNTSearchTNTSearch;
    'driver' => 'mysql',
    'host' => 'localhost',
    'database' => 'dbname',
    'username' => 'user',
    'password' => 'pass',
    'storage' => __DIR__.'/index/'
// Create a new index, assign it the key 'Index.Post'
$indexer = $tnt->createIndex('Index.Post');
// Filter our database, query the input index data. It's important that this query returns an ID field
$indexer->query('SELECT p_id AS id, p_content FROM posts');
// Creates our index for us

Once we have our index, we can now search and filter against a list of IDs. To begin, we can do a relatively simple string search:

// Select the index we want to use
// What we'd like to search for, and how many to return
// This would return an array of 10 ID's
$results = $tnt->search('search phrase', 10);
// Using our own database abstraction layer / PDO
$database->execute("SELECT * FROM posts WHERE p_id IN {$results}");

Alternatively, we can create boolean searches on the same index:

// This will return all documents containing 'made by' but not 'magnitude'
$results = $tnt->searchBoolean('made by -magnitude');
// Returns all documents that have either phrase
// alternatively you can remove the brackets and 
// match only those containing the single word
$results = $tnt->searchBoolean('(web design) or (web deveopment)');


Got something you want to feature in next week's roundup? Get in touch on Twitter or Facebook!