Collective #394

Original Source:


Inspirational Website of the Week: Almanac

A unique design with playful effects made us pick Almanac as inspirational website of the week.

Get inspired


Our Sponsor
Manage your visual assets like you manage your code

Collaborate on design socially with resolvable image discussions within the same repositories you collaborate on code.

Read more


Responsive Components: a Solution to the Container Queries Problem

An elegant class-based solution to the container queries problem using ResizeObserver. By Philip Walton.

Read it


Prototyping, Libraries on Sketch Cloud and an official iOS UI kit in Sketch 49

Read about the new features in Sketch 49 including revolutionary Prototyping.

Read it


Launching the Front-End Tooling Survey 2018

With the Front-End Tooling Survey, Ashley Nolan wants to gather input and shed some light on the tooling habits across the web development industry.

Read it


CSS Puns

Some CSS humor accompanied with animations. By Saijo George.

Check it out


Third party CSS is not safe

Read why Jake Archibald suggests that third party content is simply not safe.

Read it


CSS Illustration ‘face’

Amazing CSS art made by WhitePallet.

Check it out


It’s Resilient CSS Week

A video series where Jen Simmons explains step-by-step how to write CSS that works in every browser at the same time, including the old ones.

Watch it


The Lost Art of the Makefile

Jesse Hallett writes about the merits of Make, the general-purpose build tool.

Read it


Free Font: Vindica Rebel

A beautiful expressive typeface designed by Rubirubiko.

Get it


Just Starting Out with CSS & HTML

A great collection of CSS-Tricks articles for everybody who is starting out with front-end development.

Check it out


V6: Color

The last article in a three-part series about Rob Weychert’s website redesign.

Check it out



Heydon Pickering takes a look at notification components and how they can increase confidence in the use of web applications, in an inclusive way.

Read it



Lightweight and user-friendly interactive prompts that use promises and async/await.

Check it out


A developer’s introduction to GitHub

A guide that teaches the most important pieces of GitHub that you should know as a developer.

Read it


Announcing Dart 2: Optimized for Client-Side Development

Read all about the reboot of Dart as a language optimized for client-side development for web and mobile.

Read it


How GDPR Will Change The Way You Develop

Heather Burns explains Europe’s updated data protection framework and what this means for developers.

Read it



A network attack and monitoring framework with lots of features.

Check it out


How we built a pinball

Read about how Merci-Michel created “Ouigo — Let’s play”, a pinball game for the browser.

Read it


Six Degrees of Wikipedia

Inspired by the concept of six degrees of separation, Six Degrees of Wikipedia traverses links on Wikipedia to find the least number of clicks it takes to travel between any of the nearly six million pages.

Check it out


The Gallery of Emerging Species

A super-cute and playful website for Play-Doh.

Check it out


Lesser known CSS quirks & advanced tips

In this article, Peedu Tuisk shows some CSS facts and quirks.

Read it


From Our Blog
Freebie: “Dropcast” Website Template (HTML, Sketch)

Dropcast is a responsive HTML/CSS/Javascript template, comes with Sketch files and a fully working site with SCSS. It works very well for podcasts landing pages or blogs, and can be easily customized.

Check it out

Collective #394 was written by Pedro Botelho and published on Codrops.

Visual Identity for artisan bakery LOAF

Original Source:

Visual Identity for artisan bakery LOAF

Visual Identity for artisan bakery LOAF

Mar 01, 2018

LOAF is an artisan bakery from Balneário Camboriú that produces bread with organic flour and long fermentation. This is the secret to a crusty and dense bread – but at the same time airy – with easy digestion and unique flavor of all recipes. Every week a new batch of traditional and special bread is prepared for single orders or in a monthly subscription mode – known as Club LOAF. General packaging options and layout of business cards, tags, menus, discount coupons, flyers, stickers, website, newsletter and posts to social networks were created. We strive to highlight the experience in eating a complete, healthy food, without preservatives or chemical additives  + all the LOAF caring for the visual identity.

Visual Identity

visual identity

Pay What You Want for the Complete iOS 11 Developer Bundle

Original Source:

Times are tough and everyone is looking for ways to make some extra money. Some people would get a second job while others would do freelance work. But what if we tell you that you can make money by creating an app. Lots of money. The Complete iOS 11 Developer Bundle will guide you through […]

