Archive

Archive for September, 2015

Sketch 3 and the Single-Sided Border Hack

September 26th, 2015 No comments
00-featured-sketch-border-hack

Bohemian Coding created Sketch App for Mac OS X as a means to help designers mockup user interfaces, and for that reason many of the styles are CSS-centric.

Shadow is one of them, where the values are X, Y, Blur and Spread. With CSS we would represent this as box-shadow: x, y, blur, spread – this helps facilitate the Sketch to CSS workflow when you right-click on a layer and select “Copy CSS Attributes”.

But sadly, there is a flaw.

Borders.

You can’t add a border to only one side of a shape, and unless somebody has mentioned this trick you’ll likely spend hours trying to figure it out. Your secret weapon is the Inner Shadow.

Make sure that the Blur and Spread values are 0, and use the X and Y values to define where the border will appear. For multiple borders simply add more inner shadows.

Single-Sided Border Hack in Sketch

But there is a downside. When you copy the CSS attributes to the clipboard the borders will in fact copy as box shadows, which is obviously not the desired result.

In any case it’s not too much trouble to apply to the hack and manage the CSS separately. So next time you want to apply a single-border to a shape in Sketch, remember this hack and put it to good use!

Read More at Sketch 3 and the Single-Sided Border Hack

Categories: Designing, Others Tags:

Comics of the week #306

September 26th, 2015 No comments

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

No medication needed

Life imitates art

If you’re going to gripe, get it right

Can you relate to these situations? Please share your funny stories and comments below…

300+ Seamless Photoshop Patterns – only $9!

Source

Categories: Designing, Others Tags:

popSelect Transforms a Select Box into a Popover Field

September 25th, 2015 No comments
popselect-preview-thumb

The traditional HTML select menu has been around for decades and is widely supported in all browsers. It’s a staple of online forms and all areas of web UI design.

But what if there was a way to customize these select menus with popover suggestions? Well that’s just what Jay Kanakiya asked himself before creating popSelect.js.

It’s a free open source jQuery plugin specifically made for customizing standard HTML select menus. They still behave in a similar manner with a greater focus on separating the user experience into more dynamic functionality.

The live demo page says it best and if you have time I’d highly recommend checking it out.

Each item becomes limited based on what’s already been added to the list. Take note how this actually differs slightly from the traditional select menu where the user can only select one item. With popSelect users can choose multiple items from the list and submit the form as a single field with checkbox behavior.

If you’d want to learn more and download a copy visit the official popSelect repo with code samples and developer notes. The demo page also has clean documentation with options and parameters that can be passed into the function call.

This may not be a staple in every new web project, but it’s certainly a unique plugin idea & it’s a welcome addition to the open source jQuery community.

Read More at popSelect Transforms a Select Box into a Popover Field

Categories: Designing, Others Tags:

Real-Time Server Monitoring with PatrolServer

September 25th, 2015 No comments
00-patrolserver-featured-logo

Often times problems with your server environment can occur from a lack of security updates. These exploits allow hackers to force their way into part of your server whether it’s a database setup, CMS dashboard, or raw access to server files.

A new webapp PatrolServer is meant to change all that. It’s a real-time monitoring service to detect changes or discrepancies on a server. This can of course relate to platforms like Apache or MySQL, but it also includes software like WordPress or Drupal.

All communication between servers is fully encrypted and your logs are stored on the backend of your account. PatrolServer’s FAQ page answers many common questions that beginners have about the service.

Whenever any piece of software is outdated or if there are any potential security threats, you’ll receive an e-mail from PatrolServer with further info. Often times you’ll be given steps regarding how to patch issues or updated any outdated versions of software.

The best part is that you can actually sign up for PatrolServer completely free of charge and maintain that free account with one root domain. This means you can test PatrolServer on any website and see if it provides any value to your workflow.

Their site includes a page of outdated software stats which you can also check against your own.

PatrolServer was made to keep the web safe and make life easier on webmasters. If it sounds like something you could use then why not try it out free of charge? You can also follow updates on Twitter @patrolserver.

Read More at Real-Time Server Monitoring with PatrolServer

Categories: Designing, Others Tags:

Google’s Teaching Free Marketing Lessons with Primer

September 25th, 2015 No comments
00-google-primer-icon-logo

Google continues its inherent platform as a tech leader by teaching free marketing lessons to anyone with a smartphone.

A new app Primer is powered by Google and meant to offer the best way to learn without ever spending a penny.

Topics include things like branding, SEO, analytics, ad buying/selling and how to target the right audience. Primer is meant to be for Internet users but the marketing guides can apply to many different industries.

Each week new lessons are released for anyone to enjoy. The app is consistently updated to include new topics ranging from beginner to advanced across all areas of marketing.

If you’re even remotely interested then download Primer from Google Play or on the iOS App Store. It’s compatible with all Android & iOS devices including tablets.

