Collective #417

Original Source: http://feedproxy.google.com/~r/tympanus/~3/R_Z1paQaFhs/

C417_HelloSign

This content is sponsored via Syndicate Ads
HelloSign API: Everything IT requires and Developers love

With a robust SDK, amazing support, detailed documentation, and super clean dashboard, HelloSign API is sure to make your team happy.

Try it free today

C417_houdini

Houdini’s CSS Paint Polyfill

A polyfill for the CSS Paint API, with special browser optimizations.

Check it out

C417_dailycss

Daily CSS Design

Colorful daily code experiments by Bjørn Fjellstad.

Check it out

C417_signale

Signale

Signale is a configurable console logger with status reporting and handling of output rendering processes of other node modules and applications.

Check it out

C417_segmenttype

Segmented Type

A fantastic exploration of segmented typefaces. By Marcin Wichary.

Check it out

C417_alessi

The Five Seasons

A beautiful web experience to showcase the Alessi home fragrances.

Check it out

C417_play

Toybox

A collection of computational playthings made by Jean Lo. Check out the GitHub repo.

Check it out

C417_pointervents

Managing SVG Interaction With The Pointer Events Property

Tiffany B. Brown shares some interesting facts about the pointer-events property.

Read it

C417_nightowl

Night Owl

A dark VS Code theme with good contrast for nighttime coding. By Sarah Drasner.

Check it out

Screen Shot 2018-05-21 at 14.40.34

Never forget type=”button” on generated buttons!

Lea Verou shares how type-less buttons can become troublesome.

Read it

C417_checkboxes

Wobble Checkboxes

Some nice wobbly checkboxes made by Tamino Martinius.

Check it out

C417_vuido

Vuido

With Vuido you can create lightweight, native desktop applications using Vue.js.

Check it out

C417_errormess

How not to write an error message

John Moore Williams’ collection of error messages gone wrong.

Read it

C417_vr

Augmented And Virtual Reality Icon Set

A lovely AR and VR related icon set with beautifully colored illustrations made by Vexels for Smashing Magazine.

Get it

C417_jswins

What if JavaScript wins?

Anil Dash explores the possibility of JavaScript being the first-ever truly dominant programming language.

Read it

C417_font2

Free Font: Rallye

A racing game inspired typeface designed by Charlie Le Maignan.

Get it

C417_lordicons

Lordicon

A set of animated SVG icons and illustrations for web and mobile projects.

Check it out

C417_stream

Strimpack

A tool for live streamers to set up their own site, chat, subscription system and forum.

Check it out

C417_font1

Free Font: Dacha

A playful and delicate typeface designed by Denis Serikov.

Get it

C417_MeetHub

MeetHub

An open source MeetUp clone built with Python and Django. Made by Iyanu Ajao.

Check it out

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

23 amazing free Google web fonts

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/IYp_AG04qp8/20-amazing-free-google-web-fonts

Looking to start your next digital project? Be it a website, app or other screen-based venture, there’s an abundance of high-quality and (best of all) free web fonts out there. Let’s take a look at some of the best options. You’ll find them all, and many more, at fonts.google.com.

For a wider range of options, take a look at our round-up of the greatest free web fonts.

01. Spectral

Spectral comes in seven weights for all your typographical moods

Commissioned by Google Fonts for use in Google Docs, Sheets and Slides, but suitable for any project, Spectral is a versatile serif face created by Production Type in Paris that's available with seven weights of Roman and Italic, from Extra-Light through to Extra-Bold, with small caps included. Inspired by six centuries of French-type design, it's designed to look good on-screen, making even the most text-heavy pages easier to read.

02. Bubblegum Sans

For friendly type that really pops, give Bubblegum Sans a go

Relentlessly upbeat with friendly brushed glyphs, Bubblegum Sans is a big and bouncy font designed by Angel Koziupa of Sudtipos and produced by Ale Paul. It's something of a 21st century tribute to the sort of lettering you'd see in 1930s advertising, with, we reckon, just a hint of Dr Seuss madcap charm.

03. Anton

Step away from the Impact!

If you're after an eye-catching sans serif display font, it's terribly easy to go for the ubiquitous Impact, especially if you don't have Compacta Bold to hand, but if you want something a little more suitable for modern use then Vernon Adams' Anton is a smart pick. Anton has been reworked from traditional advertising sans serifs, then digitised and reshaped for use as a webfont, with the counters opened up and the stems optimised for use on-screen.

