May, 2015 | Webmasters Gallery

Desktop Wallpaper Calendars: June 2015

May 31st, 2015 No comments

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork, and as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for seven years now¹, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for June 2015. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

All images can be clicked on and lead to the preview of the wallpaper,
You can feature your work in our magazine² by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Fishing Is My Passion!

“The month of June is a wonderful time to go fishing, the most soothing and peaceful activity.” — Designed by Igor Izhik³ from Canada.

⁴

preview⁵
with calendar: 320×480⁶, 640×480⁷, 800×480⁸, 800×600⁹, 1024×768¹⁰, 1024×1024¹¹, 1152×864¹², 1280×720¹³, 1280×800¹⁴, 1280×960¹⁵, 1280×1024¹⁶, 1400×1050¹⁷, 1440×900¹⁸, 1600×1200¹⁹, 1680×1050²⁰, 1680×1200²¹, 1920×1080²², 1920×1200²³, 1920×1440²⁴, 2560×1440²⁵
without calendar: 320×480²⁶, 640×480²⁷, 800×480²⁸, 800×600²⁹, 1024×768³⁰, 1024×1024³¹, 1152×864³², 1280×720³³, 1280×800³⁴, 1280×960³⁵, 1280×1024³⁶, 1400×1050³⁷, 1440×900³⁸, 1600×1200³⁹, 1680×1200⁴⁰, 1920×1080⁴¹, 1920×1200⁴², 1920×1440⁴³, 2560×1440⁴⁴

Strawberry Fields

⁴⁶

preview⁴⁷
with calendar: 320×480⁴⁸, 1024×768⁴⁹, 1280×1024⁵⁰, 1440×900⁵¹, 1680×1200⁵², 1920×1200⁵³, 2560×1440⁵⁴
without calendar: 320×480⁵⁵, 1024×768⁵⁶, 1280×1024⁵⁷, 1440×900⁵⁸, 1680×1200⁵⁹, 1920×1200⁶⁰, 2560×1440⁶¹

The Amazing Water Park

“Summer is coming. And it’s going to be like an amazing water park, full of stunning encounters.” — Designed by Netzbewegung / Mario Metzger⁶² from Germany.

⁶³

preview⁶⁴
with calendar: 320×480⁶⁵, 640×480⁶⁶, 800×600⁶⁷, 1024×768⁶⁸, 1024×1024⁶⁹, 1152×864⁷⁰, 1280×720⁷¹, 1280×800⁷², 1280×960⁷³, 1280×1024⁷⁴, 1366×768⁷⁵, 1400×1050⁷⁶, 1440×900⁷⁷, 1600×1200⁷⁸, 1680×1050⁷⁹, 1680×1200⁸⁰, 1920×1080⁸¹, 1920×1200⁸², 1920×1440⁸³, 2560×1440⁸⁴
without calendar: 320×480⁸⁵, 640×480⁸⁶, 800×600⁸⁷, 1024×768⁸⁸, 1024×1024⁸⁹, 1152×864⁹⁰, 1280×720⁹¹, 1280×800⁹², 1280×960⁹³, 1280×1024⁹⁴, 1366×768⁹⁵, 1400×1050⁹⁶, 1440×900⁹⁷, 1600×1200⁹⁸, 1680×1050⁹⁹, 1680×1200¹⁰⁰, 1920×1080¹⁰¹, 1920×1200¹⁰², 1920×1440¹⁰³, 2560×1440¹⁰⁴

Gravity

¹⁰⁶

preview¹⁰⁷
with calendar: 1024×768¹⁰⁸, 1024×1024¹⁰⁹, 1152×864¹¹⁰, 1280×720¹¹¹, 1280×800¹¹², 1280×960¹¹³, 1280×1024¹¹⁴, 1366×768¹¹⁵, 1400×1050¹¹⁶, 1440×900¹¹⁷, 1600×1200¹¹⁸, 1680×1050¹¹⁹, 1680×1200¹²⁰, 1920×1080¹²¹, 1920×1200¹²², 1920×1440¹²³, 2560×1440¹²⁴
without calendar: 1024×768¹²⁵, 1024×1024¹²⁶, 1152×864¹²⁷, 1280×720¹²⁸, 1280×800¹²⁹, 1280×960¹³⁰, 1280×1024¹³¹, 1366×768¹³², 1400×1050¹³³, 1440×900¹³⁴, 1600×1200¹³⁵, 1680×1050¹³⁶, 1680×1200¹³⁷, 1920×1080¹³⁸, 1920×1200¹³⁹, 1920×1440¹⁴⁰, 2560×1440¹⁴¹

R U Ready for Summertime?

“Summer… hair gets lighter, skin gets darker, water gets warmer, nights get longer, music gets louder. Life gets better.” — Designed by Marielle Perikly Kokosidou¹⁴² from Greece.

¹⁴³

preview¹⁴⁴
with calendar: 320×480¹⁴⁵, 640×480¹⁴⁶, 800×480¹⁴⁷, 800×600¹⁴⁸, 1024×768¹⁴⁹, 1024×1024¹⁵⁰, 1152×864¹⁵¹, 1280×720¹⁵², 1280×800¹⁵³, 1280×960¹⁵⁴, 1280×1024¹⁵⁵, 1440×900¹⁵⁶, 1440×1050¹⁵⁷, 1600×1200¹⁵⁸, 1680×1050¹⁵⁹, 1680×1200¹⁶⁰, 1920×1080¹⁶¹, 1920×1200¹⁶², 1920×1440¹⁶³, 2560×1440¹⁶⁴
without calendar: 320×480¹⁶⁵, 640×480¹⁶⁶, 800×480¹⁶⁷, 800×600¹⁶⁸, 1024×768¹⁶⁹, 1024×1024¹⁷⁰, 1152×864¹⁷¹, 1280×720¹⁷², 1280×800¹⁷³, 1280×960¹⁷⁴, 1280×1024¹⁷⁵, 1440×900¹⁷⁶, 1440×1050¹⁷⁷, 1600×1200¹⁷⁸, 1680×1050¹⁷⁹, 1680×1200¹⁸⁰, 1920×1080¹⁸¹, 1920×1200¹⁸², 1920×1440¹⁸³, 2560×1440¹⁸⁴

June Is Here!

“At last, summer has arrived! So enjoy the sunny weather, make happy thoughts and start planning your vacations. Celebrate the fist month of the summer with a fresh orange juice!” — Designed by WebOlution¹⁸⁵ from Greece.

¹⁸⁶

preview¹⁸⁷
with calendar: 320×480¹⁸⁸, 600×480¹⁸⁹, 800×480¹⁹⁰, 800×600¹⁹¹, 1024×768¹⁹², 1024×1024¹⁹³, 1152×864¹⁹⁴, 1280×720¹⁹⁵, 1280×800¹⁹⁶, 1280×960¹⁹⁷, 1280×1024¹⁹⁸, 1366×768¹⁹⁹, 1440×900²⁰⁰, 1440×1050²⁰¹, 1600×1200²⁰², 1680×1050²⁰³, 1680×1200²⁰⁴, 1920×1080²⁰⁵, 1920×1200²⁰⁶, 1920×1440²⁰⁷, 2560×1440²⁰⁸
without calendar: 320×480²⁰⁹, 600×480²¹⁰, 800×480²¹¹, 800×600²¹², 1024×768²¹³, 1024×1024²¹⁴, 1152×864²¹⁵, 1280×720²¹⁶, 1280×800²¹⁷, 1280×960²¹⁸, 1280×1024²¹⁹, 1366×768²²⁰, 1440×900²²¹, 1440×1050²²², 1600×1200²²³, 1680×1050²²⁴, 1680×1200²²⁵, 1920×1080²²⁶, 1920×1200²²⁷, 1920×1440²²⁸, 2560×1440²²⁹

Let The Spring Set You Free

²³¹

preview²³²
with calendar: 320×480²³³, 640×480²³⁴, 800×480²³⁵, 800×600²³⁶, 1024×768²³⁷, 1152×864²³⁸, 1280×720²³⁹, 1280×800²⁴⁰, 1280×960²⁴¹, 1280×1024²⁴², 1440×900²⁴³, 1600×1200²⁴⁴, 1680×1050²⁴⁵, 1680×1200²⁴⁶, 1920×1080²⁴⁷, 1920×1200²⁴⁸, 1920×1440²⁴⁹, 2560×1440²⁵⁰
without calendar: 320×480²⁵¹, 640×480²⁵², 800×480²⁵³, 800×600²⁵⁴, 1024×768²⁵⁵, 1152×864²⁵⁶, 1280×720²⁵⁷, 1280×800²⁵⁸, 1280×960²⁵⁹, 1280×1024²⁶⁰, 1440×900²⁶¹, 1600×1200²⁶², 1680×1050²⁶³, 1680×1200²⁶⁴, 1920×1080²⁶⁵, 1920×1200²⁶⁶, 1920×1440²⁶⁷, 2560×1440²⁶⁸

Caution! Hot June

²⁷⁰

preview²⁷¹
with calendar: 640×480²⁷², 800×600²⁷³, 1024×768²⁷⁴, 1280×720²⁷⁵, 1280×800²⁷⁶, 1440×900²⁷⁷, 1680×1050²⁷⁸, 1920×1080²⁷⁹, 1920×1200²⁸⁰, 2560×1440²⁸¹
without calendar: 640×480²⁸², 800×600²⁸³, 1024×768²⁸⁴, 1280×720²⁸⁵, 1280×800²⁸⁶, 1440×900²⁸⁷, 1680×1050²⁸⁸, 1920×1080²⁸⁹, 1920×1200²⁹⁰, 2560×1440²⁹¹

Summer Time…

“I am happy in summer! All you need is fresh and relax!” — Designed by Verónica Valenzuela²⁹² from Spain.

²⁹³

preview²⁹⁴
with calendar: 800×480²⁹⁵, 1024×768²⁹⁶, 1152×864²⁹⁷, 1280×800²⁹⁸, 1280×960²⁹⁹, 1440×900³⁰⁰, 1680×1200³⁰¹, 1920×1080³⁰², 2560×1440³⁰³
without calendar: 800×480³⁰⁴, 1024×768³⁰⁵, 1152×864³⁰⁶, 1280×800³⁰⁷, 1280×960³⁰⁸, 1440×900³⁰⁹, 1680×1200³¹⁰, 1920×1080³¹¹, 2560×1440³¹²

Night Night!

“The time we spend with our dads is precious so I picked an activity my dad enjoys a lot, reading.” — Designed by Maria Keller³¹³ from Mexico.

³¹⁴

preview³¹⁵
with calendar: 320×480³¹⁶, 640×480³¹⁷, 640×1136³¹⁸, 750×1334³¹⁹, 800×480³²⁰, 800×600³²¹, 1024×768³²², 1024×1024³²³, 1152×864³²⁴, 1242×2208³²⁵, 1280×720³²⁶, 1280×800³²⁷, 1280×960³²⁸, 1280×1024³²⁹, 1366×768³³⁰, 1400×1050³³¹, 1440×900³³², 1600×1200³³³, 1680×1050³³⁴, 1680×1200³³⁵, 1920×1080³³⁶, 1920×1200³³⁷, 1920×1440³³⁸, 2560×1440³³⁹, 2880×1800³⁴⁰
without calendar: 320×480³⁴¹, 640×480³⁴², 640×1136³⁴³, 750×1334³⁴⁴, 800×480³⁴⁵, 800×600³⁴⁶, 1024×768³⁴⁷, 1024×1024³⁴⁸, 1152×864³⁴⁹, 1242×2208³⁵⁰, 1280×720³⁵¹, 1280×800³⁵², 1280×960³⁵³, 1280×1024³⁵⁴, 1366×768³⁵⁵, 1400×1050³⁵⁶, 1440×900³⁵⁷, 1600×1200³⁵⁸, 1680×1050³⁵⁹, 1680×1200³⁶⁰, 1920×1080³⁶¹, 1920×1200³⁶², 1920×1440³⁶³, 2560×1440³⁶⁴, 2880×1800³⁶⁵

Knitting For Summer

“I made multiple circles overlapping with close distances. The overall drawing looks like a clothing texture, for something you could wear in coming summer. Let’s have a nice summer.” — Designed by Philippe Brouard³⁶⁶ from France.

³⁶⁷

preview³⁶⁸
with calendar: 800×480³⁶⁹, 1024×768³⁷⁰, 1280×720³⁷¹, 1280×800³⁷², 1440×900³⁷³, 1600×1200³⁷⁴, 1920×1080³⁷⁵, 1920×1200³⁷⁶, 2560×1440³⁷⁷, 2880×1800³⁷⁸
without calendar: 800×480³⁷⁹, 1024×768³⁸⁰, 1280×720³⁸¹, 1280×800³⁸², 1440×900³⁸³, 1600×1200³⁸⁴, 1920×1080³⁸⁵, 1920×1200³⁸⁶, 2560×1440³⁸⁷, 2880×1800³⁸⁸

Periodic Table Of HTML5 Elements

“We wanted an easy reference guide to help navigate through HTML5 and that could be updateable” — Designed by Castus³⁸⁹ from the UK.

³⁹⁰

preview³⁹¹
with calendar: 1024×768³⁹², 1280×800³⁹³, 1280×1024³⁹⁴, 1366×768³⁹⁵, 1440×900³⁹⁶, 1600×900³⁹⁷, 1600×1200³⁹⁸, 1920×1080³⁹⁹, 1920×1200⁴⁰⁰, 2560×1440⁴⁰¹
without calendar: 1024×768⁴⁰², 1280×800⁴⁰³, 1280×1024⁴⁰⁴, 1366×768⁴⁰⁵, 1440×900⁴⁰⁶, 1600×900⁴⁰⁷, 1600×1200⁴⁰⁸, 1920×1080⁴⁰⁹, 1920×1200⁴¹⁰, 2560×1440⁴¹¹

Shine Your Light

“Shine your light, Before the fight, Just like the sun, Cause we don’t have to run.” — Designed by Anh Nguyet Tran⁴¹² from Vietnam.

⁴¹³

preview⁴¹⁴
with calendar: 768×1280⁴¹⁵, 1024×1024⁴¹⁶, 1280×800⁴¹⁷, 1280×1024⁴¹⁸, 1366×768⁴¹⁹, 1440×900⁴²⁰, 1600×1200⁴²¹, 1680×1050⁴²², 1680×1200⁴²³, 1920×1080⁴²⁴, 1920×1200⁴²⁵, 1920×1440⁴²⁶, 2560×1440⁴²⁷
without calendar: 768×1280⁴²⁸, 1024×1024⁴²⁹, 1280×800⁴³⁰, 1280×1024⁴³¹, 1366×768⁴³², 1440×900⁴³³, 1600×1200⁴³⁴, 1680×1050⁴³⁵, 1680×1200⁴³⁶, 1920×1080⁴³⁷, 1920×1200⁴³⁸, 1920×1440⁴³⁹, 2560×1440⁴⁴⁰

