.. Your Daily Design Dosis

Tweet Parade (no.08 Feb 2015)

| Comments Off on Tweet Parade (no.08 Feb 2015)

.. stay up to date! Time for a new roundup with last week’s best tutorials and design articles! It’s all about HTML, CSS, PHP, responsive web design, branding, SEO, WordPress and more. A broad scale of topics, but never-the-less the underlying focus is on Design.

Also I see this as my personal bookmarks of great articles from the Community of the last period. These hand-picked articles and tutorials are categorized by their main topics. The best way to keep track of these tweets is simply to follow me on Twitter.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Writing a CSS Parser in JavaScript – Hard lessons learned while building a lightweight, battle-tested, CSS parser in JavaScript. The CSS Editor is a tool that lets you design forms simply by pointing, clicking and editing.

27 Pieces Of Advice For Developers – Here’s what top developers want you to keep in mind

Utilising Node.js and npm for front-end development workflow – Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. What I hope to show you in this post, is how we can utilise Node.js in our front-end projects and not label them as “Node.js projects”.

Better SVG Fallback and Art Direction With The <picture> Element – The <picture> element provides us with a better JavaScript-less way to change the image we are serving based on different media queries and a for providing fallback for non-supporting browsers.

The HTML5 Document Outline – I think the HTML5 outline can still serve as context for trying to understand how to use new semantic elements like, section, article, aside, nav, header, and footer and it’s useful in that context. Today I’ll walk through the HTML5 document outline and how it’s supposed to work.

Four More Ways To Hide & Show Elements with HTML and CSS – The prequel to this article concentrated on classic techniques for hiding page elements; this one uses methods that work in modern browsers, with a few limitations for IE.

CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS? – With the rise of Bootstrap, BEM, SMACCs and other frameworks and methodologies, there are common best practice recommendations when it comes to naming your elements.

Getting started with React – React is an insanely powerful framework by the amazing developers over at Facebook. Implementing a virtual DOM, it allows us to render components super fast whilst removing any unnecessary overhead from DOM operations.

Font Loading Revisited with Font Events – The purpose of the approach was to avoid a typically undesirable browser behavior we often refer to as the “FOIT” (Flash of Invisible Text), in which a browser hides all text that should be styled with a custom font until that font has finished loading.

Scoping CSS Animations to Media Queries – Scoping your CSS animations and transitions to desktop, instead of removing those properties at smaller widths, is more maintainable and has to be more performant.

JavaScript Mistakes To Avoid With A Static Code Analyzer – Static analyzers look at code and find problems before you run it. They do simple checks, like enforcing syntax (for example, tabs instead of spaces), and more holistic checks, like making sure your functions aren’t too complex.

Accidental CSS Resets – Any time you use a shorthand property in CSS, you set all the values for all the properties it deals with. It’s not a bug, it’s just how CSS works. Let’s shine a light on the issue to hopefully make it more understood.

Gulp on Rails: Replacing the Asset Pipeline – Rails, unfortunately, is very opinionated, and it’s taken me a year of trial and error to land on a solution that fully integrates a Gulp-based asset pipeline with Rails without compromising existing features or sacrificing speed, power, or flexiblity.

Polylion – I figured the simplicity of the animation effect was easy enough to grok since I wasn’t doing anything super crazy code wise, but I guess the end result was that cool.

Usability, UX, Responsive Web Design, Mobile, Performance, etc.

Effective Web Typography: Rules, Techniques and Responsive Design – When it comes to content, we need to talk about web typography. Looking at modern web design trends, having responsive typography is a big factor every web designer and web developer shouldn’t miss.

The 15 Commandments of Front-End Performance – This list is the product of many years of experience in the front-end web development field. I maintain this list as a reminder to myself to always follow best practices, and to not compromise on performance, even if I’m in a time crunch

Accessibility vs User Experience: 60 FPS, Flipboard, and the High Road to the GPU – Has the pursuit of jank elimination has come at the cost of accessibility? Yes, for now, but in the end we will look back on these techniques as hacks to get around subpar browser rendering performance.