The post Pay What You Want for the Complete iOS 11 Developer Bundle appeared first on

New coins feature A-Z of British life

Original Source:

26 new 10p coins have entered circulation in the UK, dedicated to celebrating everything 'quintessentially British'. Each special edition coin is based on a different letter of the alphabet, from the Angel of the North to zebra crossings.

Of course, in certain cases there has been some barrel-scraping (we guess it was a toss up between a xylophone and 'X marks the spot'), but in most cases the designers have really hit the nail on the head when it comes to capturing everything the Brits love most, including tea, the Loch Ness Monster and the NHS. 

The coin attracting most love so far is the Q, which stands for – of course – queuing. It even features a parade of tiny, etched figures queueing politely across it. 

Take a look through the full collection below – use the arrows on the right and left to navigate through the collection. 

Along with the A-Z coin range, the Royal Mint is launching a nationwide coin hunt, complete with a dedicated app – available for free on the App Store and Google Play. Numismatists (coin collectors, that is) can scan any alphabet coins they find, using their phone camera, then collate them into a digital 'collection'. The app will also reveal the locations where the rarest coins are being found. 

Find out more about the coins on the Royal Mint website (it's currently down due to high volumes of traffic… but you can always wait in the queue).

Read more:

63 best free fonts for designersWill Future Fonts change the way we buy typefaces?15 online packaging design resources

Serverless development with Node.js, AWS Lambda and MongoDB Atlas

Original Source:

This article was originally published on mongoDB. Thank you for supporting the partners who make SitePoint possible.

The developer landscape has dramatically changed in recent years. It used to be fairly common for us developers to run all of our tools (databases, web servers, development IDEs…) on our own machines, but cloud services such as GitHub, MongoDB Atlas and AWS Lambda are drastically changing the game. They make it increasingly easier for developers to write and run code anywhere and on any device with no (or very few) dependencies.

A few years ago, if you crashed your machine, lost it or simply ran out of power, it would have probably taken you a few days before you got a new machine back up and running with everything you need properly set up and configured the way it previously was.

With developer tools in the cloud, you can now switch from one laptop to another with minimal disruption. However, it doesn’t mean everything is rosy. Writing and debugging code in the cloud is still challenging; as developers, we know that having a local development environment, although more lightweight, is still very valuable.

And that’s exactly what I’ll try to show you in this blog post: how to easily integrate an AWS Lambda Node.js function with a MongoDB database hosted in MongoDB Atlas, the DBaaS (database as a service) for MongoDB. More specifically, we’ll write a simple Lambda function that creates a single document in a collection stored in a MongoDB Atlas database. I’ll guide you through this tutorial step-by-step, and you should be done with it in less than an hour.

Let’s start with the necessary requirements to get you up and running:

An Amazon Web Services account available with a user having administrative access to the IAM and Lambda services. If you don’t have one yet, sign up for a free AWS account.
A local machine with Node.js (I told you we wouldn’t get rid of local dev environments so easily…). We will use Mac OS X in the tutorial below but it should be relatively easy to perform the same tasks on Windows or Linux.
A MongoDB Atlas cluster alive and kicking. If you don’t have one yet, sign up for a free MongoDB Atlas account and create a cluster in just a few clicks. You can even try our M0, free cluster tier, perfect for small-scale development projects!).

Now that you know about the requirements, let’s talk about the specific steps we’ll take to write, test and deploy our Lambda function:

MongoDB Atlas is by default secure, but as application developers, there are steps we should take to ensure that our app complies with least privilege access best practices. Namely, we’ll fine-tune permissions by creating a MongoDB Atlas database user with only read/write access to our app database.
We will set up a Node.js project on our local machine, and we’ll make sure we test our lambda code locally end-to-end before deploying it to Amazon Web Services.
We will then create our AWS Lambda function and upload our Node.js project to initialize it.
Last but not least, we will make some modifications to our Lambda function to encrypt some sensitive data (such as the MongoDB Atlas connection string) and decrypt it from the function code.

A Short Note About VPC Peering

Continue reading %Serverless development with Node.js, AWS Lambda and MongoDB Atlas%