04. Rubik

Rubik features subtle, rounded corners

A sans-serif family with five weights – Light, Regular, Medium, Bold and Black, all with italics – Rubik has subtle, rounded corners and is ideal for both body copy and headlines. It was designed by Philipp Hubert and Sebastian Fischer at Hubert and Fischer. 

05. Monoton

Monoton is a contemporary take on metalpress fonts

A display font (recommended to be used above 30pt) much in the style of Alex Trochut, Monoton is a contemporary take on metalpress fonts, is another font designed by Vernon Adams. It's perfect for a quirky headline on your site – as the estimated 320,000 websites it has been used on proves. Pair it with a modern serif for a contemporary yet classic feel.

06. Karla

Karla comes in Regular and Bold, along with italics

Karla is a grotesque sans-serif typeface in Regular and Bold (along with italics) with some rather nice quirks – check out the subtle, curved descenders on the ‘q’ and ‘y’, for instance. Designed by Jonny Pinhorn, it's equally appealing at over 40pt right down to body copy sizes. It supports Latin and Tamil scripts. 

07. Baloo

You can use Baloo in nine Indian scripts, if you so wish

According to its Google Fonts description, Baloo is "a perfect blend of pointy paws in a coat of fur". While we're not sure it's quite that animalistic, we think it's an intriguing rounded display face, that’s also available in nine Indian scripts along with a Latin counterpart. It's versatile and, well, rather beautiful.

08. Neuton

Neuton is a versatile, Dutch-style face

Neuton is hugely versatile Dutch-inspired face by designer Brian Zick. It's a little like Times in structure, with its large height, short extenders, and compact width and is perfect for body copy. It's available in Extra-Light, Light, Regular, Regular Italic, Bold and Extra Bold. 

09. Alegreya SC

This all-caps face creates impact for headlines

If you’re looking for an all-caps typeface for a bit of impact in your headlines or supporting text, Alegreya SC may be just the ticket. Pair it with the rest of the Alegreya family for elegant consistency across your screen projects.

10. Lilita One

Use Lilita One at 40pt or over for maximum impact

A little bit condensed, a little bit rounded, and a little bit quirky in its rounded terminals and soft appearance, Lilita One is a fun display font for headlines and shorter text (perhaps navigational elements). It's best used at 40pt and above, we reckon.

11. EB Garamond

Worth checking out, even though it’s currently only available in Regular

EB Garamond is an open source revival of Claud Garamond’s classic typeface from the mid-16th century, and we can’t really explain it in any more detail. A sublime and elegant body font, even if it is only available in Regular at this point. It’s worth checking out Cormorant Garamond, as well.

12. Lora

Lora is ideal for large chunks of body text

Available in Regular, Regular Italic, Bold and Bold Italic, Lora is a serif font particularly suited to reams of body text. Google says "the overall typographic voice of Lora perfectly conveys the mood of a modern-day story, or an art essay". We particularly like the way the stem flows into the tittle on the lowercase ‘i’ in Regular Italic.

Next page: more great Google web fonts

13. Space Mono

This sci-fi-style face comes in Regular and Bold versions

Geometric fuses with grotesque in this sci-fi-esque design. A fixed-width family in Regular and Bold (with italics – Regular Italic being our favourite, thanks to its wonderful descenders and serifs), Space Mono is one cool display face. As well as in headlines, use the Regular weight sparingly for short passages of text.

14. Kaushan Script

This calligraphic font purposefully avoids typographic perfection

The calligraphic, energetic Kaushan is a script font that deliberately avoids typographic perfection, with slight variation in angles between verticals in characters and uneven positioning along the baseline. For a script font it’s very readable, even at small sizes – but of course we’d only recommend it for headlines, used in moderation.

15. Julius Sans One

Try Julius Sans One for subtle headlines that still make an impact

There's more than a hint of Roman here, with a modern twist to some of the legs, making Julius Sans One a thin display font perfect for subtle, yet still impactful, headlines. Pair it with the likes of Lato Light, maybe, for a refined, low-key style.

16. Courgette

Use this medium-contrast italic-only font larger than 40pt

A brush script with flourishing impact, Courgette is a medium-contrast italic-only font. Yes, you’ll want to use it larger than 40pt, but it was designed so that the low stroke contrast can even work in body text (although we’d suggest you are cautious if you take that advice).

17. Wire One

This condensed sans is sharp and stylish

Wire One is so thin you’re not going to want to use it at anything below 12pt – and even that may be pushing legibility. It’s a lovely condensed sans, nonetheless, and its minuscule dot terminals are quite beautiful. 

18. Cormorant

Cormorant was inspired by Claude Garamond

This is one behemoth of a free typeface. It comprises Roman, Italic, Infant, Infant Italic, Garamond, Garamond Italic, Upright Cursive, Small Caps, and Unicase; and five weights – Light, Regular, Medium, SemiBold and Bold. You could easily build a whole style around this Claude Garamond-inspired number.

19. Righteous

Righteous’ lowercase ‘e’ will divide opinion

There’s a touch of avant-garde in this display font, inspired by the capital letterforms from the deco posters of Hungarian artist Robert Berény for Modiano. While the lowercase ‘e’ may be a little sharp for some, it’s without doubt an arresting font when used at large point sizes.

20. Bungee Shade

Bungee celebrates urban signage

If you want ultimate impact with your headlines – and even a start for your graphic projects – Bungee Shade is a great shout. Bungee is a celebration of urban signage, and Shade is just one of five variants. Check out the regular Bungee for a less extravagant, yet still impactful display font (and Bungee Inline for a lovely reversal of Shade).

21. Amatic SC

Open source face Amatic SC has a hand-drawn aesthetic

‘Hand-drawn’ and ‘web fonts’ don’t often go together in the same sentence, but Amatic SC (small caps) is undoubtedly one of the better open source offerings out there. Use it sparingly in both headlines and shorter measures of text for a crafty feel.

22. Roboto

Roboto is used on over 16 million sites worldwide

Roboto is one of the most common open source web fonts out there (used on over 16,000,000 sites worldwide), and for good reason. It's a surprisingly rhythmic sans that can be used alongside Roboto Condensed and Roboto Slab for a consistent, contemporary style.

23. Arvo

Geometric slab Arvo works as well in print as it does on screen

A geometric slab, Arvo is equally at home in print as it is on screen – as long as you’re using it for headlines, that is. Arvo is hugely legible at any size over 30pt, and – particularly in the Bold weight – a font that will stop your viewers in their tracks.

Related articles:

50 best free fonts for designers4 modern brands flying the flag for script fontsThe rules of responsive web typography

Questions to Ask Clients Before Starting a Project

Original Source: https://inspiredm.com/questions-to-ask-clients-before-starting-a-project/

Graphic design clients come in a wonderful variety, but every designer has their tales of horror to tell about the treatment they’ve received from some clients. Much of the time trouble originates from misunderstandings, so if the potential for this can be reduced from the start, it will help avoid the resultant problems.

Knowing what to ask is important, and then actually asking the necessary questions is even more important. In this article we’ll share the first part of that task, and it will be up to you to implement it when the time comes.

1. What is your budget for the project?

This is the most important question of all. Many clients have unrealistic expectations, and they may expect a fixed cost to cover everything they request. Asking this question up front lets the client know your costs may be not quite so fixed, and that they’ll need to adjust their expectations to suit their budget.

You will also be able to provide your client with better advice this way. When you know what the client can spend, you can begin calculating what options to suggest. For example, on-location photography is more expensive than stock photography, but gives much better results. You’ll be able to give advice that helps the client make the right decisions.

gif illustration by R A D I O

2. When do you need the project completed by?

Clients also may have unrealistic expectations about the creative process, not realizing it can take time to produce quality work, and expecting you to work like you’re on a production line.

Creative work is a process that normally takes time. We may have moments of intense inspiration which drive us to produce a masterpiece in record time, but normally there are many steps to complete: conceptualizing, research, drafting, editing, rendering, and so on.

If the client gives a tight deadline, get them to justify it. Sometimes clients just want the job done within a certain time frame, and there are times that they won’t really have a reason. Clients with a reason should get priority because they know what they want and why they want it.

3. Who is the intended audience for this work?

It’s very important not to waste your time going down the wrong path. You can’t make assumptions about who the client is attempting to appeal to. Also, having this knowledge, you can make suggestions that the client hadn’t thought of. This makes the client feel secure that they have chosen a professional who can help them make the right decisions.

illustration by Olia & Roma

4. What features in this work do you want to have emphasis?

Clients need to identify the image they want to project to their audience. If they don’t have a strong sense of identity and purpose, you’ll be wandering aimlessly with no reference point to begin from.

What may happen then is you’ll spend time designing something that the client may not necessarily like, and that happens because you’re not sharing a common vision.

The best designs happen when you and your client are in harmony about what the finished work should look like and what goals it should achieve.

5. What similar items appeal to you?

You may need to clarify this question. For example, if it is a website design project, you should ask the client which websites they like best and why they like those sites. If it is a logo design project, ask which logos of other companies are their favorites and why. And so on and so forth.

Asking this kind of question helps establish what the client finds appealing. That may not necessarily be what’s best for them, and you can advise them if you have knowledge that can help them make a better decision, but it also helps you avoid a situation where the client is not satisfied with what you produce.

When you know what the client already likes, you job becomes far easier, because you can design appropriately. Just make sure you get a decent number of favorites so you can find what the examples have in common.

6. What designs in this category are your least favorite?

This question is probably just as important, because it helps you recognize what things you’ll need to avoid. Nothing kills a project faster than not knowing what your client does not like to see in a design.

Again, you’ll need a decent handful of examples to get some idea of the common features that the client isn’t interested in. You can ask them why, of course, but the answers may be too vague to be really helpful.

What you’re trying to gain is insight into the client’s mind, and very few clients know themselves well enough to provide that insight directly. Seeing their likes and dislikes visually in front of you is far more useful in most cases.

gif by Tim Constantinov

7. Do you have an existing design or style?

One of the most surprising things is clients sometimes forget to mention they already have a design or style theme that they need you to comply with. The more you understand about the existing corporate culture of your client, the easier it is to design for them.

Sometimes clients just expect you to know about them. They’re sure you will have heard of their business before and that you’ll know all about it. So they don’t tell you the vital information you need to know in order to produce the best results for them.

Getting that information is your job. You can’t leave it up to the client to tell you, because they almost never will.

Wrapping up

Asking these essential questions before you get started on the project is going to help you avoid problems and will also help you do your job more efficiently and effectively.

Nobody likes wasting time on a project and then not getting paid for their efforts. As creatives, it can be especially rough on you when a client rejects your work, and that can affect your confidence as you go to start on the next project.

If you ask the right questions, you’ll know the right way to go about the task, and the result is better for everyone involved.

header image courtesy of Matt Chase

The post Questions to Ask Clients Before Starting a Project appeared first on Inspired Magazine.

Does Your Ecommerce Store Need a Blog?

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/r6K0bTkRUxM/does-your-ecommerce-store-need-a-blog

It takes a significant investment of time and resources to run an ecommerce store as is. Setting up your store, regulating inventory, providing customer service and the like will take up the lion’s share of your attention. It makes sense to want to streamline your workload by focusing on the essential functions. The thought of […]

The post Does Your Ecommerce Store Need a Blog? appeared first on designrfix.com.

Exploring Dark and Gothic Trends in Web Design

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/LERhk9vkf-4/

In today’s web design world we see waves of minimalist, modern designs that often stick to light colors, standard fonts and lots of space. However, many industries and brands require an alternative approach.

For example, a gaming website might have a better effect with dark tones and gothic-style text. Dark web design can represent class, ruggedness or mystery. You can even see it used when someone is trying to communicate a sense of power. Both masculine and feminine designs use dark and gothic elements. While one website might want to show the strong side of being a man, another might want to display the elegance of being a woman. That’s not always going to be the case, but it works when implemented properly.

It’s important for designers to avoid getting stuck in the rut of only developing the same, “modern” white websites and apps. Because eventually, you’ll run into a client who craves something more sinister, elegant or strong. In that case dark, gothic web design comes in handy.

Therefore, we put together some examples of this type of design. This way, you can reference back to these excellent designs when you’re looking for some inspiration.

Gjezarian

Gjezarian

Here’s a great example of how darker designs often work for female-centric websites. Jewelry and clothing often make people feel richer or more elegant. Therefore, the darkness in a design like this mimics that of a classy, dark restaurant or club. It almost makes the user feel like they’re going to end up hanging out with celebrities if they buy the product.

Olly Moss

Olly Moss

A gothic design doesn’t always mean that you have to make everything black. For instance, this portfolio-style website features a mainly white background. Combine that with the black font and logo and it lets off a feeling of robustness. Not only that, but the gallery pieces have their own gothic appearances.

Black Dog Films

Black Dog Films

Black Dog Films takes its name and uses it to its advantage. The majority of the website has a black header, with shadows placed on the majority of images. You’ll also notice that the logo appears to be rigidly drawn, presenting a rugged, yet powerful, appearance.

Immortal Night

Immortal Night

It’s rather common to see a dark, gothic design on a video game website. It’s especially common when that video game relates to something mythical like vampires or zombies. Notice how the bright red colors create contrast with the black background. This is essential for using darker colors effectively.

Department Creatif

Department Creatif

Here’s a website that merges the trend of retro typography and darkened themes. This is actually a very common way to create header images, where the background is dimmed quite a bit so the text placed on top of it can be viewed properly.

Tender to Art

Tender to Art

A dark design doesn’t have to be complicated. This incubator of contemporary art sticks to the modern layout, with bold typography, minimal content and interesting animations as you click through the website.

Ever and Ever

Ever and Ever

One of the great things about this design is the contrast we see with the white human figures. It almost looks as if the figures are statues from a long time ago, going along with the gothic theme and drawing the eye to those individuals as it sits right on top of the darkness.

Nerisson

Nerisson

Working with darker designs means that you have the opportunity to create an ominous feeling with even more dark elements. The “Ever and Ever” example we saw above is the exact opposite of this one. Instead, we see minimal contrast, where the user has to almost squint to see what’s going on.

These are just a few examples of a darker, gothic web design style. We hope you’ve enjoyed them. And if you have any other examples you’d like to suggest, feel free to leave them in the comments below.


Ucraft Review: Building Creative Websites With Strong eCommerce Support

Original Source: https://inspiredm.com/ucraft-review-building-creative-websites-with-strong-ecommerce-support/

Creatives need to look creative online.  Unfortunately, this often means a trade-off in the eCommerce department. You may be able to make a beautiful, visual website, but that awesome portfolio is nothing without the ability to sell your merchandise, prints, and other products. That’s where Ucraft comes into play. This Ucraft review will outline the stunning website templates provided by the page builder and walk you through some of the excellent selling tools you need in order to make money as a creative.

Overall, Ucraft is dedicated to building better websites in a faster manner. Therefore, it delivers a true drag and drop builder so that you don’t have to learn about coding or much website development. You’re able to craft stunning, professional websites for photography, web design, writing, and art. Sure, others can take advantage of the Ucraft tools, but the company has focused quite a bit on helping out creatives with its strong media support.

Ucraft Review: The Best Features
An Awesome Free Landing Page Creator

The landing page creator is free, and you’re able to make your one landing page within minutes. You start the design process by choosing from a template. After that, all the changes are automatically saved and published in Ucraft.

Designer Tools with Drag and Drop Functionality

The designer tools make sure that you can add a designer touch to your website even if you’re not that into design. From a full UIKit for advanced modifications, to simple tools for adjusting headings, colors, and sizes, the Ucraft design end is as simple as they come.

Strong eCommerce Support for Regular Businesses and Creatives

The eCommerce plan (outlined below,) is pretty much what most smaller and mid-sized businesses will need. However, you can also upgrade to get extremely advanced tools for selling your products.

In short, Ucraft has social eCommerce options for selling on places like Facebook and Amazon. You also receive product SEO features, over 70 payment and shipping solutions, and secure transactions. What’s more is that Ucraft takes nothing in terms of transaction fees.

I like the fact that you can integrate with dozens of apps and eCommerce platforms. For instance, you may want to sell on a place like eBay or connect your store to Zendesk. Both are possible, along with several other integrations.

As mentioned, the eCommerce plan is pretty powerful, with support for 50 products, unlimited storage, payment and order management, and multi-currency support.

However, you can upgrade to higher plans to get things like more products available,  invoices, favorite lists, VAT support, tax exemptions, eBay selling, real-time tracking, and more.

A Free Logo Maker

The free logo maker from Ucraft is a huge advantage for small businesses and creatives. Logos of svg and png formats can be created.  Not only does it have some interesting designs for you to start off with, but you can get creative yourself and brand your website the way you want. What’s great is that after you design your logo it goes on your website and you also receive a file to use it elsewhere for your business.

Insert the logo into all marketing materials, include it in your email newsletter, and print it on your business cards. This is a truly free logo maker, which is not always the case when you sign up for something like this. Sometimes you get forced to pay or you don’t get to remove the logo maker’s branding. That’s not the case with Ucraft.

Ucraft Review: The Pricing

You can pay for Ucraft on a monthly or yearly basis. The yearly plans save you extra money over the long run and you get a custom domain, but you still have the option to pay per month if you’re still not up for the commitment.

One of the best parts about Ucraft is that you can go with the free plan to gain access to some wonderful landing page tools and more. After that, you have to start paying, but the plans are less expensive than much of the competition, and you get that coveted eCommerce support.

Here are the pricing plans on a yearly subscription to see what you receive:

Landing Page – Free forever. You get one landing page, customizable content, the option to connect your own domain, an SEO app, the option to invite team members, customer support from Ucraft, and free hosting. The only downside is that you have to live with the Ucraft watermark on landing pages.
Website – $6 per month gets you a custom domain, one website (unlimited pages,) a drag and drop builder, the removal of the Ucraft watermark, 24/7 customer support, over 15 integrations, free hosting, an SEO app, unlimited articles, multilingual tools, and more.
eCommerce – This plan costs $13 per month and it provides everything from the previous plans, a custom domain, support for 50 products, no transaction fees, over 70 payment and shipping methods, multi-currency support, SEP for products, payment and order management, real-time tracking, unlimited storage.

As you can see, these pricing models are pretty impressive. Most website builders cost more than $6 per month, and you’ll be hardpressed to locate many eCommerce builders for less than $13 per month.

What’s cool is that several other plans are provided if you want to upgrade past that $13 per month eCommerce package. For instance, a Pro plan is sold for $31 per month and an Unlimited plan is set at $60 per month. In short, if you want to expand your eCommerce store and get the best tools possible, that’s when you would upgrade.

Finally, all Ucraft users get the following for free:

Templates
SEO tools
Designer tools
A logo maker
Articles

Who is Ucraft Best Suited For?

As I talked about a few times in this article, Ucraft makes the most sense for creatives and small businesses. It’s less expensive than so many other website and eCommerce builders on the market, and the company does a great job with its modern, beautiful templates.

The features are still robust enough for you to scale up in the future, and you get the bonuses of the free logo maker, SEO tools, and templates.

If you have any questions about this Ucraft review, let us know in the comments.

The post Ucraft Review: Building Creative Websites With Strong eCommerce Support appeared first on Inspired Magazine.

Collective #419

Original Source: http://feedproxy.google.com/~r/tympanus/~3/Rgq9JlCzzQA/

C419_HelloSign

This content is sponsored via Syndicate Ads
HelloSign API: Everything IT requires and Developers love

With a robust SDK, amazing support, detailed documentation, and super clean dashboard, HelloSign API is sure to make your team happy.

Try it free today

C419_layout

Getting Started With CSS Layout

A guide by Rachel Andrew to the various layout methods of CSS.

Read it

C419_nanojs

nanoJS

A very minimal standalone JavaScript library for DOM manipulation with a jQuery-like syntax.

Check it out

C419_oceanic

Oceanic Overlays

Watch David Khourshid and Stephen Shaw code a lovely page design. See the demo here.

Watch it

C419_saber

Saber.js

Saber.js is a minimalistic framework for building static website using Vue.js.

Check it out

C419_games

Progressive Web Games

Andrzej Mazur explores the concept of Progressive Web Games to see if it is practical and viable in a modern web development environment, using PWA features built with Web APIs.

Read it

C419_theme

Dark theme in a day

Read how Marcin Wichary used a bunch of modern CSS to create a night mode for an app.

Read it

C419_servicework

The Service Worker Cookbook

A collection of working, practical examples of using service workers in modern web sites.

Check it out

C419_mint

Mint

A front-end programming language, aiming to solve the most common issues of Single Page Applications (SPAs) at a language level.

Check it out

C419_editor

Text editing techniques every Front-End developer should know

Ben Frain collects some of the most useful and underused techniques for text editing.

Read it

C419_wire

Wired Elements

A set of common UI elements with a hand-drawn, sketchy look.

Check it out

C419_testing

My Struggle with Testing Code

Dave Rupert shares some insights on knowing what to test, how to test, and how to decouple efficiently.

Read it

C419_chaining

How to decide whether you should chain or extend CSS classes

Sarah Dayan compares the chaining and extending techniques of modular CSS.

Read it

C419_static

Incremental Rebuilds and Hot Reloading: 60 Lines of Literate Code for Static Blogging

Adam Pearce shares the few lines of code he built his blog with.

Read it

C419_ai

Elements of AI

A free online course on Artificial Intelligence from Helsinki University and Reaktor.

Check it out

C419_wordpress15

WordPress: The 15 Year Revolution

An article by Morten Rand-Hendriksen on the beginnings and outlook of WordPress.

Read it

C419_gdpr

GDPR terminology in plain English

Alex Ewerlöf explains the most important aspects of GDPR in an easy to understand way.

Read it

C419_crypto

Beginner’s Guide to Cryptocurrency and Blockchain

The ultimate beginner’s guide to understanding cryptocurrency.

Check it out

C419_asteroid

AsteroidOS

AsteroidOS is an open-source operating system for smartwatches.

Check it out

C419_django

Building Modern Applications with Django and Vue.js

An AuthO tutorial on how to create a full-stack application with Django and Vue.js.

Read it

C419_font

Free Font: Saucy_AF™

Arby’s sauce calligraphy as free font.

Get it

C419_retrogrid

From Our Blog
Grid Layout with Motion Hover Effect and Content Preview

A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens.

Check it out

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

20 Useful Firefox Sidebar Add-ons

Original Source: https://www.hongkiat.com/blog/20-useful-web-applications-for-firefox-sidebar/

Useful sidebar add-ons for Firefox browser that give you quick access to your most-used apps and service.

The post 20 Useful Firefox Sidebar Add-ons appeared first on Hongkiat.

Visit hongkiat.com for full content.

Photography: Hong Kong Ballet Campaign

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/5X65xpStTfQ/photography-hong-kong-ballet-campaign

Photography: Hong Kong Ballet Campaign

Photography: Hong Kong Ballet Campaign

AoiroStudio
May 28, 2018

Let’s tackle this Memorial Day with a colourful campaign for the Hong Kong Ballet, photography by Dean Alexander. Dean is working in the field of advertising/fashion photographer and film director/cinematographer. His work has taken him to over 50 countries and has won over 150 International Awards worldwide. What an accomplishment, the quality of this campaign is totally upscale. It looks like it was a fun client! It’s like the one thing they did care about was to give the creative a full “Carte Blanche” experience which judging by the results. It really paid off, beautifully!

Learn more about Dean Alexander
Photography
Photography: Hong Kong Ballet CampaignPhotography: Hong Kong Ballet CampaignPhotography: Hong Kong Ballet CampaignPhotography: Hong Kong Ballet CampaignPhotography: Hong Kong Ballet CampaignPhotography: Hong Kong Ballet CampaignPhotography: Hong Kong Ballet Campaign

photography
hong kong
dean alexander


Understand Web Development in Less than 1 Hour

Original Source: https://www.sitepoint.com/understand-web-development-less-1-hour/

This article was created in partnership with KTree. Thank you for supporting the partners who make SitePoint possible.

This article explains what web development is, by exploring how it started and how it evolved. This is not an exact chronicle of the web’s evolution, but focuses more on what the needs for this evolution were, so we can understand the technology.

It all started with information. Humans have always needed to find ways to share information with others. As you are aware, before the internet, information was shared via letters, newspapers, radio and television. Each had its own disadvantages, which allowed the internet’s information highway to come to the forefront.

1. What is the Web?

What if you can publish information in a place where whoever is interested can go and read that information? That’s exactly what the web does. You keep the information on a web server, and people can read that information using clients (browsers). This architecture is called ‘server-client architecture’.

Why HTTP?

Initially, this information was all stored as text — that’s why the name hyper-text transfer protocol has stuck even though now text, media and files are all exchanged via this protocol.

2. How Is Information Kept, Retrieved and Saved?

The most basic and long-lived way of storing information on the web is in HTML files. To better understand, let's take a simple example of company publishing its price information so its vendors can download and view the list, which consists of products with a price and effective date. This was kept as a HTML file on the server, which can be viewed using a web browser. The browser requests the file from the sever, and the server serves it up and closes the connection.