(Visual) design influences interaction – The assembly line workflow is a death punch to effective interaction. The reason this is so: you simply can’t separate visual design from interaction design.

Disabling hover interactions on iOS – Consistency is usually key in UI, so if users expect their first tap on a mobile to behave like a click, essentially all hover interactions should be disabled for the mobile UI.

Responsive Web Design for eCommerce Web Sites – Is a responsive Web site really desirable for ecommerce sites? If so, what are the key elements that you need to consider for smaller screens?

A polite rant on mobile UX – We’ve all seen mobile apps that are looking great at first glance, but after using them for about 5 minutes, we just gave up because of the horrible UX.

Deceptive Simplicity – The answer is pretty straightforward. The real user experience and information architectural challenges haven’t been solved. They’ve been swept under the rug. It’s deceptively simple.

How should drop-down menus be activated? Hover or click? – When used well, drop-down menus should help users to navigate more effectively. In this post I want to look at how drop-downs should be activated. Is it better that users open menus by mousing over them, or by a click?

Design Last – A lot of methodologies out there try to tackle this problem, but all of them rely on the same classic website development process. It boils down to the following: design and then develop. Let’s go nuts and flip this outdated methodology on its head.

Site Architecture Tips to Make Your Blog Load Faster – An aspect of SEO that deals with usability and user experience is site architecture. Observing the best practices of site architecture will make your blog load faster, which impacts your bottom line.

Testing Accordion Menu Designs & Iconography – Among UI patterns, the accordion menu is a workhorse. Its ability to collapse long lists into manageable groups is really useful for navigation menus and particularly for search filters.

How to test the usability of prototypes like a pro – If you want the best end product, you have to anticipate real user scenarios from the prototyping phase. Usability testing should be the last place to start thinking about usability.

Webdesign in Common, Web Typography, Tools, etc.

Flat Design Is Going Too FarFlat Design was the design trend of 2013. Momentum is showing no sign of slowing as more and more sites jump onto the idyllic san serif bandwagon. Where’s the creativity gone, and when will it return?

Things I’ve Learned About Sending Email, for Web Designers and Developers – I’ve learned a lot about building email, sending email and the industry that I knew little to nothing about before. Here’s a series of notes I think are helpful to know if you’re dealing with email as a designer or developer.

Controlling The Cache: Using Edge Side Includes In Varnish – In this article I’ll explain how you can benefit from using Varnish even when there are parts of your pages that can’t be cached for long periods, using Edge Side Includes.

7 Signs Your Website Design Is Bad for Business – For modern businesses, there is something way more important than the appearance: Whether or not the design helps achieve business objectives (like making money). If not, the design is just no good.

Printing Medium stories – Printing articles off of Medium might not be commonplace, but we want it to be a great experience. It might be a desire to keep our craft sharp; after all, print is a form of responsive design.

Prioritizing Structure in Web Content Projects – I believe there are real benefits to taking a structure-first approach to organizing content activities, and I’d love to hear how and if that works for your projects as well.

11 Web Design Mistakes To Be Avoided By Small Businesses In 2015 – The process of the web development is certainly cumbersome, however avoiding some of the website designing mistakes can help your business prosper in the long run.

How We’ll Design and Develop Websites In A Few Years – Let me remind you again that people who are ready when technology is ready often gain a competitive advantage and can possibly make a name for themselves at the appropriate time.

‘gonzolicious’ is a personal Tumblr blog Theme with a responsive layout and tons of powerful features, it’s a great premium theme for all kinds of blogs.

Get it here!

Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.

5 Confusing Icons and Their History – We see a lot of icons every day. From any experience in the app store to pressing play on your Walkman, we interact with them all the time. But a lot of icons that are deeply engrained in our lives don’t actually make any sense.