Lavender Is In The Air!

“June always reminds me of lavender – it just smells wonderful and fresh. For this wallpaper I wanted to create a simple, yet functional design that featured… you guessed it… lavender!” — Designed by Jon Phillips⁴⁴¹ from Canada.

⁴⁴²

preview⁴⁴³
with calendar: 320×480⁴⁴⁴, 640×480⁴⁴⁵, 800×480⁴⁴⁶, 800×600⁴⁴⁷, 1024×768⁴⁴⁸, 1024×1024⁴⁴⁹, 1152×864⁴⁵⁰, 1280×720⁴⁵¹, 1280×800⁴⁵², 1280×960⁴⁵³, 1280×1024⁴⁵⁴, 1400×1050⁴⁵⁵, 1440×900⁴⁵⁶, 1600×1200⁴⁵⁷, 1680×1050⁴⁵⁸, 1680×1200⁴⁵⁹, 1920×1080⁴⁶⁰, 1920×1200⁴⁶¹, 1920×1440⁴⁶², 2560×1440⁴⁶³
without calendar: 320×480⁴⁶⁴, 640×480⁴⁶⁵, 800×480⁴⁶⁶, 800×600⁴⁶⁷, 1024×768⁴⁶⁸, 1024×1024⁴⁶⁹, 1152×864⁴⁷⁰, 1280×720⁴⁷¹, 1280×800⁴⁷², 1280×960⁴⁷³, 1280×1024⁴⁷⁴, 1400×1050⁴⁷⁵, 1440×900⁴⁷⁶, 1600×1200⁴⁷⁷, 1680×1050⁴⁷⁸, 1680×1200⁴⁷⁹, 1920×1080⁴⁸⁰, 1920×1200⁴⁸¹, 1920×1440⁴⁸², 2560×1440⁴⁸³

Through The Savannah

“Giraffes are my favorite animal and June 21st is World Giraffe Day, so it was fitting to make it for this month.” — Designed by Megan Jones⁴⁸⁴ from Pennsylvania, USA.

⁴⁸⁵

preview⁴⁸⁶
with calendar: 1024×768⁴⁸⁷, 1152×864⁴⁸⁸, 1280×720⁴⁸⁹, 1280×800⁴⁹⁰, 1280×960⁴⁹¹, 1440×900⁴⁹², 1600×1200⁴⁹³, 1680×1050⁴⁹⁴, 1680×1200⁴⁹⁵, 1920×1080⁴⁹⁶, 1920×1200⁴⁹⁷, 1920×1440⁴⁹⁸, 2560×1440⁴⁹⁹
without calendar: 1024×768⁵⁰⁰, 1152×864⁵⁰¹, 1280×720⁵⁰², 1280×800⁵⁰³, 1280×960⁵⁰⁴, 1440×900⁵⁰⁵, 1600×1200⁵⁰⁶, 1680×1050⁵⁰⁷, 1680×1200⁵⁰⁸, 1920×1080⁵⁰⁹, 1920×1200⁵¹⁰, 1920×1440⁵¹¹, 2560×1440⁵¹²

Only True Love Stays

“June is my wedding anniversary so it has a special place in my heart. And blowing dandelion in the wind is an absolute joy!” — Designed by Thuy Truong⁵¹³ from the USA.

⁵¹⁴

preview⁵¹⁵
with calendar: 320×480⁵¹⁶, 1024×768⁵¹⁷, 1366×768⁵¹⁸, 1920×1080⁵¹⁹, 2560×1440⁵²⁰
without calendar: 320×480⁵²¹, 1024×768⁵²², 1366×768⁵²³, 1920×1080⁵²⁴, 2560×1440⁵²⁵

Scattered Leaves

⁵²⁷

preview⁵²⁸
with calendar: 320×480⁵²⁹, 640×480⁵³⁰, 800×480⁵³¹, 800×600⁵³², 1024×768⁵³³, 1024×1024⁵³⁴, 1152×864⁵³⁵, 1280×720⁵³⁶, 1280×800⁵³⁷, 1280×960⁵³⁸, 1280×1024⁵³⁹, 1366×768⁵⁴⁰, 1400×1050⁵⁴¹, 1440×900⁵⁴², 1600×1200⁵⁴³, 1680×1050⁵⁴⁴, 1680×1200⁵⁴⁵, 1920×1080⁵⁴⁶, 1920×1200⁵⁴⁷, 1920×1440⁵⁴⁸, 2560×1440⁵⁴⁹
without calendar: 320×480⁵⁵⁰, 640×480⁵⁵¹, 800×480⁵⁵², 800×600⁵⁵³, 1024×768⁵⁵⁴, 1024×1024⁵⁵⁵, 1152×864⁵⁵⁶, 1280×720⁵⁵⁷, 1280×800⁵⁵⁸, 1280×960⁵⁵⁹, 1280×1024⁵⁶⁰, 1366×768⁵⁶¹, 1400×1050⁵⁶², 1440×900⁵⁶³, 1600×1200⁵⁶⁴, 1680×1050⁵⁶⁵, 1680×1200⁵⁶⁶, 1920×1080⁵⁶⁷, 1920×1200⁵⁶⁸, 1920×1440⁵⁶⁹, 2560×1440⁵⁷⁰

Springtime Bubbles

“I wanted to create a spring/summer vibe and I thought bubbles were a great way to do this because they aren’t too cliche and many people can be seen blowing bubbles during this time of year.” — Designed by Kathleen Reilly⁵⁷¹ from United States.

⁵⁷²

preview⁵⁷³
with calendar: 320×480⁵⁷⁴, 640×480⁵⁷⁵, 800×480⁵⁷⁶, 800×600⁵⁷⁷, 1024×768⁵⁷⁸, 1024×1024⁵⁷⁹, 1152×864⁵⁸⁰, 1280×720⁵⁸¹, 1280×800⁵⁸², 1280×960⁵⁸³, 1280×1024⁵⁸⁴, 1400×1050⁵⁸⁵, 1440×900⁵⁸⁶, 1600×1200⁵⁸⁷, 1680×1050⁵⁸⁸, 1680×1200⁵⁸⁹, 1920×1080⁵⁹⁰, 1920×1200⁵⁹¹, 1920×1440⁵⁹², 2560×1440⁵⁹³, 1366×768⁵⁹⁴
without calendar: 320×480⁵⁹⁵, 640×480⁵⁹⁶, 800×480⁵⁹⁷, 800×600⁵⁹⁸, 1024×768⁵⁹⁹, 1024×1024⁶⁰⁰, 1152×864⁶⁰¹, 1280×720⁶⁰², 1280×800⁶⁰³, 1280×960⁶⁰⁴, 1280×1024⁶⁰⁵, 1400×1050⁶⁰⁶, 1440×900⁶⁰⁷, 1600×1200⁶⁰⁸, 1680×1050⁶⁰⁹, 1680×1200⁶¹⁰, 1920×1080⁶¹¹, 1920×1200⁶¹², 1920×1440⁶¹³, 2560×1440⁶¹⁴, 1366×768⁶¹⁵

Happiness Together, Forever

“June brings with the start of the wedding season and all the joy that togetherness brings to the world.” — Designed by Band Hire UK⁶¹⁶ from United Kingdom.

⁶¹⁷

preview⁶¹⁸
with calendar: 320×480⁶¹⁹, 800×600⁶²⁰, 1280×1024⁶²¹, 1366×768⁶²², 1400×1050⁶²³, 1600×1200⁶²⁴, 1680×1050⁶²⁵, 1680×1200⁶²⁶, 1920×1080⁶²⁷, 1920×1200⁶²⁸, 1920×1440⁶²⁹, 2560×1440⁶³⁰
without calendar: 320×480⁶³¹, 800×600⁶³², 1280×1024⁶³³, 1366×768⁶³⁴, 1400×1050⁶³⁵, 1600×1200⁶³⁶, 1680×1050⁶³⁷, 1680×1200⁶³⁸, 1920×1080⁶³⁹, 1920×1200⁶⁴⁰, 1920×1440⁶⁴¹, 2560×1440⁶⁴²

Hershel The Walking Dead

“I’m a huge fan of The Walking Dead, and so I decided to make a wallpaper of Hershel.” — Designed by Loïs Claassen⁶⁴³ from the Netherlands.

⁶⁴⁴

preview⁶⁴⁵
with calendar: 1366×768⁶⁴⁶, 1400×1050⁶⁴⁷, 1440×900⁶⁴⁸, 1600×1200⁶⁴⁹, 1680×1050⁶⁵⁰, 1680×1200⁶⁵¹, 1920×1020⁶⁵², 1920×1200⁶⁵³, 1920×1440⁶⁵⁴, 2560×1440⁶⁵⁵
without calendar: 1366×768⁶⁵⁶, 1400×1050⁶⁵⁷, 1440×900⁶⁵⁸, 1600×1200⁶⁵⁹, 1680×1050⁶⁶⁰, 1680×1200⁶⁶¹, 1920×1020⁶⁶², 1920×1200⁶⁶³, 1920×1440⁶⁶⁴, 2560×1440⁶⁶⁵

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month⁶⁶⁶!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

(cm)

Footnotes

The post Desktop Wallpaper Calendars: June 2015 appeared first on Smashing Magazine.

Categories: Others Tags:

Pure Inspiration: 33 New and Award-Winning Websites

May 31st, 2015 No comments

Creativity needs inspiration. Even the greatest designers on earth are nothing without some inspiration from here or there. Look at Android and iOS for example. Armies of designers work on both and yet – isn’t there a slight similarity? Anyway, that’s not the point. To fuel your creativity we have roamed the web fpr new and award-winning piecesof web craftsmanship. Look what we have found. The following specimen stem from around the globe, created by talented agencies and freelancers. All the sites are responsive yet draw a diversified picture of different industries. May the web become even more beautiful… 1. Totem 2. Catalogue-Interactif Bonobo 3. Nothing But Thieves 4. One Dollar Lesson 5. Five Minutes 6. Doriart Webdesign 7. Vangarde Music 8. Sons of Anarchy Tattoo Stories 9. RGB Media Webdesign-Agency 10. De Haus 11. Gogoro 12. adaptable 13. Trippeo 14. Let´s make History 15. Urban Influence 16. MoodBoard Film 17. Reebok – Be more Human 18. Easy Rocket Studio 19. Chedi Andermatt Residences 20. Celebrating Chinese New Year 2015 21. We are Zaion 22. Melanie Daveid 23. Österreich erleben 24. Sassi Holford 25. Bolig Reisen 26. DogStudio 27. FiberSensing 28. NUA Bikes 29. Emiliano Barri 30. RiotGames: Thunderdome 31. In […]

* You might also be interested in the following articles:

Categories: Others Tags:

Lining.js: Controlling Text Lines per CSS Selector

May 30th, 2015 No comments

The numerous available CSS selectors let us easily access almost each and every HTML element on any given page. The pseudo-element ::first-line even allows us to apply CSS properties to the first line of text in a document, no matter whether the line is automatically or manually wrapped. Unfortunately, besides ::first-line there are no selevtors to manipulate the second, third, last or whichever line. The JavaScript library Lining.js is here to pimp your possibilities. .line[last] Instead of ::last-line Similar to the selectors ::last-child and ::nth-child() that allow you to touch the last or any random child element, Lining.js adds behaiviors for lines of text. INstead of using the (non-existing) selectors ::last-line and ::nth-line(n), the library introduces the classes .line[last] and .line[index=”n”]. After having embedded the library into your document, start with assigning the data attribute data-lining to every text element you want to manipulate with Lining.js. THe attribute expects no value. 1 2 3

Lorem ipsum …

Then use these classes to individually markup lines within the text per CSS. 1 2 3 4 5 6 7 p .line[last] { color: red; } p .line[index=”2″] { font-weight: bold; } .line[last] and .line[index=”2″] active on a text In […]

* You might also be interested in the following articles:

Categories: Others Tags:

How To Use Autoloading And A Plugin Container In WordPress Plugins

May 29th, 2015 No comments

Building and maintaining¹ a WordPress plugin can be a daunting task. The bigger the codebase, the harder it is to keep track of all the working parts and their relationship to one another. And you can add to that the limitations imposed by working in an antiquated version of PHP, 5.2.

In this article we will explore an alternative way of developing WordPress plugins, using the lessons learned from the greater PHP community, the world outside WordPress. We will walk through the steps of creating a plugin and investigate the use of autoloading and a plugin container.

Let’s Begin

The first thing you need to do when creating a plugin is to give it a unique name. The name is important as it will be the basis for all our unique identifiers (function prefix, class prefix, textdomain, option prefix, etc.). The name should also be unique across the wordpress.org space. It won’t hurt if we make the name catchy. For our sample plugin I chose the name Simplarity, a play on the words “simple” and “clarity”.

We’ll assume you have a working WordPress installation already.

Folder Structure

First, create a directory named simplarity inside wp-content/plugins. Inside it create the following structure:

simplarity.php: our main plugin file
css/: directory containing our styles
js/: directory containing JavaScript files
languages/: directory that will contain translation files
src/: directory containing our classes
views/: directory that will contain our plugin view files

The Main Plugin File

Open the main plugin file, simplarity.php, and add the plugin information header:

<?php
/*
Plugin Name: Simplarity
Description: A plugin for smashingmagazine.com
Version: 1.0.0
License: GPL-2.0+
*/

This information is enough for now. The plugin name, description, and version will show up in the plugins area of WordPress admin. The license details are important to let your users know that this is an open source plugin. A full list of header information can found in the WordPress codex².

Autoloading

Autoloading allows you to automatically load classes using an autoloader so you don’t have to manually include the files containing the class definitions. For example, whenever you need to use a class, you need to do the following:

require_once '/path/to/classes/class-container.php';
require_once '/path/to/classes/class-view.php';
require_once '/path/to/classes/class-settings-page.php';

$plugin = new Container();
$view = new View();
$settings_page = new SettingsPage();

With autoloading, you can use an autoloader instead of multiple require_once³ statements. It also eliminates the need to update these require statements whenever you add, rename, or change the location of your classes. That’s a big plus for maintainability.

Adopting The PEAR Naming Convention For Class Names

Before we create our autoloader we need to create a convention for our class names and their location in the file system. This will aid the autoloader in mapping out the class to its source file.

For our class names we will adopt the PEAR naming convention⁴. The gist is that class names are alphabetic characters in StudlyCaps. Each level of the hierarchy is separated with a single underscore. Class names will directly map to the directories in which they are stored.

It’s easier to illustrate it using examples:

A class named Simplarity_Plugin would be defined in the file src/Simplarity/Plugin.php.
A class named Simplarity_SettingsPage would be defined in src/Simplarity/SettingsPage.php.

As you can see with this convention, the autoloader will just replace the underscores with directory separators to locate the class definition.

What About The WordPress Coding Standards For Class Names?

As you might be aware, WordPress has its own naming convention⁵ for class names. It states:

Class names should use capitalized words separated by underscores. Any acronyms should be all upper case. […] Class file names should be based on the class name with class- prepended and the underscores in the class name replaced with hyphens, for example WP_Error becomes class-wp-error.php

I know that we should follow the standards of the platform that we are developing on. However, we suggest using the PEAR naming convention because:

WP coding standards do not cover autoloading.
WP does not follow its own coding standards. Examples: class.wp-scripts.php and SimplePie. This is understandable since WordPress grew organically.
Interoperability allows you to easily use third-party libraries that follow the PEAR naming convention, like Twig. And conversely, you can easily port your code to other libraries sharing the same convention.
It’s important your autoloader is future-ready. When WordPress decides to up the ante and finally move to PHP 5.3 as its minimum requirement, you can easily update the code to be PSR-0 or PSR-4-compatible and take advantage of the built-in namespaces instead of using prefixes. This is a big plus for interoperability.

Note that we are only using this naming convention for classes. The rest of our code will still follow the WordPress coding standards. It’s important to follow and respect the standards of the platform that we are developing on.

Now that we have fully covered the naming convention, we can finally build our autoloader.

Building Our Autoloader

Open our main plugin file and add the following code below the plugin information header:

spl_autoload_register( 'simplarity_autoloader' );
function simplarity_autoloader( $class_name ) {
  if ( false !== strpos( $class_name, 'Simplarity' ) ) {
    $classes_dir = realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR . 'src' . DIRECTORY_SEPARATOR;
    $class_file = str_replace( '_', DIRECTORY_SEPARATOR, $class_name ) . '.php';
    require_once $classes_dir . $class_file;
  }
}

At the heart of our autoloading mechanism is PHP’s built in spl_autoload_register⁶ function. All it does is register a function to be called automatically when your code references a class that hasn’t been loaded yet.

The first line tells spl_autoload_register to register our function named simplarity_autoloader:

spl_autoload_register( 'simplarity_autoloader' );

Next we define the simplarity_autoloader function:

function simplarity_autoloader( $class_name ) {
  …
}

Notice that it accepts a $class_name parameter. This parameter holds the class name. For example when you instantiate a class using $plugin = new Simplarity_Plugin(), $class_name will contain the string “Simplarity_Plugin”. Since we are adding this function in the global space, it’s important that we have it prefixed with simplarity_.

The next line checks if $classname contains the string “Simplarity” which is our top level namespace:

if ( false !== strpos( $class_name, 'Simplarity' ) ) {

This will ensure that the autoloader will only run on our classes. Without this check, our autoloader will run every time an unloaded class is referenced, even if the class is not ours, which is not ideal.

The next line constructs the path to the directory where our classes reside:

$classes_dir = realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR . 'src' . DIRECTORY_SEPARATOR;

It uses WP’s plugin_dir_path⁷ to get the plugin root directory. __FILE__ is a magic constant⁸ that contains the full path and filename of the current file. DIRECTORY_SEPARATOR is a predefined constant that contains either a forward slash or backslash depending on the OS your web server is on. We also use realpath⁹ to normalize the file path.

This line resolves the path to the class definition file:

$class_file = str_replace( '_', DIRECTORY_SEPARATOR, $class_name ) . '.php';

It replaces the underscore (_) in $class_name with the directory separator and appends .php.

Finally, this line builds the file path to the definition and includes the file using require_once:

require_once $classes_dir . $class_file;

That’s it! You now have an autoloader. Say goodbye to long lines of require_once statements.

Plugin Container

A plugin container is a special class that holds together our plugin code. It simplifies the interaction between the many working parts of your code by providing a centralized location to manage the configuration and objects.

Uses Of Our Plugin Container

Here are the things we can expect from the plugin container:

Store global parameters in a single location

Often you’ll find this code in plugins:

define( 'SIMPLARITY_VERSION', '1.0.0' );
define( 'SIMPLARITY_PATH', realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR );
define( 'SIMPLARITY_URL', plugin_dir_url( __FILE__ ) );

Instead of doing that, we could do this instead:

$plugin = new Simplarity_Plugin();
$plugin['version] = '1.0.0';
$plugin['path'] = realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR;
$plugin['url'] = plugin_dir_url( __FILE__ );

This has the added benefit of not polluting the global namespace with our plugin’s constants, which in most cases aren’t needed by other plugins.

Store objects in a single location

Instead of scattering our class instantiations everywhere in our codebase we can just do this in a single location:
```
$plugin = new Simplarity_Plugin();
/…/
$plugin['scripts'] = new Simplarity_Scripts(); // A class that loads javascript files
```

Service definitions

This is the most powerful feature of the container. A service is an object that does something as part of a larger system. Services are defined by functions that return an instance of an object. Almost any global object can be a service.

$plugin['settings_page'] = function ( $plugin ) {
  return new SettingsPage( $plugin['settings_page_properties'] );
};

Services result in lazy initialization whereby objects are only instantiated and initialized when needed.

It also allows us to easily implement a self-resolving dependency injection design. An example:

$plugin = new Plugin();
$plugin['door_width'] = 100;
$plugin['door_height'] = 500;
$plugin['door_size'] = function ( $plugin ) {
  return new DoorSize( $plugin['door_width'], $plugin['door_height'] );
};
$plugin['door'] = function ( $plugin ) {
  return new Door( $plugin['door_size'] );
};
$plugin['window'] = function ( $plugin ) {
  return new Window();
};
$plugin['house'] = function ( $plugin ) {
  return new House( $plugin['door'], $plugin['window'] );
};
$house = $plugin['house'];

This is roughly equivalent to:

$door_width = 100;
$door_height = 500;
$door_size = new DoorSize( $door_width, $door_height );
$door = new Door( $door_size );
$window = new Window();
$house = new House( $door, $window );

Whenever we get an object, as in $house = $plugin['house']; , the object is created (lazy initialization) and dependencies are resolved automatically.

Building The Plugin Container

Let’s start by creating the plugin container class. We will name it “Simplarity_Plugin”. As our naming convention dictates, we should create a corresponding file: src/Simplarity/Plugin.php.

Open Plugin.php and add the following code:

<?php
class Simplarity_Plugin implements ArrayAccess {
  protected $contents;
    
  public function __construct() {
    $this->contents = array();
  }
  
  public function offsetSet( $offset, $value ) {
    $this->contents[$offset] = $value;
  }

  public function offsetExists($offset) {
    return isset( $this->contents[$offset] );
  }

  public function offsetUnset($offset) {
    unset( $this->contents[$offset] );
  }

  public function offsetGet($offset) {
    if( is_callable($this->contents[$offset]) ){
      return call_user_func( $this->contents[$offset], $this );
    }
    return isset( $this->contents[$offset] ) ? $this->contents[$offset] : null;
  }
  
  public function run(){ 
    foreach( $this->contents as $key => $content ){ // Loop on contents
      if( is_callable($content) ){
        $content = $this[$key];
      }
      if( is_object( $content ) ){
        $reflection = new ReflectionClass( $content );
        if( $reflection->hasMethod( 'run' ) ){
          $content->run(); // Call run method on object
        }
      }
    }
  }
}

The class implements the ArrayAccess interface:

class Simplarity_Plugin implements ArrayAccess {

This allows us to use it like PHP’s array:

$plugin = new Simplarity_Plugin();
$plugin['version'] = '1.0.0'; // Simplicity is beauty

The functions offsetSet, offsetExists, offsetUnset and offsetGet are required by ArrayAccess to be implemented. The run function will loop through the contents of the container and run the runnable objects.

To better illustrate our plugin container, let’s start by building a sample plugin.

Example Plugin: A Settings Page

This plugin will add a settings page named “Simplarity” under WordPress Admin ? Settings.

Let’s go back to the main plugin file. Open up simplarity.php and add the following code. Add this below the autoloader code:

add_action( 'plugins_loaded', 'simplarity_init' ); // Hook initialization function
function simplarity_init() {
  $plugin = new Simplarity_Plugin(); // Create container
  $plugin['path'] = realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR;
  $plugin['url'] = plugin_dir_url( __FILE__ );
  $plugin['version'] = '1.0.0';
  $plugin['settings_page_properties'] = array( 
    'parent_slug' => 'options-general.php',
    'page_title' =>  'Simplarity',
    'menu_title' =>  'Simplarity',
    'capability' => 'manage_options',
    'menu_slug' => 'simplarity-settings',
    'option_group' => 'simplarity_option_group',
    'option_name' => 'simplarity_option_name'
  );
  $plugin['settings_page'] = new Simplarity_SettingsPage( $plugin['settings_page_properties'] );
  $plugin->run();
}

Here we use WP’s add_action to hook our function simplarity_init into plugins_loaded:

add_action( 'plugins_loaded', 'simplarity_init' );

This is important as this will make our plugin overridable by using remove_action. An example use case would be a premium plugin overriding the free version.

Function simplarity_init contains our plugin’s initialization code. At the start, we simply instantiate our plugin container:

$plugin = new Simplarity_Plugin();

These lines assign global configuration data:

$plugin['path'] = realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR;
$plugin['url'] = plugin_dir_url( __FILE__ );
$plugin['version'] = '1.0.0';

The plugin path contains the full path to our plugin, the url contains the URL to our plugin directory. They will come in handy whenever we need to include files and assets. version contains the current version of the plugin that should match the one in the header info. Useful whenever you need to use the version in code.

This next code assigns various configuration data to settings_page_properties:

$plugin['settings_page_properties'] = array(
  'parent_slug' => 'options-general.php',
  'page_title' =>  'Simplarity',
  'menu_title' =>  'Simplarity',
  'capability' => 'manage_options',
  'menu_slug' => 'simplarity-settings',
  'option_group' => 'simplarity_option_group',
  'option_name' => 'simplarity_option_name'
);

These configuration data are related to WP settings API¹⁰.

This next code instantiates the settings page, passing along settings_page_properties:

$plugin['settings_page'] = new Simplarity_SettingsPage( $plugin['settings_page_properties'] );

The run method is where the fun starts:

$plugin->run();

It will call Simplarity_SettingsPage‘s own run method.

The `Simplarity_SettingsPage` Class

Now we need to create the Simplarity_SettingsPage class. It’s a class that groups together the settings API functions.

Create a file named SettingsPage.php in src/Simplarity/. Open it and add the following code:

<?php
class Simplarity_SettingsPage {
  protected $settings_page_properties;

  public function __construct( $settings_page_properties ){
    $this->settings_page_properties = $settings_page_properties;
  }

  public function run() {
    add_action( 'admin_menu', array( $this, 'add_menu_and_page' ) );
    add_action( 'admin_init', array( $this, 'register_settings' ) );
  }

  public function add_menu_and_page() { 

    add_submenu_page(
      $this->settings_page_properties['parent_slug'],
      $this->settings_page_properties['page_title'],
      $this->settings_page_properties['menu_title'], 
      $this->settings_page_properties['capability'],
      $this->settings_page_properties['menu_slug'],
      array( $this, 'render_settings_page' )
    );
  }
    
  public function register_settings() { 
    
    register_setting(
      $this->settings_page_properties['option_group'],
      $this->settings_page_properties['option_name']
    );   
  }
   
  public function get_settings_data(){
    return get_option( $this->settings_page_properties['option_name'], $this->get_default_settings_data() );
  }
    
  public function render_settings_page() {
    $option_name = $this->settings_page_properties['option_name'];
    $option_group = $this->settings_page_properties['option_group'];
    $settings_data = $this->get_settings_data();
    ?>
    <div class="wrap">
      <h2>Simplarity</h2>
      <p>This plugin is using the settings API.</p>
      <form method="post" action="options.php">
        <?php
        settings_fields( $this->plugin['settings_page_properties']['option_group']);
        ?>
        <table class="form-table">
          <tr>
              <th><label for="textbox">Textbox:</label></th>
              <td>
                <input type="text" id="textbox"
                  name="<?php echo esc_attr( $option_name."[textbox]" ); ?>"
                  value="<?php echo esc_attr( $settings_data['textbox'] ); ?>" />
              </td>
          </tr>
        </table>
        <input type="submit" name="submit" id="submit" class="button button-primary" value="Save Options">
      </form>
    </div>
    <?php
  }
   
  public function get_default_settings_data() {
    $defaults = array();
    $defaults['textbox'] = '';
      
    return $defaults;
  }
}

The class property $settings_page_properties stores the settings related to WP settings API:

<?php
class Simplarity_SettingsPage {
  protected $settings_page_properties;

The constructor function accepts the settings_page_properties and stores it:

public function __construct( $settings_page_properties ){
  $this->settings_page_properties = $settings_page_properties;
}

The values are passed from this line in the main plugin file:

$plugin['settings_page'] = new Simplarity_SettingsPage( $plugin['settings_page_properties'] );

The run function is use to run startup code:

public function run() {
  add_action( 'admin_menu', array( $this, 'add_menu_and_page' ) );
  add_action( 'admin_init', array( $this, 'register_settings' ) );
}

The most likely candidate for startup code are filters¹¹ and action hooks¹². Here we add the action hooks related to our settings page.
Do not confuse this run method with the run method of the plugin container. This run method belongs to the settings page class.

This line hooks the add_menu_and_page function on to the admin_menu action:

add_action( 'admin_menu', array( $this, 'add_menu_and_page' ) );

Function add_submenu_page in turn calls WP’s add_submenu_page¹³ function to add a link under the WP Admin ? Settings:

public function add_menu_and_page() { 

  add_submenu_page(
    $this->settings_page_properties['parent_slug'],
    $this->settings_page_properties['page_title'],
    $this->settings_page_properties['menu_title'], 
    $this->settings_page_properties['capability'],
    $this->settings_page_properties['menu_slug'],
    array( $this, 'render_settings_page' )
  );

}

As you can see, we are pulling the info from our class property $settings_page_properties which we specified in the main plugin file.

The parameters for add_submenu_page are:

parent_slug: slug name for the parent menu
page_title: text to be displayed in the </code> element of the page when the menu is selected</li> <li><code>menu_title</code>: text to be used for the menu</li> <li><code>capability</code>: the capability required for this menu to be displayed to the user</li> <li><code>menu_slug</code>: slug name to refer to this menu by (should be unique for this menu)</li> <li><code>function</code>: function to be called to output the content for this page</li> </ul> <p>This line hooks the <code>register_settings</code> function on to the <code>admin_init</code> action:</p> <pre><code>add_action( 'admin_init', array( $this, 'register_settings' ) );</code></pre> <p><code>array( $this, 'register_settings' )</code> means to call <code>register_settings</code> on <code>$this</code>, which points to our <code>SettingsPage</code> instance.</p> <p>The <code>register_settings</code> then calls WP’s <code>register_setting</code> to register a setting:</p> <pre><code>public function register_settings() { register_setting( $this->settings_page_properties['option_group'], $this->settings_page_properties['option_name'] ); }</code></pre> <p>Function <code>render_settings_page</code> is responsible for rendering the page:</p> <pre><code>public function render_settings_page() { $option_name = $this->settings_page_properties['option_name']; $option_group = $this->settings_page_properties['option_group']; $settings_data = $this->get_settings_data(); ?> <div class="wrap"> <h2>Simplarity</h2> <p>This plugin is using the settings API.</p> <form method="post" action="options.php"> <?php settings_fields( $option_group ); ?> <table class="form-table"> <tr> <th><label for="textbox">Textbox:</label></th> <td> <input type="text" id="textbox" name="<?php echo esc_attr( $option_name."[textbox]" ); ?>" value="<?php echo esc_attr( $settings_data['textbox'] ); ?>" /> </td> </tr> </table> <input type="submit" name="submit" id="submit" class="button button-primary" value="Save Options"> </form> </div> <?php }</code></pre> <p>We hooked <code>render_settings_page</code> earlier using <code>add_submenu_page</code>.</p> <p>Function <code>get_settings_data</code> is a wrapper function for <code>get_option</code>:</p> <pre><code>public function get_settings_data(){ return get_option( $this->plugin['settings_page_properties']['option_name'] ); }</code></pre> <p>This is to easily get the settings data with a single function call.</p> <p>Function <code>get_default_settings_data</code> is use to supply us with our own default values:</p> <pre><code>public function get_default_settings_data() { $defaults = array(); $defaults['textbox'] = ''; return $defaults; }</code></pre> <h3>Abstracting Our Settings Page Class</h3> <p>Right now our settings page class cannot be reused if you want to create another subpage. Let’s move the reusable code for the settings page to another class.</p> <p>Let’s call this class <code>Simplarity_WpSubPage</code>. Go ahead and create the file <i>src/Simplarity/WpSubPage.php</i>.</p> <p>Now add the code below:</p> <pre><code><?php abstract class Simplarity_WpSubPage { protected $settings_page_properties; public function __construct( $settings_page_properties ){ $this->settings_page_properties = $settings_page_properties; } public function run() { add_action( 'admin_menu', array( $this, 'add_menu_and_page' ) ); add_action( 'admin_init', array( $this, 'register_settings' ) ); } public function add_menu_and_page() { add_submenu_page( $this->settings_page_properties['parent_slug'], $this->settings_page_properties['page_title'], $this->settings_page_properties['menu_title'], $this->settings_page_properties['capability'], $this->settings_page_properties['menu_slug'], array( $this, 'render_settings_page' ) ); } public function register_settings() { register_setting( $this->settings_page_properties['option_group'], $this->settings_page_properties['option_name'] ); } public function get_settings_data(){ return get_option( $this->settings_page_properties['option_name'], $this->get_default_settings_data() ); } public function render_settings_page(){ } public function get_default_settings_data() { $defaults = array(); return $defaults; } } </code></pre> <p>Notice that it is an abstract class. This will prevent intantiating this class directly. To use it you need to extend it first with another class, which in our case is <code>Simplarity_SettingsPage</code>:</p> <pre><code><?php class Simplarity_SettingsPage extends Simplarity_WpSubPage { public function render_settings_page() { $option_name = $this->settings_page_properties['option_name']; $option_group = $this->settings_page_properties['option_group']; $settings_data = $this->get_settings_data(); ?> <div class="wrap"> <h2>Simplarity</h2> <p>This plugin is using the settings API.</p> <form method="post" action="options.php"> <?php settings_fields( $option_group ); ?> <table class="form-table"> <tr> <th><label for="textbox">Textbox:</label></th> <td> <input type="text" id="textbox" name="<?php echo esc_attr( $option_name."[textbox]" ); ?>" value="<?php echo esc_attr( $settings_data['textbox'] ); ?>" /> </td> </tr> </table> <input type="submit" name="submit" id="submit" class="button button-primary" value="Save Options"> </form> </div> <?php } public function get_default_settings_data() { $defaults = array(); defaults['textbox'] = ''; return $defaults; } } </code></pre> <p>The only functions we have implemented are <code>render_settings_page</code> and <code>get_default_settings_data</code>, which are customized to this settings page.</p> <p>To create another WP settings page you’ll just need to create a class and extend the <code>Simplarity_WpSubPage</code>. And implement your own <code>render_settings_page</code> and <code>get_default_settings_data</code>.</p> <h3>Defining A Service</h3> <p>The power of the plugin container is in defining services. A service is a function that contains instantiation and initialization code that will return an object. Whenever we pull a service from our container, the service function is called and will create the object for you. The object is only created when needed. This is called lazy initialization.</p> <p>To better illustrate this, let’s define a service for our settings page.</p> <p>Open <i>simplarity.php</i> and add this function below the Simplarity code:</p> <pre><code>function simplarity_service_settings( $plugin ){ $object = new Simplarity_SettingsPage( $plugin['settings_page_properties'] ); return $object; }</code></pre> <p>Notice that our service function has a <code>$plugin</code> parameter which contains our plugin container. This allows us to access all configuration, objects, and services that have been stored in our plugin container. We can see that the <code>Simplarity_SettingsPage</code> has a dependency on <code>$plugin['settings_page_properties']</code>. We inject this dependency to <code>Simplarity_SettingsPage</code> here. This is an example of dependency injection. Dependency injection is a practice where objects are designed in a manner where they receive instances of the objects from other pieces of code, instead of constructing them internally. This improves decoupling of code.</p> <p>Now let’s replace this line in <code>simplarity_init</code>:</p> <pre><code>$plugin['settings_page'] = new Simplarity_SettingsPage( $plugin['settings_page_properties'] );</code></pre> <p>with a service definition assignment:</p> <pre><code>$plugin['settings_page'] = 'simplarity_service_settings'</code></pre> <p>So instead of assigning our object instance directly, we assign the name of our function as string. Our container handles the rest. </p> <h3>Defining A Shared Service</h3> <p>Right now, every time we get <code>$plugin['settings_page']</code>, a new instance of <code>Simplarity_SettingsPage</code> is returned. Ideally, <code>Simplarity_SettingsPage</code> should only be instantiated once as we are using WP hooks, which in turn should only be registered once.</p> <p>To solve this we use a shared service. A shared service will return a new instance of an object on first call, on succeeding calls it will return the same instance.</p> <p>Let’s create a shared service using a static variable:</p> <pre><code>function simplarity_service_settings( $plugin ){ static $object; if (null !== $object) { return $object; } $object = new Simplarity_SettingsPage( $plugin['settings_page_properties'] ); return $object; }</code></pre> <p>On first call, <code>$object</code> is null, and on succeeding calls it will contain the instance of the object created on first call. Notice that we are using a static variable. A static variable exists only in a local function scope, but it does not lose its value when program execution leaves this scope.</p> <p>That’s it.</p> <p>Now if you activate the plugin, an admin menu will appear in Admin ? Settings named “Simplarity”. Click on it and you will be taken to the settings page we have created.</p> <figure><sup><a class="colorbox" href="http://www.smashingmagazine.com/#14">14</a></sup><br /><figcaption>Settings Page In Action</figcaption></figure> <h3>The Future: PHP 5.3+</h3> <p>Earlier we mentioned that our class naming convention was future-ready. In this section we will discuss how our codebase will work in PHP version 5.3 and up. Two of the best features that have graced the PHP world are namespaces and anonymous functions.</p> <h4>Namespaces</h4> <p>PHP does not allow two classes or functions to share the same name. When this happens, a name collision occurs and causes a nasty error.</p> <p>With namespaces you can have the same class names as long as they live in their own namespace. A good analogy for namespaces are the folders you have in your OS. You cannot have files with the same name in one folder. However, you can have the same filenames in different folders.</p> <p>With namespaces, class and function names won’t need unique prefixes anymore.</p> <h4>Anonymous Functions</h4> <p>Anonymous functions, also known as <strong>closures</strong>, allow the creation of functions which have no specified name. They are most useful as the value of callback parameters, but they have many other uses. You can also store closures in variables.</p> <p>Here’s an example of closure:</p> <pre><code><?php $greet = function($name) { printf("Hello %srn", $name); }; $greet('World'); $greet('PHP');</code></pre> <h3>Using Namespaces In Classes</h3> <p>Let’s go ahead and use namespaces in our class definitions. Open up the following files in <i>src/Simplarity:</i></p> <ul> <li><i>Plugin.php</i></li> <li><i>SettingsPage.php</i></li> <li><i>WpSubPage.php</i></li> </ul> <p>In each of these files, add a namespace declaration on top and remove the “Simplarity_” prefix on class names:</p> <pre><code>// Plugin.php namespace Simplarity; class Plugin { ... // SettingsPage.php namespace Simplarity; class SettingsPage extends WpSubPage { ... // WpSubPage.php namespace Simplarity; abstract class WpSubPage { ... </code></pre> <p>Since we have updated our class names we also need to update our class instantiations in <i>simplarity.php</i>. We do this by deleting the prefixes:</p> <pre><code>function simplarity_init() { $plugin = new Plugin(); ... } ... function simplarity_service_settings( $plugin ){ ... $object = new SettingsPage( $plugin['settings_page_properties'] ); return $object; } </code></pre> <p>By default, PHP will try to load the class from the root namespace so we need to tell it about our namespaced classes. We add this to the top of <i>simplarity.php</i> just above the autoloader code:</p> <pre><code>use SimplarityPlugin; use SimplaritySettingsPage; </code></pre> <p>This is called importing/aliasing with the <a class="colorbox" href="http://php.net/manual/en/language.namespaces.importing.php">use operator</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#15">15</a></sup>.</p> <h3>Updating The Autoloader</h3> <p>Open up <i>simplarity.php</i> and change this line in the autoloader from:</p> <pre><code>$class_file = str_replace( '_', DIRECTORY_SEPARATOR, $class_name ) . '.php';</code></pre> <p>to:</p> <pre><code>$class_file = str_replace( '', DIRECTORY_SEPARATOR, $class_name ) . '.php';</code></pre> <p>Remember that in 5.2 code we are using underscores as hierarchy separators. For 5.3+ we are using namespaces which use backslash “” as hierarchy separators. Thus we simply swap “_” for “”. We use another backslash to escape the original one: “”.</p> <h3>Updating Our Service Definitions To Use Anonymous Functions</h3> <p>We can now replace the global functions we created for our service definitions with anonymous functions. So instead of doing this:</p> <pre><code>function simplarity_init() { ... $plugin['settings_page'] = 'simplarity_service_settings'; ... } ... function simplarity_service_settings( $plugin ){ static $object; if (null !== $object) { return $object; } $object = new Simplarity_SettingsPage( $plugin['settings_page_properties'] ); return $object; }</code></pre> <p>we can just replace this with an inline anonymous function:</p> <pre><code>function simplarity_init() { $plugin = new Plugin(); ... $plugin['settings_page'] = function ( $plugin ) { static $object; if (null !== $object) { return $object; } return new SettingsPage( $plugin['settings_page_properties'] ); }; ... } </code></pre> <h3>Using Pimple As A Plugin Container</h3> <p>Pimple is a small dependency injection (DI) container for PHP 5.3+. Pimple has the same syntax as our simple plugin container. In fact our plugin container was inspired by Pimple. In this part, we will extend Pimple and use it.</p> <p>Download <a class="colorbox" href="https://raw.githubusercontent.com/silexphp/Pimple/master/src/Pimple/Container.php">Pimple container from GitHub</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#16">16</a></sup> and save it in <i>src/Simplarity/Pimple.php</i>.</p> <p>Open up <i>Pimple.php</i> and replace the namespace and the classname to:</p> <pre><code>... namespace Simplarity; /** * Container main class. * * @author Fabien Potencier */ class Pimple implements ArrayAccess ... </code></pre> <p>Open up <i>Plugin.php</i> and replace all the code with:</p> <pre><code><?php namespace Simplarity; class Plugin extends Pimple { public function run(){ foreach( $this->values as $key => $content ){ // Loop on contents $content = $this[$key]; if( is_object( $content ) ){ $reflection = new ReflectionClass( $content ); if( $reflection->hasMethod( 'run' ) ){ $content->run(); // Call run method on object } } } } } </code></pre> <p>Now let’s change the service definition in <i>simplarity.php</i> to:</p> <pre><code>$plugin['settings_page'] = function ( $plugin ) { return new SettingsPage( $plugin['settings_page_properties'] ); }; </code></pre> <p>By default, each time you get a service, Pimple returns the same instance of it. If you want a different instance to be returned for all calls, wrap your anonymous function with the <code>factory()</code> method:</p> <pre><code>$plugin['image_resizer'] = $plugin->factory(function ( $plugin ) { return new ImageResizer( $plugin['image_dir'] ); }); </code></pre> <h3>Conclusion</h3> <p>The PHP community is big. A lot of best practices have been learned over the years. It’s good to always look beyond the walled garden of WordPress to look for answers. With autoloading and a plugin container we are one step closer to better code.</p> <h4>Code Samples</h4> <ul> <li><a class="colorbox" href="https://github.com/kosinix/simplarity">Simplarity: settings page</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#17">17</a></sup></li> <li><a class="colorbox" href="https://github.com/kosinix/simplarity-php53">Simplarity: settings page (PHP5.3+)</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#18">18</a></sup></li> </ul> <h4>Resources</h4> <ul> <li><a class="colorbox" href="http://pear.php.net/manual/en/standards.naming.php">PEAR naming standards</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#19">19</a></sup></li> <li><a class="colorbox" href="http://daylerees.com/php-namespaces-explained">Namespaces explanation</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#20">20</a></sup></li> <li><a class="colorbox" href="https://github.com/silexphp/Pimple">Pimple (a small DI container)</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#21">21</a></sup></li> </ul> <p><em>(dp, og, il)</em></p> <h4>Footnotes</h4> <ol> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-1">1 https://shop.smashingmagazine.com/products/wordpress-maintenance-keeping-your-website-safe-and-efficient</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-2">2 http://codex.wordpress.org/Writing_a_Plugin</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-3">3 http://php.net/manual/en/function.require-once.php</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-4">4 http://pear.php.net/manual/en/standards.naming.php</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-5">5 https://make.wordpress.org/core/handbook/coding-standards/php/#naming-conventions</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-6">6 http://php.net/manual/en/function.spl-autoload-register.php</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-7">7 http://codex.wordpress.org/Function_Reference/plugin_dir_path</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-8">8 http://php.net/manual/en/language.constants.predefined.php</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-9">9 http://php.net/manual/en/function.realpath.php</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-10">10 http://codex.wordpress.org/Settings_API</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-11">11 http://codex.wordpress.org/Plugin_API/Filter_Reference</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-12">12 http://codex.wordpress.org/Plugin_API/Hooks</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-13">13 http://codex.wordpress.org/add_submenu_page</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-14">14 http://www.kosinix.com/wp-content/uploads/2015/02/simplarity1.png</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-15">15 http://php.net/manual/en/language.namespaces.importing.php</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-16">16 https://raw.githubusercontent.com/silexphp/Pimple/master/src/Pimple/Container.php</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-17">17 https://github.com/kosinix/simplarity</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-18">18 https://github.com/kosinix/simplarity-php53</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-19">19 http://pear.php.net/manual/en/standards.naming.php</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-20">20 http://daylerees.com/php-namespaces-explained</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-21">21 https://github.com/silexphp/Pimple</a></li> </ol> <p>The post <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/2015/05/29/how-to-use-autoloading-and-a-plugin-container-in-wordpress-plugins/">How To Use Autoloading And A Plugin Container In WordPress Plugins</a> appeared first on <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/">Smashing Magazine</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-32228"> <h2><a class="title" href="http://www.webmastersgallery.com/2015/05/29/how-does-googles-new-ranking-factor-mobile-friendly-affect-your-website/" rel="bookmark">How Does Google’s New Ranking Factor Mobile-Friendly Affect Your Website?</a></h2> <div class="info"> <span class="date">May 29th, 2015</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2015/05/29/how-does-googles-new-ranking-factor-mobile-friendly-affect-your-website/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a class="colorbox" href="http://feedproxy.google.com/~r/Noupe/~3/SsgqQIC1lS4/how-does-googles-new-ranking-factor-mobile-friendly-affect-your-website-91349.html"></a></div> <p>Google has been changing its search algorithm time and again to deliver better search results. Factors like keywords, link building, and loading performance play a key role in how Google ranks a website. On April 21st Google officially issued a new ranking factor: the mobile-friendliness of a website. How is this going to affect site operators and what does mobile-friendliness mean from Google’s point of view? Increasing Importance of Mobile Web It shouldn’t come as a surprise that Google has now officially introduced this new ranking factor. We’re using smartphones and tablets more frequently to search the web. Indeed, the same applies to the Google search. It is understandable that Google wants to prioritize websites for mobile devices that can be optimally displayed on them. This website is mobile friendly 😉 A while ago, Google started labeling websites that are optimized for mobile devices in its mobile search results. It makes no difference if a website provides a separate mobile version or a responsive design. If there’s a separate mobile version, Google will only feature this in the search results and the desktop version will be omitted. The mobile-friendly factor doesn’t affect the desktop version of a Google search. Generally, […]</p> <div> <div><span>*</span> You might also be interested in the following articles:</div> <ul> <li><a class="colorbox" href="http://www.noupe.com/design/is-your-responsive-design-mobile-website-delivering-acceptable-load-times-82539.html">Is your Responsive Design Mobile Website Delivering Acceptable Load…</a></li> <li><a class="colorbox" href="http://www.noupe.com/design/google-web-fundamentals-free-handbook-for-multi-device-web-design-in-the-making-82003.html"></a><a class="colorbox" href="http://www.noupe.com/design/google-web-fundamentals-free-handbook-for-multi-device-web-design-in-the-making-82003.html">Google Web Fundamentals: Free Handbook for Multi-Device Web Design in…</a></li> <li><a class="colorbox" href="http://www.noupe.com/inspiration/infographics/advertising-for-mobile-on-the-rise-infographic-74263.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2012%2F12%2Fadvertisers-guide-to-mobile-infographic-TEASER-1.png&w=250&h=200&zc=1&q=75" alt="Advertising For Mobile On The Rise [Infographic]" title="Advertising For Mobile On The Rise [Infographic]" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/inspiration/infographics/advertising-for-mobile-on-the-rise-infographic-74263.html">Advertising For Mobile On The Rise [Infographic]</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/review-js-changes-viewports-in-responsive-designs-72602.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2012%2F10%2Freviewjs.jpeg&w=250&h=200&zc=1&q=75" alt="ReView.js Changes Viewports In Responsive Designs With a Single Mouse Click" title="ReView.js Changes Viewports In Responsive Designs With a Single Mouse Click" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/development/review-js-changes-viewports-in-responsive-designs-72602.html">ReView.js Changes Viewports In Responsive Designs With a Single Mouse…</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/leaflet-interactive-maps-with-javascript-and-openstreetmap-75957.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2013%2F04%2Fleaflet-w550.jpg&w=250&h=200&zc=1&q=75" alt="Leaflet: Interactive Maps with JavaScript and OpenStreetMap" title="Leaflet: Interactive Maps with JavaScript and OpenStreetMap" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/development/leaflet-interactive-maps-with-javascript-and-openstreetmap-75957.html">Leaflet: Interactive Maps with JavaScript and OpenStreetMap</a></li> <li><a class="colorbox" href="http://www.noupe.com/wordpress/the-truth-about-wordpress-performance-12-88857.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2015%2F03%2Fwordpress-performance-partone-teaser.png&w=250&h=200&zc=1&q=75" alt="The Truth about WordPress Performance [#1/2]" title="The Truth about WordPress Performance [#1/2]" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/wordpress/the-truth-about-wordpress-performance-12-88857.html">The Truth about WordPress Performance [#1/2]</a></li> </ul> <div></div> </div> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-31912"> <h2><a class="title" href="http://www.webmastersgallery.com/2015/05/28/what-you-need-to-know-about-the-latest-html5-video/" rel="bookmark">What You Need to Know About the Latest HTML5 Video</a></h2> <div class="info"> <span class="date">May 28th, 2015</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2015/05/28/what-you-need-to-know-about-the-latest-html5-video/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a class="colorbox" href="http://feedproxy.google.com/~r/Noupe/~3/EmcteGqxz1w/what-you-need-to-know-about-the-latest-html5-video-91963.html"></a></div> <p>Ever wanted to create your own Twitch.tv-like app for livestreaming your work? How about your own YouTube-esque program for playing back your previously recorded video? You might have used Flash, Java, or Silverlight for rich media in the past but with Chrome 42 announcing that that those plug-ins are no longer supported, now is as good a time to go HTML5 as ever. Before I worked at Microsoft, I was a Sr. Engineer on the Product Development team at Comcast, where I worked on video players for a number of platforms, including the web, Xbox One, Xbox 360, and SmartGlass. It was an outstanding education in cutting edge video technology, and I’m glad that I can take my experience with me in this role and teach others much of what I learned there. This is the first of a series of articles about using Azure Media Services to create and consume HTML5 video. In this tutorial, I’ll explain how to use this cloud media solution to get set-up and start experimenting with delivering live or on demand video. First, a Primer on Video Formats There are a number of formats to choose from, so let’s go through some of the […]</p> <div> <div><span>*</span> You might also be interested in the following articles:</div> <ul> <li><a class="colorbox" href="http://www.noupe.com/wordpress/big-time-saver-becoming-a-wordpress-pro-near-instantly-81368.html">Big Time Saver: Becoming a WordPress Pro (Near-)Instantly</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/javascript-using-closure-space-to-create-real-private-members-91845.html"></a><a class="colorbox" href="http://www.noupe.com/development/javascript-using-closure-space-to-create-real-private-members-91845.html">JavaScript: Using Closure Space to Create Real Private Members</a></li> <li><a class="colorbox" href="http://www.noupe.com/design/lord-of-the-rings-ringmark-checks-mobile-browsers-for-html5-capability-74308.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2013%2F01%2Fringmark.jpg&w=250&h=200&zc=1&q=75" alt="Lord Of The Rings: Ringmark Checks Mobile Browsers For HTML5 Capability" title="Lord Of The Rings: Ringmark Checks Mobile Browsers For HTML5 Capability" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/design/lord-of-the-rings-ringmark-checks-mobile-browsers-for-html5-capability-74308.html">Lord Of The Rings: Ringmark Checks Mobile Browsers For HTML5…</a></li> <li><a class="colorbox" href="http://www.noupe.com/inspiration/tutorials-inspiration/time-lapse-videos-how-to-quicken-the-pace-of-your-movies-80682.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2014%2F02%2Ftimelapse1.jpg&w=250&h=200&zc=1&q=75" alt="Time Lapse Videos: How to Quicken the Pace of Your Movies" title="Time Lapse Videos: How to Quicken the Pace of Your Movies" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/inspiration/tutorials-inspiration/time-lapse-videos-how-to-quicken-the-pace-of-your-movies-80682.html">Time Lapse Videos: How to Quicken the Pace of Your Movies</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/hands-on-build-a-node-js-powered-chatroom-web-app-part-two-91367.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2015%2F04%2Fnodejs-parttwo-teaser-250x131.png&w=250&h=200&zc=1&q=75" alt="Hands-On: Build a Node.js-powered Chatroom Web App (Part Two)" title="Hands-On: Build a Node.js-powered Chatroom Web App (Part Two)" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/development/hands-on-build-a-node-js-powered-chatroom-web-app-part-two-91367.html">Hands-On: Build a Node.js-powered Chatroom Web App (Part Two)</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/essential-how-to-test-internet-explorer-on-android-ios-and-mac-os-x-91539.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2015%2F04%2Fhowtotestinternetexplorer-teaser_EN-250x131.png&w=250&h=200&zc=1&q=75" alt="Essential: How to Test Internet Explorer on Android, iOS, and Mac OS X" title="Essential: How to Test Internet Explorer on Android, iOS, and Mac OS X" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/development/essential-how-to-test-internet-explorer-on-android-ios-and-mac-os-x-91539.html">Essential: How to Test Internet Explorer on Android, iOS, and Mac OS X</a></li> </ul> <div></div> </div> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-57103"> <h2><a class="title" href="http://www.webmastersgallery.com/2015/05/27/adopting-the-simulation-mindset-in-design/" rel="bookmark">Adopting the Simulation Mindset in Design</a></h2> <div class="info"> <span class="date">May 27th, 2015</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2015/05/27/adopting-the-simulation-mindset-in-design/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>One of the key activities in Design Thinking is doing design. Hence the irony that Design Thinking actually involves design doing. Not exactly in what designers do, but brainstorming solutions, prototyping them, learning and validating, iterating and improving. Rinse and repeat.</p> <p>I like to use the analogy of simulating and experimenting during Chemistry lab to describe the Design activity in our workshops. For example the experiment of splitting “H” and “O” from H2O. I could never get my test tube with the Hydrogen to pop in my first go. I would need to try the process a few times before I get it right. </p> <p>I found it therefore interesting when <a target="_blank" href="https://medium.com/@Ken_Rosen/my-son-has-23-6-billion-how-is-yours-doing-a03893b672ac" target="_blank">Ken Rosen explains</a> (perhaps oversimplifying) how the differences of the Airbus A380 and the Boeing 787 could have been better determined through a simulation mindset. </p> <blockquote> <p>Start a simulation mindset for major strategic decisions. Determine the minimum viable model you can use to represent your situation. Use that model to create a game, discussion, or workshop. Play.</p> </blockquote> <p>That is Design Thinking at its best. Applied holistically to simulate scenarios of the hardest problems through the eyes of your stakeholders. Use a sketch, lego blocks, a game, full-size spatial mockups, anything that will give you a “quick and dirty” way to get real quick. With a little effort, you can learn so much about the wicked problems you are trying to solve.</p> <div> <div> <ul> <li data-position="0" data-poid="in-7586" data-post-type="none"><a target="_blank" href="http://www.designsojourn.com/get-your-elevator-pitch-right-for-your-design-strategy-to-work/">Get your Elevator Pitch right for your Design Strategy to Work</a></li> <li data-position="1" data-poid="in-7634" data-post-type="none"><a target="_blank" href="http://www.designsojourn.com/a-guide-to-experience-maps/">A Guide to Experience Maps</a></li> <li data-position="2" data-poid="in-7676" data-post-type="none"><a target="_blank" href="http://www.designsojourn.com/what-is-the-value-of-design/">What is the Value of Design?</a></li> <li data-position="3" data-poid="in-7120" data-post-type="none"><a target="_blank" href="http://www.designsojourn.com/why-nobody-can-copy-apple/">Why Nobody can Copy Apple</a></li> <li data-position="4" data-poid="in-7123" data-post-type="none"><a target="_blank" href="http://www.designsojourn.com/silent-design-is-design-without-designers/">Silent Design is Design without Designers</a></li> </ul> </div> </div> <div> </div> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-31598"> <h2><a class="title" href="http://www.webmastersgallery.com/2015/05/27/back-to-the-roots-hand-made-typography/" rel="bookmark">Back to the Roots: Hand-Made Typography</a></h2> <div class="info"> <span class="date">May 27th, 2015</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2015/05/27/back-to-the-roots-hand-made-typography/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a class="colorbox" href="http://feedproxy.google.com/~r/Noupe/~3/xY-DRMXDKfc/back-to-the-roots-hand-made-typography-91510.html"></a></div> <p>Are you sometimes fed up with everything glossy, glassy, gradient-esque, three-dimensional, abstract, surreal – in one word with everything artificial, virtual? Yes? Me too. Now is the perfect time to turn to natural, real and genuine. Simply set your eyes on something organic, something that you can touch, feel and even eat, something that has vibes and evokes warm feelings. Our today’s collection is dedicated to impressive and intricate handmade typography. Edible cookies in the form of the alphabet, letters made from plasticine or carved out from fruits immediately spring to mind. Those are one of the most primitive examples of handcrafted fonts that can be quickly reproduced by any enthusiast equipped with proper tools. In fact this art direction hides a lot more than you can think of: there are works that can inspire, spark interest, refresh, cheer up and overwhelm. From elaborate paper-based letterforms made with the help of quilling technique to characters that are sculpted from metal, wood, plastic, grass or other raw material, designers try to go beyond boundaries in order to create remarkable and staggering letterforms. Today we have curated 30 outstanding examples of their diligence for you: Silk Road Film Festival 2015 – 3D […]</p> <div> <div><span>*</span> You might also be interested in the following articles:</div> <ul> <li><a class="colorbox" href="http://www.noupe.com/inspiration/showcases/incredible-typography-28-sculptural-fonts-showcase-90789.html">Incredible Typography: 28 Sculptural Fonts (Showcase)</a></li> <li><a class="colorbox" href="http://www.noupe.com/inspiration/showcases/world-of-design-new-zealand-85359.html"></a><a class="colorbox" href="http://www.noupe.com/inspiration/showcases/world-of-design-new-zealand-85359.html">World of Design No. 2: New Zealand</a></li> <li><a class="colorbox" href="http://www.noupe.com/essentials/im-free-curated-collections-of-free-commercial-use-photos-no-designer-can-do-without-81338.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2014%2F02%2Fimfree-searchfield.jpg&w=250&h=200&zc=1&q=75" alt="IM FREE: Curated Collections of Free Commercial Use Photos No Designer Can Do Without" title="IM FREE: Curated Collections of Free Commercial Use Photos No Designer Can Do Without" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/essentials/im-free-curated-collections-of-free-commercial-use-photos-no-designer-can-do-without-81338.html">IM FREE: Curated Collections of Free Commercial Use Photos No Designer</a></li> <li><a class="colorbox" href="http://www.noupe.com/design/skys-the-limit-40-fresh-and-free-photoshop-text-effects-83319.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2014%2F07%2F40-fresh-photoshop-text-effects-july-2014-playing-with-type.jpg&w=250&h=200&zc=1&q=75" alt="Sky's The Limit: 40 Fresh and Free Photoshop Text Effects" title="Sky's The Limit: 40 Fresh and Free Photoshop Text Effects" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/design/skys-the-limit-40-fresh-and-free-photoshop-text-effects-83319.html">Sky’s The Limit: 40 Fresh and Free Photoshop Text Effects</a></li> <li><a class="colorbox" href="http://www.noupe.com/essentials/freebies-tools-templates/boring-work-made-easy-free-templates-for-creating-manuals-83796.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2014%2F08%2Fprofessional-manual.jpg&w=250&h=200&zc=1&q=75" alt="Boring Work Made Easy: Free Templates for Creating Manuals" title="Boring Work Made Easy: Free Templates for Creating Manuals" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/essentials/freebies-tools-templates/boring-work-made-easy-free-templates-for-creating-manuals-83796.html">Boring Work Made Easy: Free Templates for Creating Manuals</a></li> <li><a class="colorbox" href="http://www.noupe.com/essentials/freebies-tools-templates/late-breaking-29-free-vibrant-flat-ui-packs-86185.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2014%2F12%2Fflat-ui-design-elements.jpg&w=250&h=200&zc=1&q=75" alt="Late-breaking: 29 Free Vibrant Flat UI Packs" title="Late-breaking: 29 Free Vibrant Flat UI Packs" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/essentials/freebies-tools-templates/late-breaking-29-free-vibrant-flat-ui-packs-86185.html">Late-breaking: 29 Free Vibrant Flat UI Packs</a></li> </ul> <div></div> </div> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-32462"> <h2><a class="title" href="http://www.webmastersgallery.com/2015/05/26/the-art-of-the-svg-filter-and-why-it-is-awesome/" rel="bookmark">The Art Of The SVG Filter And Why It Is Awesome</a></h2> <div class="info"> <span class="date">May 26th, 2015</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2015/05/26/the-art-of-the-svg-filter-and-why-it-is-awesome/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a class="colorbox" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/LvM8euHgbrA/"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/3-splash-preview-opt.jpg" alt="A filter that creates a liquid effect." title="A filter that creates a liquid effect."></a></div> <p>After almost 20 years of evolution, today’s web typography, with its high-density displays and support for OpenType features, is just a step away from the typographic quality of the offline world. But <strong>there’s still one field of graphic design where we still constantly fall back</strong> to bitmap replacements instead of using native text: display typography, the art of staging letters in illustrative, gorgeous, dramatic, playful, experimental or unexpected ways.</p> <figure><sup><a class="colorbox" href="http://www.smashingmagazine.com/#1">1</a></sup><br /><figcaption>Liquid type effect (<a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/splash-svg.html">demo</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#2">2</a></sup>)</figcaption></figure> <h3>A Case For Display Text In HTML</h3> <p>Sure, we’re able choose from thousands of web fonts and use CSS effects for type, some with wide browser support (like drop-shadows and 3D transforms) and others that are more experimental (like <code>background-clip</code> and <code>text-stroke</code>), but that’s basically it. If we want really outstanding display typography on our websites, we’ll usually embed it as an image.</p> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/extruded-svg.html"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup><br /><figcaption>Woodtype, a style created purely with SVG filters (<a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/extruded-svg.html">demo</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#4">4</a></sup>)</figcaption></figure> <p>The disadvantages of using images for type on the web are obvious: file size, lack of feasibility for frequently altered or user-generated content, accessibility, time-consuming production of assets, etc.</p> <p>Wouldn’t it be great if we could style letters the same way we usually style text with CSS? Apply multiple borders with different colors? Add inner and outer bevels? Add patterns, textures and 3D-effects? Give type a used look? Use multiple colors and distorted type? Give type a distressed look?</p> <h3>Sophisticated SVG Filters: CSS For Type</h3> <p>Most of this is already possible: The trick is to unleash the magic of SVG filters. SVG filters (and CSS filters) are usually considered a way to spice up bitmaps via blur effects or color manipulation. But they are much more. Like CSS rules, an SVG filter can be a set of directives to add another visual layer on top of conventional text. With the CSS <code>filter</code> property, these effects can be used outside of SVG and be applied directly to HTML content.</p> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/3dneon-svg.html"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/4-west-preview-opt.jpg" width="500" alt="A 3D vintage effect" title="A 3D vintage effect"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#5">5</a></sup><br /><figcaption>3D vintage effect (<a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/3dneon-svg.html">demo</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#6">6</a></sup>)</figcaption></figure> <p>Talking about filters in CSS and SVG can be a bit confusing: SVG filters are defined in an SVG <code>filter</code> element and are usually applied within an SVG document. CSS filters can be applied to any HTML element via the <code>filter</code> property. CSS filters such as <code>blur</code>, <code>contrast</code> and <code>hue-rotate</code> are shortcuts for predefined, frequently used SVG filter effects. Beyond that, <a class="colorbox" href="http://www.w3.org/TR/filter-effects/" title="CSS3 Filter Modules at the W3C">the specification</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#7">7</a></sup> allows us to reference user-defined filters from within an SVG. A further point of confusion is the proprietary <code>-ms-</code> <code>filter</code> tag, which was deprecated in Internet Explorer (IE) 9 and removed when IE 10 was released.</p> <p>This article mostly deals with the first case: SVG filters used in an SVG document embedded on an HTML page, but later we’ll experiment with SVG filters applied to HTML content.</p> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/copperplate-svg.html"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/5-imagefill-preview-opt.jpg" alt="Using feImage to fill text with a repeating pattern" title="Using feImage to fill text with a repeating pattern"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#8">8</a></sup><br /><figcaption>Using <code>feImage</code> to fill text with a repeating pattern (<a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/copperplate-svg.html">demo</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#9">9</a></sup>)</figcaption></figure> <p>The illustrations in this article are taken from demos of SVG filter effects applied to text. Click on any one of them to see the original (modern, SVG-capable browsers only). I call them “sophisticated” SVG filters because under the hood these filters are crafted by combining multiple effects into one output. And even though the appearance of the letters has been altered dramatically, under the hood the text is still crawlable and accessible and can be selected and copied. Because SVG filters are supported in every modern browser, these effects can be displayed in browsers beginning from IE 10.</p> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/sketchy-svg.html"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/6-sketchy-preview-opt.jpg" alt="Applying a sketch effect to text" title="Applying a sketch effect to text"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#10">10</a></sup><br /><figcaption>A sketchy text effect (<a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/sketchy-svg.html">demo</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#11">11</a></sup>)</figcaption></figure> <p>Understanding SVG filters is challenging. Even simple effects like drop-shadows require a complicated, verbose syntax. Some filers, such as <code>feColorMatrix</code> and <code>feComposite</code>, are difficult to grasp without a thorough understanding of math and color theory. This article will not be a tutorial on learning SVG filters. Instead I will describe a set of standard <strong>building blocks</strong> to achieve certain effects, but I will keep explanations to the bare minimum, focusing on documenting the individual steps that make up an effect. You will mostly read about the how; for those who want to know the why, I’ve put a reading list at the end of this article.</p> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/pop-svg.html"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/7-pop-preview-opt.jpg" alt="Variations of posterized text effects" title="Variations of posterized text effects"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#12">12</a></sup><br /><figcaption>Some variations of posterized text effects (<a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/pop-svg.html">demo</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#13">13</a></sup>)</figcaption></figure> <h3>Constructing A Filter</h3> <p>Below is a sophisticated SVG fiter in action. The output of this filter is a weathered text effect, and we will use this for a step-by-step walkthrough:</p> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/weathered-svg.html"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/8-grungy-preview-opt.jpg" alt="Making text look grungy" title="Making text look grungy"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#14">14</a></sup><br /><figcaption>A grungy wall painting (<a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/weathered-svg.html">demo</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#15">15</a></sup>)</figcaption></figure> <p>Let’s break down this effect into its building blocks:</p> <ol> <li>green text;</li> <li>red extrusion;</li> <li>text and extrusion are separated by a transparent gap;</li> <li>text has a grungy, weathered look.</li> </ol> <p>Our SVG filter effect will be constructed by combining multiple small modules, so-called “filter primitives.” Every building block is constructed from a set of one or more primitives that are then combined into a unified output. This process is easier to understand when shown as a graph:</p> <figure><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/9-filtergraph-preview-opt.jpg" width="500" alt="Image of an SVG filter graph" title="Image of an SVG filter graph"><figcaption>The processing steps that make up a sophisticated filter are illustrated best in a graph.</figcaption></figure> <h4>Adding A Filter</h4> <p>We’ll start with a boilerplate SVG that contains an empty filter and text:</p> <pre><code><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"> <![CDATA[ .filtered{ filter: url(#myfilter); … } ]]> </style> <filter id="myfilter">  </filter> </defs> <g class="filtered"> <text x="0" y="200" transform="rotate(-12)">Petrol</text> </g> </svg> </code></pre> <h4>The filter Element</h4> <p>We have to start somewhere, and the <code>filter</code> tag is the element to begin with. Between its start and end tag, we will put all of the rules for transformation, color, bitmap manipulation, etc. The filter can then be applied to a target as an attribute or via CSS. The target will usually be an element inside an SVG, but later on we will learn about another exciting option: applying SVG filters to HTML elements.</p> <p>A handful of attributes exist to control the <code>filter</code> element:</p> <ul> <li>x and y positions (default -10%);</li> <li>width and height (default 120%);</li> <li>an ID, which is necessary to refer to later on;</li> <li><code>filterRes</code>, which predefines a resolution (deprecated with the “<a class="colorbox" href="http://www.w3.org/TR/filter-effects/" title="CSS3 Filter Modules at the W3C">Filter Effects Module Level 1</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#16">16</a></sup>” specification);</li> <li>relative (<code>objectBoundingBox</code> is the default) or absolute (<code>userSpaceOnUse</code>) <code>filterUnits</code>.</li> </ul> <h4>A Word on Filter Primitives</h4> <p>As we’ve learned, filter primitives are the building blocks of SVG filters. To have any effect, an SVG filter should contain at least one primitive. A primitive usually has one or two inputs (<code>in</code>, <code>in2</code>) and one output (<code>result</code>). Primitives exist for blurring, moving, filling, combining or distorting inputs.</p> <p>The specification allows us to take several attributes of the filtered element as an input source. Because most of these do not work reliably across browsers anyway, in this article we will stick with <code>SourceGraphic</code> (the unfiltered source element with colors, strokes, fill patterns, etc.) and <code>SourceAlpha</code> (the opaque area of the alpha channel — think of it as the source graphic filled black), which do have very good browser support.</p> <h4>How To Thicken The Input Text</h4> <p>The first filter primitive we will get to know is <code>feMorphology</code>, a primitive meant to extend (<code>operator="dilate"</code>) or thin (<code>operator="erode"</code>) an input — therefore, perfectly suited to creating outlines and borders.</p> <p>Here is how we would fatten the <code>SourceAlpha</code> by four pixels:</p> <figure><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/10-walkthrough_01-preview-opt.jpg" width="500" alt="Source fattened by 4 pixels" title="Source fattened by 4 pixels"><figcaption>Source fattened by four pixels</figcaption></figure> <pre><code><feMorphology operator="dilate" radius="4" in="SourceAlpha" result="BEVEL_10" /> </code></pre> <h4>Creating an Extrusion</h4> <p>The next step is to create a 3D extrusion of the result from the last primitive. Meet <code>feConvolveMatrix</code>. This filter primitive is one of the mightiest and most difficult to grasp. Its main purpose is to enable you to create your own filter. In short, you would define a pixel raster (a kernel matrix) that alters a pixel according to the values of its neighbouring pixels. This way, it becomes possible to create your own filter effects, such as a blur or a sharpening filter, or to create an extrusion.</p> <p>Here is the <code>feConvolveMatrix</code> to create a 45-degree, 3-pixel deep extrusion. The <code>order</code> attribute defines a width and a height, so that the primitive knows whether to apply a 3×3 or a 9×1 matrix:</p> <figure><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/11-walkthrough_02-preview-opt.jpg" alt="Using feConvolveMatrix to create an extrusion on the fattened input" title="Using feConvolveMatrix to create an extrusion on the fattened input"><br /><figcaption>Using <code>feConvolveMatrix</code> to create an extrusion on the fattened input</figcaption></figure> <pre><code><feConvolveMatrix order="3,3" kernelMatrix= "1 0 0 0 1 0 0 0 1" in="BEVEL_10" result="BEVEL_20" /> </code></pre> <p>Be aware that IE 11 and Microsoft Edge (at the time of writing) cannot handle matrices with an order greater than 8×8 pixels, and they do not cope well with multiline matrix notation, so removing all carriage returns before deploying this code would be best.</p> <p>The primitive will be applied equally to the left, top, right and bottom. Because we want it to extrude only to the right and bottom, we must offset the result. Two attributes define the starting point of the effect, <code>targetX</code> and <code>targetY</code>. Unfortunately, IE interprets them contrary to all other browsers. Therefore, to maintain compatibility across browsers, we will handle offsetting with another filter primitive, <code>feOffset</code>.</p> <h4>Offsetting</h4> <p>As the name implies, <code>feOffset</code> takes an input and, well, offsets it:</p> <pre><code><feOffset dx="4" dy="4" in="BEVEL_20" result="BEVEL_30"/> </code></pre> <h4>Cutting Off the Extruded Part</h4> <p><code>feComposite</code> is one of the few filter primitives that take two inputs. It then combines them by applying a method for composing two images called Porter-Duff compositing. <code>feComposite</code> can be used to mask or cut elements. Here’s how to subtract the output of <code>feMorphology</code> from the output of <code>feConvolveMatrix</code>:</p> <figure><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/12-walkthrough_03-preview-opt.jpg" alt="Cutting off the fattened 1st primitive from the extrusion"><br /><figcaption>Cutting off the fattened first primitive from the extrusion</figcaption></figure> <pre><code><feComposite operator="out" in="BEVEL_20" in2="BEVEL_10" result="BEVEL_30"/> </code></pre> <h4>Coloring the Extrusion</h4> <p>This is a two-step process:</p> <p>First, we create a colored area with <code>feFlood</code>. This primitive will simply output a rectangle the size of the filter region in a color we define:</p> <pre><code><feFlood flood-color="#582D1B" result="COLOR-red" /> </code></pre> <p>We then cut off the transparent part of <code>BEVEL_30</code> with one more <code>feComposite</code>:</p> <figure><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/13-walkthrough_04-preview-opt.jpg" alt="Coloring the extrusion" title="Coloring the extrusion"><br /><figcaption>Coloring the extrusion</figcaption></figure> <pre><code><feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" /> </code></pre> <h4>Mixing Bevel and Source Into One Output</h4> <p><code>feMerge</code> does just that, mix bevel and source into one output:</p> <figure><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/14-walkthrough_05-preview-opt.jpg" alt="Bevel and source graphic mixed into one output" title="Bevel and source graphic mixed into one output"><br /><figcaption>Bevel and source graphic mixed into one output</figcaption></figure> <pre><code><feMerge result="BEVEL_50"> <feMergeNode in="BEVEL_40" /> <feMergeNode in="SourceGraphic" /> </feMerge> </code></pre> <p>Looks pretty much like the desired result. Let’s make it a little more realistic by giving it a weathered look.</p> <h4>Adding a Fractal Texture</h4> <p><code>feTurbulence</code> is one of the most fun primitives to play with. However, it can melt your multicore CPU and make your fans rotate like the turbojet engines of a Boeing 747. Use it wisely, especially on a mobile device, because this primitive can have a really, really bad effect on rendering performance.</p> <p>Like <code>feFlood</code>, <code>feTurbulence</code> outputs a filled rectangle but uses a noisy, unstructured texture.</p> <p>We have several values on hand to alter the appearance and rhythm of the texture. This way, we can create surfaces that look like wood, sand, watercolor or cracked concrete. These settings have a direct influence on the performance of the filter, so test thoroughly. Here’s how to create a pattern that resembles paint strokes:</p> <pre><code><feTurbulence baseFrequency=".05,.004" width="200%" height="200%" top="-50%" type="fractalNoise" numOctaves="4" seed="0" result="FRACTAL-TEXTURE_10" /> </code></pre> <p>By default, <code>feTurbulence</code> outputs a colored texture — not exactly what we want. We need a grayscale alpha map; a bit more contrast would be nice, too. Let’s run it through an <code>feColorMatrix</code> to increase the contrast and convert it to grayscale at the same time:</p> <figure><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/15-walkthrough_06-preview-opt.jpg" alt="Finally adding a fractal texture to the result"><br /><figcaption>Finally, adding a fractal texture to the result</figcaption></figure> <pre><code><feColorMatrix type="matrix" values= "0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.2 1.1" in="FRACTAL-TEXTURE_10" result="FRACTAL-TEXTURE_20" /> </code></pre> <p>The last thing to do is compose the textured alpha into the letterforms with our old friend <code>feComposite</code>:</p> <pre><code><feComposite in="BEVEL_50" in2="FRACTAL-TEXTURE_20" operator="in"/> </code></pre> <p>Done!</p> <h3>How To Apply SVG Filters To SVG Content</h3> <p>There are two methods of applying SVG filters to an SVG <code>text</code> element:</p> <h4>1. Via CSS</h4> <pre><code>.filtered { filter: url(#filter); } </code></pre> <h4>2. Via Attribute</h4> <pre><code><text filter="url(#filter)">Some text</text> </code></pre> <h3>Applying SVG Filters To HTML Content</h3> <p>One of the most exciting features of filters is that it’s possible to embed an SVG, define a filter in it and then apply it to any HTML element with CSS:</p> <pre><code>filter: url(#mySVGfilter); </code></pre> <p>At the time of writing, Blink and WebKit require it to be prefixed:</p> <pre><code>-webkit-filter: url(#mySVGfilter); </code></pre> <p>As easy as it sounds in theory, this process is a dark art in the real world:</p> <ul> <li>SVG filters on HTML content are currently supported in WebKit, Firefox and Blink. IE and Microsoft Edge will display the unfiltered element, so make sure that the default look is good enough.</li> <li>The SVG that contains the filter may not be set to <code>display: none</code>. However, you can set it to <code>visibility: hidden</code>.</li> <li>Sometimes the size of the SVG has a direct influence on how much of the target element is filtered.</li> <li>Did I say that WebKit, Blink and Firefox understand this syntax? Well, Safari (and its little brother mobile Safari) is a special case. You <em>can</em> get most of these demos working in Safari, but you will pull your hair out and bite pieces out of your desk in the process. At the time of writing, I can’t recommend using SVG filters on HTML content in the current version of Safari (8.0.6). Results are unpredictable, and the technique is not bulletproof. To make things worse, if Safari fails to render your filter for some reason, it will not display the HTML target <em>at all</em>, an accessibility nightmare. As a rule of thumb, you increase your chances of getting Safari to display your filter with absolute positioning and fixed sizing of your target. As a proof of concept, I’ve set up a <a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/pop-safari.html" title="POP filter effect, optimized for Safari">“pop” filter effect, optimized for desktop Safari</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#17">17</a></sup>. Applying <code>feImage</code> to HTML elements seems to be impossible in Safari.</li> </ul> <h4>Previous Demos, Applied To HTML Content</h4> <p>In these demos, the wrappers are set to <code>contenteditable = "true</code> for convenient text editing. (Be aware that these demos are experimental and will not work in Safari, IE or Edge.)</p> <ul> <li><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/copperplate-html.html" title="outlined and filled with pattern (HTML)">Image filled text</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#18">18</a></sup></li> <li><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/extruded-html.html" title="Extruded and filled with pattern (HTML)">Extruded and filled with pattern</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#19">19</a></sup></li> <li><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/3dneon-html.html" title="Extruded and illuminated (HTML)">Extruded and illuminated</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#20">20</a></sup></li> <li><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/weathered-html.html" title="Grungy look with fractal filters (HTML)">Grungy look with the help of fractal filters</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#21">21</a></sup></li> <li><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/splash-html.html" title="Spilled water effect (HTML)">feTurbulence to achieve spilled water effect</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#22">22</a></sup></li> <li><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/pop-html.html">Some pop-arty color effects</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#23">23</a></sup></li> <li><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/sketchy-html.html">Sketchy style</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#24">24</a></sup></li> </ul> <h3>Structuring A Filter</h3> <p>Depending on its complexity, a filter can quickly become a messy thing. During authoring, you could be adding and removing rules and changing their order and values, and soon you’re lost. Here are some rules I’ve made for myself that help me keep track of what’s going on. People and projects vary; what seems logical and structured for me might be chaotic and incomprehensible for you, so take these recommendations with a grain of salt.</p> <h4>Grouping</h4> <p>I group my filter primitives into modules depending on their functionality — for example, “border,” “fill,” “bevel,” etc. At the start and end of a module, I put a comment with the name of this group.</p> <h4>Naming</h4> <p>A good naming convention will help you structure your filter and keep track of what’s going in and outside of a primitive. After experimenting with <a class="colorbox" href="https://en.bem.info/method/" title="BEM">BEM-like schemas</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#25">25</a></sup>, I finally settled on a very simple naming structure:</p> <pre><code>NAME-OF-GROUP_order-number </code></pre> <p>For example, you would have <code>BEVEL_10</code>, <code>BEVEL_20</code>, <code>OUTLINE_10</code> and so on. I start with 10 and increment by 10 to make it easier to change the order of primitives or to add a primitive in between or to the beginning of a group. I prefer full caps because they stand out and help me to scan the source faster.</p> <h4>Always Declare Input and Result</h4> <p>Though not necessary, I always declare an “in” and a “result.” (If omitted, the output of a primitive will be the input of its successor.)</p> <h3>Some Building Blocks</h3> <p>Let’s look at some single techniques to achieve certain effects. By combining these building blocks, we can create new sophisticated filter effects.</p> <h4>Text Stroke</h4> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/outline.svg"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/16-outline-preview-opt.jpg" alt="SVG filter outline"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#26">26</a></sup></figure> <pre><code> <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thickened" />  <feComposite operator="out" in="SourceAlpha" in2="thickened" /> </code></pre> <p>This method is not guaranteed to look good. Especially when you apply <code>dilate</code> in conjunction with big values for <code>radius</code>, the result can look worse than the geometry created via <code>stroke-width</code>. Depending on the situation, a better alternative would be to store the text in a <code>symbol</code> element, and then insert it when needed via <code>use</code>, and thicken the instance with CSS’ <code>stroke-width</code> property. Be aware that <code>stroke-width</code> cannot be applied to HTML content, though.</p> <h4>Torn Look</h4> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/tornout.svg"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/17-tornout-preview-opt.jpg" alt="Torn look"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#27">27</a></sup></figure> <pre><code> <feTurbulence result="TURBULENCE" baseFrequency="0.08" numOctaves="1" seed="1" />  <feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="9" /> </code></pre> <h4>Color Fill</h4> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/colorfill.svg"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/18-colorfill-preview-opt.jpg" alt="Tornout look"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#28">28</a></sup></figure> <pre><code> <feFlood flood-color="#F79308" result="COLOR" />  <feComposite operator="in" in="COLOR" in2="SourceAlpha" /> </code></pre> <p>It should be mentioned that, besides <code>feFlood</code>, <code>feColorMatrix</code> is another method of altering the source input’s color, even though that concept is more difficult to grasp.</p> <h4>Offsetting</h4> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/offset.svg"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/19-offset-preview-opt.jpg" alt="Offsetting the filtered element"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#29">29</a></sup></figure> <pre><code> <feOffset in="SourceGraphic" dx="10" dy="10" /> </code></pre> <h4>Extrusion</h4> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/extrude.svg"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/20-extrude-preview-opt.jpg" alt="Extrude the target"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#30">30</a></sup></figure> <pre><code>  <feConvolveMatrix order="4,4" kernelMatrix=" 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1" in="SourceAlpha" result="BEVEL" />  <feOffset dx="2" dy ="2" in="BEVEL" result="OFFSET" />  <feMerge> <feMergeNode in="OFFSET" /> <feMergeNode in="SourceGraphic" /> </feMerge> </code></pre> <h4>Noise Fill</h4> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/noisefill.svg"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/21-noisefill-preview-opt.jpg" alt="Create a noise fill"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#31">31</a></sup></figure> <p>The <code>feTurbulence</code> filter primitive will create a noisy texture by applying the so-called Perlin noise algorithm (invented by Ken Perlin during his work on TRON in 1981). This will generate a rectangle filled with noise that looks like what you could see on old TV sets late at night before cable TV was invented.</p> <p>The appearance of the noise structure can be modified by several parameters:</p> <ul> <li><code>type</code> in its default state will produce a liquid texture.</li> <li><code>type</code> can be set to <code>fractalNoise</code> instead, which will output a sandy result.</li> <li><code>baseFrequency</code> is there to control x and y pattern repetition.</li> <li><code>numOctaves</code> will increase the level of detail and should have a low value if performance is an issue.</li> <li>The number to start randomization with is determined by <code>seed</code>.</li> </ul> <pre><code><feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="5" seed="2" /> </code></pre> <h4>Image Fill</h4> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/imagefill.svg"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/22-imagefill-preview-opt.jpg" alt="Fill target with an image"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#32">32</a></sup></figure> <p><code>feImage</code>‘s purpose is to fill the target with a texture. If we want to apply a repeating pattern, it must be used in conjunction with <code>feTile</code>.</p> <pre><code> <feImage xlink:href="myfill.svg" x="0" y="0" width="100" height="200" result="IMAGEFILL"/>  <feTile in="IMAGEFILL" resulte="TILEPATTERN"/>  <feComposite operator="in" in="TILEPATTERN" in2="SourceAlpha" /> </code></pre> <p>The cool thing about this filter is that the specification allows us to use any SVG element as an input and to create a pattern fill from it. So, in theory, you could create pattern fills from symbols, groups and fragments within your SVG and then apply them as a texture, even to HTML elements. Unfortunately, because of an <a class="colorbox" href="https://bugzilla.mozilla.org/show_bug.cgi?id=455986">old bug</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#33">33</a></sup>, Firefox accepts only external resources as input. If you prefer to keep things self-contained and want to avoid the additional HTTP request, there’s hope: Embed the pattern fill as an UTF-8 data URI:</p> <pre><code><feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' /> </code></pre> <p>Some browsers do not understand UTF-8 data URIs when they aren’t URL-encoded, so make <a class="colorbox" href="http://meyerweb.com/eric/tools/dencoder/" title="Eric Meyer's URL encoder">URL encoding</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#34">34</a></sup> a default:</p> <pre><code><feImage xlink:href='data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%22100%22%20height%3D%22100%22%3E%3Crect%20width%3D%2250%22%20height%3D%2250%20%2F%3E%3C%2Fsvg%3E' /> </code></pre> <p>If you want to apply <code>feImage</code> to HTML content, be aware that size matters. The SVG that contains the filter must cover the area where it is being applied. The easiest way to achieve this is by making it an absolutely positioned child within the block element it is being applied to:</p> <pre><code><style> h1{ position: relative; filter: url(#myImageFilter); } h1 svg{ position: absolute; visibility: hidden; width: 100%; height: 100%; left: 0; top: 0; } </style> <h1> My Filtered Text <svg> <filter id="myImageFilter">…</filter> </svg> </h1> </code></pre> <h4>Lighting Effect</h4> <figure><a class="colorbox" href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/lighting.svg"><img decoding="async" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/23-lighting-preview-opt.jpg" alt="3D Bevel"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#35">35</a></sup></figure> <p>This is one “Wow” effect that quickly becomes boring when used too often. This filter has a serious effect on performance, so use it wisely.</p> <pre><code> <feGaussianBlur stdDeviation="5" in="SourceAlpha" result="BLUR"/>  <feSpecularLighting surfaceScale="6" specularConstant="1" specularExponent="30" lighting-color="#white" in="BLUR" result="SPECULAR"> <fePointLight x="40" y="-30" z="200" /> </feSpecularLighting>  <feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>  <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode in="COMPOSITE"/> </feMerge> </code></pre> <h3>Conclusion</h3> <p>There is a gap between pure CSS layout and custom design elements created in software such as Photoshop or Illustrator. External assets embedded as background images, icon sprites and SVG symbols will always have their place in the design of websites. But sophisticated SVG filters give us more independence from third-party design tools and bridge this gap by enabling us to create visual styles directly in the browser.</p> <p>In this article we’ve seen how SVG filters help us to create playful, decorative web typography. But nothing says we have to stop here. Soon, browser support will be good enough for us to use these effects on every HTML element as easily as we use CSS today. Even though the effects behave differently from native CSS techniques (an SVG filter will affect not only an element but all its children), it will be exciting to see how inventive web designers use these techniques in the near future.</p> <h4>Resources From This Article</h4> <ul> <li><a class="colorbox" href="https://github.com/dirkweber/svg-filter-typeeffects" title="Repo with demos at GitHub">Sophisticated Filter Effects</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#36">36</a></sup>, GitHub<br /> The repository of demos</li> <li><a class="colorbox" href="http://codepen.io/collection/ArxmyO/" title="Play with code on Codepen">Sophisticated Filter Effects</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#37">37</a></sup>, Codepen<br /> Play around with the code.</li> </ul> <h4>Reading List</h4> <ul> <li>“<a class="colorbox" href="http://www.w3.org/TR/filter-effects/" title="W3C Filter Effects Module Level 1">Filter Effects Module Level 1</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#38">38</a></sup>” (working draft), W3C</li> <li>“<a class="colorbox" href="https://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters" title="Smarter SVG Filters at webplatform.org">SVG Filters</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#39">39</a></sup>,” Mike Sierra, WebPlatform.org</li> <li>“<a class="colorbox" href="http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/filters2.htm" title="Filter Effects in SVG">Filter Effects in SVG</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#40">40</a></sup>,” David Dailey</li> <li>“<a class="colorbox" href="http://tutorials.jenkov.com/svg/filters.html" title="Filter Tutorial by Jakob Jenkov">SVG Filters</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#41">41</a></sup>” (tutorial), Jakob Jenkov</li> <li>“<a class="colorbox" href="https://pythonhosted.org/svgwrite/classes/filter_primitive.html" title="Filter Primitives Overview">Filter Primitives Overview</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#42">42</a></sup>,” Manfred Moitzi</li> <li>“<a class="colorbox" href="http://www.svgbasics.com/filters1.html" title="SVGBasics: Filters">Using Filters to Add Raster Images</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#43">43</a></sup>,” SVGBasics</li> <li>“<a class="colorbox" href="http://apike.ca/prog_svg_filters.html" title="Filters by Matthew Bystedt">Filters</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#44">44</a></sup>,” Matthew Bystedt</li> <li>“<a class="colorbox" href="http://de.slideshare.net/mullany1/cirque-du-filter-cssdevconf-2013" title="Cirque du Filter">Cirque du Filter: A Journey Into Advanced SVG Filter Effects</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#45">45</a></sup>” (slidedeck), Michael Mullany, CSS Dev Conf 2013</li> <li>“<a class="colorbox" href="http://www.creativebloq.com/netmag/how-go-beyond-basics-svg-filters-71412280" title="How to go beyond the basics with SVG filters">How to Go Beyond the Basics With SVG Filters</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#46">46</a></sup>,” Michael Mullany, Creative Bloq</li> <li>“<a class="colorbox" href="http://ssp.impulsetrain.com/porterduff.html" title="Porter/Duff Compositing and Blend Modes">Porter/Duff Compositing and Blend Modes</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#47">47</a></sup>,” Søren Sandmann Pedersen</li> <li>“<a class="colorbox" href="http://graficaobscura.com/matrix/index.html" title="Matrix Operations for Image Processing">Matrix Operations for Image Processing</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#48">48</a></sup>,” Paul Haeberli</li> <li>“<a class="colorbox" href="http://williamson-labs.com/convolution-2d.htm" title="Image Processing using 2D-Convolution">Image Processing Using 2D-Convolution</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#49">49</a></sup>,” Williamson Labs</li> <li>“<a class="colorbox" href="http://matlabtricks.com/post-5/3x3-convolution-kernels-with-online-demo#demo" title="3x3 convolution kernels">3×3 Convolution Kernels With Online Demo</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#50">50</a></sup>,” Zoltán Fegyver</li> <li>“<a class="colorbox" href="http://webstaff.itn.liu.se/~stegu/TNM022-2005/perlinnoiselinks/perlin-noise-math-faq.html" title="he Perlin Noise Math FAQ">The Perlin Noise Math FAQ</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#51">51</a></sup>,” Matt Zucker</li> <li>“<a class="colorbox" href="https://css-tricks.com/look-svg-light-source-filters/" title="SVG Light Source Filters">A Look at SVG Light Source Filters</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#52">52</a></sup>,” Joni Trythall, CSS-Tricks</li> </ul> <p><em>(ds, al)</em></p> <h4>Footnotes</h4> <ol> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-1">1 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/splash-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-2">2 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/splash-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-3">3 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/extruded-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-4">4 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/extruded-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-5">5 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/3dneon-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-6">6 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/3dneon-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-7">7 http://www.w3.org/TR/filter-effects/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-8">8 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/copperplate-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-9">9 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/copperplate-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-10">10 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/sketchy-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-11">11 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/sketchy-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-12">12 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/pop-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-13">13 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/pop-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-14">14 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/weathered-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-15">15 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/weathered-svg.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-16">16 http://www.w3.org/TR/filter-effects/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-17">17 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/pop-safari.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-18">18 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/copperplate-html.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-19">19 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/extruded-html.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-20">20 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/3dneon-html.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-21">21 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/weathered-html.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-22">22 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/splash-html.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-23">23 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/pop-html.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-24">24 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/sketchy-html.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-25">25 https://en.bem.info/method/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-26">26 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/outline.svg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-27">27 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/tornout.svg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-28">28 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/colorfill.svg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-29">29 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/offset.svg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-30">30 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/extrude.svg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-31">31 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/noisefill.svg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-32">32 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/imagefill.svg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-33">33 https://bugzilla.mozilla.org/show_bug.cgi?id=455986</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-34">34 http://meyerweb.com/eric/tools/dencoder/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-35">35 http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/05/lighting.svg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-36">36 https://github.com/dirkweber/svg-filter-typeeffects</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-37">37 http://codepen.io/collection/ArxmyO/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-38">38 http://www.w3.org/TR/filter-effects/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-39">39 https://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-40">40 http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/filters2.htm</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-41">41 http://tutorials.jenkov.com/svg/filters.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-42">42 https://pythonhosted.org/svgwrite/classes/filter_primitive.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-43">43 http://www.svgbasics.com/filters1.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-44">44 http://apike.ca/prog_svg_filters.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-45">45 http://de.slideshare.net/mullany1/cirque-du-filter-cssdevconf-2013</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-46">46 http://www.creativebloq.com/netmag/how-go-beyond-basics-svg-filters-71412280</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-47">47 http://ssp.impulsetrain.com/porterduff.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-48">48 http://graficaobscura.com/matrix/index.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-49">49 http://williamson-labs.com/convolution-2d.htm</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-50">50 http://matlabtricks.com/post-5/3×3-convolution-kernels-with-online-demo#demo</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-51">51 http://webstaff.itn.liu.se/~stegu/TNM022-2005/perlinnoiselinks/perlin-noise-math-faq.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-52">52 https://css-tricks.com/look-svg-light-source-filters/</a></li> </ol> <p>The post <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/2015/05/26/why-the-svg-filter-is-awesome/">The Art Of The SVG Filter And Why It Is Awesome</a> appeared first on <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/">Smashing Magazine</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-31287"> <h2><a class="title" href="http://www.webmastersgallery.com/2015/05/26/understanding-ecmascript-6-template-strings-2/" rel="bookmark">Understanding ECMAScript 6: Template Strings (#2)</a></h2> <div class="info"> <span class="date">May 26th, 2015</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2015/05/26/understanding-ecmascript-6-template-strings-2/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a class="colorbox" href="http://feedproxy.google.com/~r/Noupe/~3/RerRYEXPfLo/understanding-ecmascript-6-template-strings-2-91959.html"></a></div> <p>Welcome to the second part of my series about ECMAScript 6! One of my favorite new web standards Microsoft Edge, the new browser rendering engine we’re creating at Microsoft, is the extensive support it offers for ECMAScript 6. So I wrote this series to walk you through some of the cool things you can do with ECMAScript 6 when writing large applications for the web. In the first installment, I covered Class and Inheritance. In this article, I’ll focus on template strings based on my personal experience creating embedded expressions. Resolving the Line Return Problem When working on babylon.js, I have to deal with shaders code which can be seen, for the sake of comprehension, like a big bunch of text (which looks like C). You can find an example here. The problem when dealing with long-sized text in JavaScript is the line return. How many times did you write this kind of thing? 1 2 3 4 5 6 7 var myTooLongString = “A long time ago, in a galaxy far,” + “far away….” + “It is a period of civil war.” + “Rebel spaceships, striking” + “from a hidden base, have won” + “their first victory against” + […]</p> <div> <div><span>*</span> You might also be interested in the following articles:</div> <ul> <li><a class="colorbox" href="http://www.noupe.com/development/from-scratch-writing-a-3d-soft-engine-3v6-80150.html">From Scratch: Writing a 3D Soft Engine 3/6</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/javascript-using-closure-space-to-create-real-private-members-91845.html"></a><a class="colorbox" href="http://www.noupe.com/development/javascript-using-closure-space-to-create-real-private-members-91845.html">JavaScript: Using Closure Space to Create Real Private Members</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/from-scratch-writing-a-3d-soft-engine-2v6-80144.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2013%2F11%2Fpiglet-139675_640.jpg&w=250&h=200&zc=1&q=75" alt="From Scratch: Writing a 3D Soft Engine 2/6" title="From Scratch: Writing a 3D Soft Engine 2/6" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/development/from-scratch-writing-a-3d-soft-engine-2v6-80144.html">From Scratch: Writing a 3D Soft Engine 2/6</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/magicsuggest-for-jquery-beautiful-selection-comboboxes-based-on-bootstrap-3-83770.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2014%2F07%2Fwand-307273_640.png&w=250&h=200&zc=1&q=75" alt="MagicSuggest for jQuery: Beautiful Selection Comboboxes Based on Bootstrap 3" title="MagicSuggest for jQuery: Beautiful Selection Comboboxes Based on Bootstrap 3" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/development/magicsuggest-for-jquery-beautiful-selection-comboboxes-based-on-bootstrap-3-83770.html">MagicSuggest for jQuery: Beautiful Selection Comboboxes Based on…</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/new-era-computation-of-time-with-moment-js-74672.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2013%2F01%2Fmomentjs.png&w=250&h=200&zc=1&q=75" alt="New Era: Computation of Time with Moment.js" title="New Era: Computation of Time with Moment.js" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/development/new-era-computation-of-time-with-moment-js-74672.html">New Era: Computation of Time with Moment.js</a></li> <li><a class="colorbox" href="http://www.noupe.com/development/html5-server-sent-events-how-to-react-on-server-requests-with-javascript-74978.html"><img decoding="async" loading="lazy" src="http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2013%2F02%2Fserversentevents-w550.jpg&w=250&h=200&zc=1&q=75" alt="HTML5 Server-Sent-Events: How To React On Server Requests With JavaScript" title="HTML5 Server-Sent-Events: How To React On Server Requests With JavaScript" width="250" height="200"></a><a class="colorbox" href="http://www.noupe.com/development/html5-server-sent-events-how-to-react-on-server-requests-with-javascript-74978.html">HTML5 Server-Sent-Events: How To React On Server Requests With…</a></li> </ul> <div></div> </div> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div id="pagenavi"> <span class="newer"></span> <span class="older"><a href="http://www.webmastersgallery.com/2015/05/page/2/" >Older Entries</a></span> <div class="fixed"></div> </div> </div>   <div id="sidebar">  <div id="northsidebar" class="sidebar">  <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div>  <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div>  <div id="centersidebar">  <div id="eastsidebar" class="sidebar">  <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div>   <div id="westsidebar" class="sidebar">  <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div>  <div class="fixed"></div> </div>  <div id="southsidebar" class="sidebar">  <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/12/'>December 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/11/'>November 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/10/'>October 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/09/'>September 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/08/'>August 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/07/'>July 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/06/'>June 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/05/'>May 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/' aria-current="page">May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div>  <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div>  </div>  <div class="fixed"></div> </div>   <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div>  </div>  </div>  </body> </html>

Webmasters Gallery

Archive

Desktop Wallpaper Calendars: June 2015

Fishing Is My Passion!

Strawberry Fields

The Amazing Water Park

Gravity

R U Ready for Summertime?

June Is Here!

Let The Spring Set You Free

Caution! Hot June

Summer Time…

Night Night!

Knitting For Summer

Periodic Table Of HTML5 Elements

Shine Your Light

Lavender Is In The Air!

Through The Savannah

Only True Love Stays

Scattered Leaves

Springtime Bubbles

Happiness Together, Forever

Hershel The Walking Dead

Join In Next Month!

What’s Your Favorite?

Footnotes

Pure Inspiration: 33 New and Award-Winning Websites

Lining.js: Controlling Text Lines per CSS Selector

How To Use Autoloading And A Plugin Container In WordPress Plugins

Let’s Begin

Folder Structure

The Main Plugin File

Autoloading

Adopting The PEAR Naming Convention For Class Names

What About The WordPress Coding Standards For Class Names?

Building Our Autoloader

Plugin Container

Uses Of Our Plugin Container

Store global parameters in a single location

Store objects in a single location

Service definitions

Building The Plugin Container

Example Plugin: A Settings Page

The Simplarity_SettingsPage Class

The `Simplarity_SettingsPage` Class