So far Primer has received a sea of 5-star ratings with more people leveraging the knowledge from this incredible application. Plus it works even when your offline which is great for idle time in the waiting room.

There’s a brief FAQ page that covers a few typical questions about how it works. Overall it’s a pretty straightforward application, but if you’re looking to learn more you can follow updates on Twitter @yourprimer.

Read More at Google’s Teaching Free Marketing Lessons with Primer

Categories: Designing, Others Tags:

CodePen Radio talks intricacies of the Web Development Business

September 25th, 2015 No comments
codepen-logo

The online cloud IDE platform CodePen has become a popular tool amongst frontend developers. It was co-founded by Chris Coyier, Alex Vazquez, and Tim Sabat a few years ago as a way to offer real-time updates on a web platform.

With its tremendous success the three have created a podcast under the name CodePen Radio. It’s meant to be an outlet for sharing news, tips, and specific opinions about the web development industry.

Like most great podcasts, this one is completely free to stream with a full archive of episodes. You can stream them right from the site, pull the latest episodes in iTunes, or subscribe directly through their RSS Feed.

Most subjects cover the business as a whole, which means the little nuances of running a team or managing a full studio.

Web development is both easier and more complex than it was 20 years ago. We have open source technology that saves time, but so many options it can be tough to choose. We have much greater support in web browsers, yet so many more advanced features in HTML5/CSS3 along with JavaScript(and JS frameworks).

If you’re a developer of any kind and find a unique fascination with the business of development, then this podcast is for you!

Read More at CodePen Radio talks intricacies of the Web Development Business

Categories: Designing, Others Tags:

We Love SVG offers Open Source Icons for UI Design

September 25th, 2015 No comments
00-featured-beta-svg-love

A modern trend in web design places focus on custom typefaces hosted via open source platforms. Google Webfonts is undoubtedly the most popular choice with a growing library of fonts to choose from.

A new free platform named We Love SVG offers this same functionality with SVG icons. You simply append the .js script into your document and copy/paste the specific icon code into your HTML.

Everything is completely free and open source hosted on GitHub. It’s the best free way to incorporate icons into your design without relying on custom PNGs.

You’ll find a wide array of iconsets to choose from including Icomoon, Zocial, Entypo, and even a colored set named Flat Color.

The icons appear in your HTML as custom elements. They display individual icons based on attributes passed into the element, so in this way it’s relatively easy to shift icons and change your page styles without much hassle.

For live examples and code snippets check out the Webicon page on GitHub. This includes snippets for both jQuery + Angular, both of which are fully supported.

There’s also a wonderful blog post explaining how webicons work and which browsers support which features. This is sure to be a gamechanger for designers in search of a reputable, scalable, and free icon repository.

Read More at We Love SVG offers Open Source Icons for UI Design

Categories: Designing, Others Tags:

PHP North West 2015 Conference opens in Manchester

September 25th, 2015 No comments
00-php-elephant-phpnw2015

A fun three-day PHP event opens up the first weekend of October in Manchester, England. This is none other than PHP North West 2015 and it’s bound to be an incredible experience for anyone interested in PHP.

Over a dozens speakers are scheduled to attend talking about various subjects including PHP techniques, new frameworks, and the future of backend languages for web development.

You can learn more about the full PHPNW15 schedule on the website with full links to events, speakers, workshops and all the tantalizing food breaks.

Running for three days, this conference offers a lot in to the PHP community. Subjects range from the anticipated benefits of PHP7, HTTP 2.0, and other related technologies. Plus there’s an exciting Hackathon on October 2nd with an open participation for anyone interested.

The list of speakers is practically endless with names from all around the world including Rob Allen, Beau Simensen, and PHP core contributor Andrea Faulds.

To sign up visit the registration page for ticket info & help with travel accomidations.

If you can’t make it this year be sure to stay up-to-date with PHP NW news via their main page or on Twitter @phpnw.

Read More at PHP North West 2015 Conference opens in Manchester

Categories: Designing, Others Tags:

Iconjar App organizes your Icon Library for Free

September 25th, 2015 No comments
00-featured-iconjar-icon-app

How many times have you been digging through folders in search of a particular icon or iconset? This has always been my traditional workflow, but it seems a new app Iconjar offers a sleek alternative.

The program is only for Mac OS X 10.10 or later so unfortunately Windows & Linux users will have to look elsewhere. But for Mac users Iconjar is sure to be a staple in your design workflow.

You simply load up icons from various folders and assign them relative values like tags, iconset names, and other searchable criteria. The app connects directly into all design programs like Adobe Photoshop, Illustrator, InDesign, and of course Sketch.

But I think the absolute best thing about Iconjar is that it’s completely free! As of this writing Iconjar is currently in Beta 0.6 release with a free download link for anyone willing to try it out. It’s been given high approval by various designers & agencies like Yummygum.