10 Dos and dont’s of branding your solo business – As a creative entrepreneur, sometimes it feels like you’re supposed to be automatically awesome at creating a stellar brand for your solo business. Today’s post will get you started on the right foot.

20 tutorials for mastering retouching photos – In today’s round up we have compiled a list of the very best Photoshop step by step guides for how to master the art of retouching photographs.

Blogging, Social Media, Writing, Content Strategy, etc.

How to Promote an Article and Get More Traffic – My goal for this article is to show newbie bloggers, and maybe even some veterans, a few of the ways that I promote my articles and consistently get high traffic each month.

An Introduction to RSS – Today, RSS is used to consume media in an organised and unimaginably large quantity. Starting from breaking news, to award ceremonies to natural disaster updates – the applications of RSS are only limited by the user.

How To Improve Your LinkedIn Productivity With Third-Party Apps – The right third party applications can save time and automate your LinkedIn experience. In this article you’ll discover applications that will help increase your LinkedIn communication and productivity.

The basics of email marketing – Today’s post will outline why you should start with email marketing, if you’re not doing it already, and how to make sure you’re getting the biggest impact from your emails.

How to be web content agnostic (and why you should) – You cannot design without content. It’s a mantra repeated by designers worldwide, it’s a plea in countless emails to clients, it’s a cornerstone of responsible design.

WordPress

How to Display Post and Page IDs in the WordPress Admin – Whatever the case may be, WordPress doesn’t make it easy to figure out a post’s ID. One way to grab it is to visit the edit page of a post and check out the URL.

Using Googles NoCaptcha ReCaptcha In WordPress – Google has recently announced a new project called recaptcha which is a way of spam protecting your website from bots but making it easy for humans to submit the form by simply recreating a checkbox for users to click.

How to Use a WordPress Shortcode Outside the Post Editor – There are a couple of places you may want to use shortcodes outside of your post content. Sidebar widgets for one, and perhaps somewhere inside your theme (in the footer, for example).

8 Free WordPress Plugins to Help Optimize Your Ad Space – Online advertising is a mainstay of the internet. It has helped most businesses and individuals earn money online and it’s safe to say internet marketing isn’t going anywhere.

Catch MailChimp Updates in WordPress Using Webhooks – Your MailChimp plugin is probably no help beyond generating that subscribe form. What you need is MailChimp webhooks. In this article, I’ll show you how to build a simple plugin to update your WordPress site with all your MailChimp list activity.

How to Choose the Best WordPress Plugins for Your Site – Think beyond the download count and first impressions. That little time invested in the beginning will save you a lot of time, money and grief in the long run.

How to store temporary cached data with WordPress transients – Transients are such a powerful part of WordPress, yet are overlooked and under utilized. Using the transients API, you can store values in a standardized way, giving them an expiration time.

An In-Depth Guide to Conquering WP_Query – The WP_Query class is easy to understand and easy to implement. In this comprehensive tutorial – complete with lots of example code snippets – we’ll look at how you can use the class to make WordPress do your bidding.

How You Can Improve Your WordPress Design Without Breaking The Bank – One of the most underrated aspects of our blogs is design. Creating great content is one thing, but if it looks unappealing – who is going to want to read it?

Formatting WordPress Post Content: The Good, The Bad, and The Ugly – So our job is to crack open our HTML and CSS knowledge and make stuff look the way we want. Let’s look at the good, bad, and ugly of HTML/CSS inside WordPress post contents.

When You’re Hacked in WordPress: Staying Safe Later On – Security is a deadly issue on everything and you can’t argue against that. That’s why you need to keep it tight to make your WordPress website stay secure.

A Quick and Easy Guide To Creating WordPress Admin Pages – In this short tutorial we’ll take a look at the basics of how to add these pages to the backend of WordPress. You can then combine this knowledge with other tutorials to create tabbed pages, AJAX functionality, overlays and more.

How to Add SSL and HTTPS in WordPress – Are you looking to move from HTTP to HTTPS and install a SSL certificate on your WordPress site? In this article, we will show you how to add SSL and HTTPS in WordPress.

How to Enable SSL for Localhost using MAMP – Basically, SSL will encrypt data transactions between the browser and the server. Thus, you would probably want to test your website in an SSL environment as early as during the development stages.

Administering WordPress from the Command Line through WP-CLI – It’s also often much faster and simpler to accomplish a task with the command line. WP-CLI makes it possible for you to get your WordPress related tasks done with the help of a set of commands.

Search Engine Optimalization, Conversions, Analytics, etc.

What’s the Future of Link Building? – If you do link building, your site gets hit with a penalty. However you slice it, link building is evil incarnate in the world of search engine optimization. Or is it?

Google Analytics: How to Know If Your Marketing is Working – Do you use Google Analytics? Want to know how data can help improve your marketing? To learn how to measure what’s working with Google Analytics, I interview Christopher Penn.

5 Techniques To Safely Get Links In 2015 – In the minds of many, “link building” is synonymous with the spammy, black hat SEO techniques of years past; yet, high-quality links remain the single largest off-site ranking factors used by the search engines.

Tutorials

How to Create (Animated) Text Fills – A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.

Easy Textures with CSS Masks – One small detail of the overall design language was a gritty, earthy texture, which was reserved for use on headlines, buttons and icons, and the brand’s identity marks.

3 cool CSS3 image hover effects – Back in the old days, we had to rely on JavaScript for this kind of effect, but thanks to ever-increasing support for CSS3 across browsers, it’s now possible to set up effects like these without any scripting at all.

Scroll-Behind Blurred Site Navigation Bar – Another popular interface pattern, one that gained particular ascendancy after the release of iOS 7, is a “frosted” navigation bar that blurs page content scrolled behind it.

Parallax Hero Image in CSS and jQuery – Today’s nugget is an effect which is getting quite popular and relies on 3D Transforms. In a nutshell, we distributed some images on the z-axis, then we used the mouse as a (fake) 3D camera so that perspective changes while you move the mouse cursor.

Cross-Fading Background Images with CSS Blend Modes – I’ve been working on a method to fade a page background image sequence. Usually, these effects are “faked” using a background and cover layer, but I was interested in manipulating true background images with blend modes.

Freelance, Business and Workflow Related Stuff

Are you speaking your clients language? – You know that feeling when you take your car to the mechanic and he starts talking about rotors, drive shafts and oxygen sensors?

10 Secrets to Getting 90% of Your Work Done Before Noon – Many successful people have developed methods that allow them to get as much as 90% of their work done before they take their lunch break. They have simply found ways to streamline their tasks and get more done in a shorter period.

Are You Getting Paid What You’re worth as a Freelancer? – The primary reason freelancers are undercharging is simple — we’re scared to do it. We worry that the work that we are doing isn’t good enough or that we aren’t experienced enough to charge more.

F*cking Brilliant, a great Read or just magnificent Tips!

What developers can learn from designers – Take a look at your code: is every line there for a reason? Every line? The order of the methods. The name of the variables. The separation in classes, interfaces, packages. How much of it is accidentally? Good designers choose everything with a reason.

My Not-To-Do List – I was inspired to create this list from my favorite life hacker, Tim Ferriss. I listen to his podcast on my commute from Santa Cruz to San Francisco several times a week. “What you don’t do determines what you can do.”

Why Are Companies Still Building Project Management Software? – Project management software is like a burger joint. They keep popping up, and you wonder why companies are still building project management software with so many other options out there.

Access Optional – The problem is not that there is a cost involved in building something that works well in different contexts than our own. The problem is that we’re treating that as an option instead of a given part of what it means to build for the web.

Progressive Enhancement is not about JavaScript availability – Progressive enhancement is about building robust products and being paranoid about availability. It is about asking “if” a lot. That starts even before you think about your interface.

– § –

I hope you have enjoyed these hand-picked great articles? Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

Sorry, comments for this entry are closed at this time.