HTML is a standard markup language used to create web pages. In other words, it’s a simple text file with tags that help the browser figure out how to display the information.

<!DOCTYPE html>
<html>
<body>

<h2>Price List</h2>

<hr>

<table>
<tr>
<td>Product Name</td>
<td>Sku</td>
<td>Price</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234566</td>
<td>60.USD Per Hr</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234566</td>
<td>60.USD Per Hr</td>
</tr>
</table>

<hr>

</body>
</html>

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Basic formatting and styling can be done via HTML, but it’s better to use CSS for this.

A web application contains many pages, either dynamic or static. If we use HTML tags for styling the information we have to repeat this information in every page. Suppose we want to change the background color — we have to edit the HTML for every page that is part of the site.

Instead, we can use CSS to store our style definitions in one location, and refer each HTML page to that location. By changing the CSS file, we can change the background color on every page that looks to the stylesheet for style defintions.

CSS does more than just setting the background color, of course: it allows us to set colors for all sorts of elements, fonts, page layouts, and much more.

We have styled our previous example using CSS. Let’s say we are using tables on different pages, but using the same CSS styles. We can move all this style information out to its own file.

<!DOCTYPE html>
<html>
<head>

<!–– for simplicity we have kept the CSS in inline in the HTML – you can keep the css in any file with a .css extension and include it using <link rel=”stylesheet” href=”styles.css”> –>

<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>

</head>
<body>
<h2>Price List</h2>

<table>
<tr>
<td>Product Name</td>
<td>Sku</td>
<td>Price</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234564</td>
<td>60.USD Per Hr</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234565</td>
<td>40.USD Per Hr</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234566</td>
<td>50.USD Per Hr</td>
</tr>
</table>
</body>
</html>

JavaScript

JavaScript is the third pillar of the web, alongside HTML and CSS, and it is normally used to make web pages interactive. To understand JavaScript (JS), we need to know what the DOM is.

The Document Object Model (DOM) is a language-independent application programming interface that turns the HTML document into a tree structure. The nodes of every document are organized in that tree structure, called the DOM tree, with the topmost node called the “Document Object.”

Sample DOM Tree (Source: Wikimedia Commons)

When an HTML page is rendered in the browser, the browser downloads the HTML into local memory and creates a DOM tree to display the page on screen.

Using JS, we can manipulate the DOM tree in several ways:

JS can modify the DOM tree by adding, changing, and removing all of the HTML elements and attributes in the page.
JS can change all of the CSS styles on the page.
JS can react to all of the existing events on the page.
JS can create new events within the page and then react to all of those events.

In our JavaScript example, we continue with our price list example by adding another column — Special Price — which is hidden by default. We’ll show it once the user clicks on it. In technical terms, we use a click event attached to the web element (anchor tag) and change the existing text of the web element, in other words manipulating the DOM. To do this, we have to use the browser’s accepted scripting language, which is always JavaScript.

<!DOCTYPE html>
<html>
<head>
<!–– for simplicity we have kept the CSS in inline in the HTML – you can keep the css in any file with a .css extension and include it using <link rel=”stylesheet” href=”styles.css”> –>

<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}

#specialprice {

}

</style>

</head>

<body>
<h2>Price List</h2>

<table>
<tr>
<td>Product Name</td>
<td>Sku</td>
<td>Price</td>
<td>Special Price</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234564</td>
<td>60.USD Per Hr</td>
<td id=”specialprice”> <a href=”” onclick=”return false;”> Click Here </a> </td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234565</td>
<td>40.USD Per Hr</td>
<td id=”specialprice2″> <a href=”” onclick=”return false;”> Click Here </a> </td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234566</td>
<td>50.USD Per Hr</td>
<td id=”specialprice3″> <a href=”” onclick=”return false;”> Click Here </a> </td>
</tr>
</table>

<script>
document.getElementById(“specialprice”).onclick = function() {myFunction()};

function myFunction() {
document.getElementById(“specialprice”).innerHTML = “20% Off”;
}
</script>

</body>
</html>

Forms

Up til now, we’ve only discussed getting data from the server. Forms are the other side of HTML, which allows us to send information to the server. We can use forms to either update existing information or add new information. The most commonly used methods in HTML forms are GET and POST.

Continue reading %Understand Web Development in Less than 1 Hour%