The biggest downside is that Iconjar does still function as a beta product, meaning there could be unknown issues and it may not be stable for a little while longer. But from current user reports it does seem stable enough to use on everyday projects, or to at least give it a shot and see how it functions.

If you wanna try it out visit the Iconjar homepage and download the most recent version. There is no official documentation yet, but you can keep up with release notes through the Iconjar blog while awaiting an official v1.0 release date.

Also you can follow Iconjar’s updates on Facebook or via Twitter @geticonjar.

Read More at Iconjar App organizes your Icon Library for Free

Categories: Designing, Others Tags:

The Importance of Language and Character Set in Web Design

September 25th, 2015 No comments
language-charset-web-design

Looking back into history the Internet has gone through many phases. Back in the 1990s there was a lot of mis-direction among the changing character sets. These basically outlined a library of symbols which would be translated into certain characters of languages all around the world. It is an important topic to understand how we have gotten into the trends of modern web design.

I want to go into a bit of depth on points of Unicode character encoding and HTML entities. I don’t mean for this to be a full master list. But to act as more of an introduction into a topic which many designers are not familiar with. Granted the UTF-8 charset has allowed for an almost unanimous configuration of every language on the face of the Earth.

Popular Character Sets

It is notable how the majority of websites these days use a form of Unicode. Many web servers are configured to use either ISO-8859-1 or UTF-8. But there are major differences between these two character encoding libraries and the amount of data held within each one. I’d recommend this character set list which glosses over some of the more archaic models from the past.

One of the biggest reasons we do not use these older sets is because of greater support from modern libraries. Languages such as Chinese, Thai, Japanese, and Korean may all be rolled into one package. This means you can mix various languages into the same document without any problem. This is why web documents have advanced to using a more uniform character set, rather than individual solutions based on native languages.

The Basics of Unicode

Typically UTF-8 is the character encoding for documents of all types. Plain text files will often save as ISO or ASCII encoding, but Unicode has offered something much more special. Beyond just the languages it also includes references for many punctuation characters, mathematical equations, and other symbols. There is almost no limitation when we are considering the massive collection of Unicode solutions.

unicode arabic asian letter chart

But the idea of UTF-8 documents has grown substantially in recent years. Sometimes I will read about developers questions the differences between UTF-8 and UTF-16. It often changes the formatting of characters which can affect software development a lot heavier than websites. Building content online should be made as simple as possible.

The only major benefit to using UTF-16 would be generating smaller file sizes. But unless you are writing lengthy articles in various languages this should not be a problem. I am frequently visiting websites in other languages and the server load times are more than bearable. UTF-8 for Unicode web development is the easiest solution for getting some content working and running online properly.

HTML Entities

Entities are another important part of the character set encoding. Basically you can write codes into the HTML which display symbols or icons within the text. These are often called Numeric Character References(NCR) since each entity is given a specific ID number, along with a shorter alias.

html entities printed mistake typo funny photograph

As an example the copyright(©) symbol can be generated with the code © or the code ©. These both produce the same results in unicode webpages and the entities will display properly among all browsers. These present an important step forward and they dynamically changed the way developers code websites. Each of the numeric values is built on top of the character set, and the libraries have been used for many years.

Charset in CSS

One other typical anomaly which I run into is related to CSS character sets. It is very simple to update your own charset in the HTML, either as an attribute or using the tag. However in CSS it is often assumed based on the document type itself. However there is a small bit of code you may include at the beginning of the file to update the charset.

@charset "UTF-8";

This line of code should be easily recognized if you are familiar with CSS. But remember that it is not necessary unless you are using characters beyond the ASCII library. It is worth delving into this thread on Stack Overflow to learn a bit more about CSS character sets. But it can be important if you are including more dynamic UTF-8 Unicode characters directly into the document.

Tips for HTML5 Encoding

Going forward I would recommend all web developers should setup their main HTML pages with a default character encoding. It isn’t bad to leave this process up to the server, but it can be a lot better if you plan ahead. As I mentioned earlier there is a meta tag designed specifically for character encoding. Set this up in your document header, or in a heading theme template such as with WordPress to include it onto all pages.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

The other related method is to include a bit of code for http-equiv=”Content-Type”. You can read a bit more from this great article The Road to HTML5: Character Encoding. It’s a fairly lengthy article but the information is priceless. I have been so impressed with all of the standards coming out around HTML5. Character sets may initially appear to not be worth very much research. But understanding the basics can really help to wrap your mind around other more complicated topics which you may learn down the road.

Related Posts

Conclusion

I do hope this article may help some designers and web developers out there. Getting started building your own websites can be a very exciting challenge. But even after coding for years it is common to find topics which you are not familiar with. I am still constantly educating myself and researching on new ideas! It is a fun process and also very rewarding. But although character sets have been standardized and much easier to use, it is still a fun look back at the history of getting to where we are today. If you have similar ideas or questions feel free to share with us in the discussion area.

Read More at The Importance of Language and Character Set in Web Design

Categories: Designing, Others Tags: