D’Angelo: Live on SNL
D’Angelo sent an important, visual message in his recent SNL performance: while he sang “Really Love” dressed in high-fashion, the singer stood atop a chalk outline and donned a hoodie, and his band wore “Black Lives Matter……
All posts tagged “Fresh”
After doing this for more than a year, the hardest part about writing this monthly resource pile for designers and developers is the introduction. While we’re on the subject, here’s your February 2015 recap of the best and freshest of resources for web developers like you.
In this installment, we are looking at a special search engine to find code snippets, a very resourceful reference to address issues in the Flexbox module, and development tools for better management of color, typeface and gradients.
CSS3 Gradient allows us to create imageless gradients on our website without the need for loading any images. We can even combine it with CSS3 Animation to give a more compelling effect. But if the code is too much for you, use the simpler Gradient Animator route to generate one with a nice interface.
SVG Pocket Guide is compiled by Joni Trythall. It is a handy reference that will walk you through the basics of SVG (such as creating shapes and text) all the way to more advanced features (like creating gradients, clipping paths and patterns). The book comes in Markdown format and is available in English and Portuguese.
Read Also: More posts on SVG (Scalable Vector Graphic)
Flexbox is a very promising new module in CSS3 that would totally change they way we build web layouts. However it also comes with cross-browser compatibility issues of its own. This repository, Flexbugs, is a collection of these bugs and the workarounds to address them. This is a very useful resource for anyone who lives on the bleeding edge of the Web.
It’s amazing what we can achieve with just CSS like create a fully presentable icon using just a single element. Icono is the library that does this. In this library, you will find a collection of familiar icons that are made only with a single element, and CSS. These icons will load faster and are more customizable than image-based icons.
Dillinger is an eye-pleasing Markdown editor. Here you can write in Markdown format, and instantly see the output on the right hand tab. For your convenience Dillinger allows you to export your work into HTML, PDF, or just in a Markdown file format once you have done. Alternatively, you can also connect it to a third-party service like Dropbox and Github where you can save your file.
HTML5Up is a collection of free HTML5-based templates. You can find a handful of layouts that cater to different types of websites: business, portfolio or just a simple blog. All templates are responsive as well ensuring that the content and the website layout are enjoyable in varying screen sizes.
Ever wonder what a particular color is named? CSS Colours shows the color name as well as the Hex and RGBA format for a collection of basic colors. It’s a good source to find the perfect color combination for your websites.
Re-view is a Chrome extension that parses your website
@media queries and displays your website in each of the breakpoints specified in each
@media query. If you are looking for a tool that could save you a little bit of time when testing responsive websites, then this is the tool you need.
If you take a look at the Google Font library, you will find a lot of fonts in varying faces, family, weight, and types. Hence choosing the right pair or combination of fonts could be a real overwhelming task. TypeGenius makes selecting font pairs simple and fast and possible for the general population.
Adobe Photoshop is the most prominent and useful tools for graphic designing work. Many designers are so much dependent on this software that they cannot even imagine starting their work without Adobe Photoshop installed on their computers. There is a huge plethora of useful features and options that make Photoshop a very powerful and wonderful application.
In this compilation, we are showcasing 40 fresh and free to download PSD files that you can use in your next project. These PSD files are available in fully editable format so that you can use them in accordance with the project needs and the individual tastes of the client. Here is the full list. Enjoy!
It’s here! We’ve finally left the tumultous year of 2014 and as we usher in a new beginning with the new year, we have new hope, wishes, and certainly new tools to try out. In this post, we have put together a handful of perfect tools and plugins to get this rolling.
From a handy online test tool to something for easy access to mobile design patterns, there are quite a few choices to get your 2015 on the right track.
Seti UI is a Sublime Text theme, not to be confused with Sublime Text Color Scheme. The theme in Sublime Text affects the app interface such as the tab and the sidebar. Seti UI is a ported theme. Its flat look is really nice to look at. A perfect choice of theme if you are using Sublime Text in Windows 8 or OS X Yosemite.
Having a checklist can help you keep track on what has been done and what is to come. If you are a UI designer, you should probably add IXD Check List in your bookmark.
IXD Check List contains a collection of common to-do lists to check. Each item is supported with link references, so you can also learn why it’s on the list. If you prefer, there is a little button on the left where you can print the page and check the list offline.
Well, we have a handful of tools for picking out a color scheme already. But none is as easy as this tool, called Coolors. Simply hit the Space key and it brings up a new color scheme. It will generate new color scheme infinitely, derived from its algorithm and outsourced from its users contributors, as you repeat hitting the Space key.
Nibbler is an online test tool that evaluates and scores your website for various factors including Code Quality, Mobile Compatibility, and Accessibility. It’s handy if you want to run a final check for your website before launch.
Velositey is a Photoshop plugin to make the process of creating a website prototype in Photoshop easyil and quickly. This plugin allows you to quickly create a new document with a preset grid, adding preset web components, and generating icons or favicons. An indispensable Photohop plugin for every web designer.
If you are using Vagrant in OS X, install Vagrant Manager. This app lets you manage multiple environments in a more convenient way. Once it is installed, it adds a new icon in the OS X task bar where you can monitor and control your virtual machines with only a few clicks. No more messing with command lines.
CSS Specifity is one notorious topic of CSS which is not easy to digest. This tool is created to illustrate how this specificity concept works in an interactive manner. Draw several selectors and it will tell you which selector to apply.
CSS Dig is a Chrome extension. And as the name implies, it will dig into your website and parse its CSS. It will show you a report which you can evaluate to perform required optimizations.
For those of you who might not aware of it, Google has just introduced Material, a new philosophy of its product design. Material Up is a collection of apps and websites that has already adopted this new philosophy. A good source of inspiration for web designers.
Tindddle helps you enjoy Dribbble in a more streamlined manner. It will feed you with a selection of the best “Shots” from Dribbble. If you don’t like the particular Shot, hit the left arrow key of your keyboard, and if you like it hit the right arrow key. All the Shots that you have liked will appear in your Dribbble account — here’s a sample.
The Mobile Design Pattern book is a collection of selected common mobile design pattern applied in mobile in 2014. Not only does it provide inspiration, the book also covers the decision and reasoning behind such design. A good book that should be on the digital book shelf of any web and app designer.
FontAwesome is… awesome. To make it even more… awesome, install this plugin in Photoshop so that you can quickly add it in your design.
Searching for the perfect modern font for your brand can be quite exhausting and overwhelming with the incredible amount of font collection websites available. It does help if you have some specifics…
Click through to read the rest of the story on the Vandelay Design Blog.
Editor’s note: We’ve come to the end of another year. This final month of 2014, we’re looking at a round of resources by Daniel Pataki.
A developer’s toolbelt should always contain plenty of items but should never be considered final and unchangeable. Fellow developers are creating great tools every day. Some of these go on to be huge successes like the Foundation framework or Twitter Bootstrap but some remain diamonds in the rough.
To round up a great year, I’ll take a look at some great tools that have proven to come in very handy for my own use. From documentation creation to loader elements, here’s a useful collection of tools for all web developers.
Daux.io is an extremely capable documentation generator. It is completely free and the source code can be found on Github. You can run the documentation on a web server or with Grunt, if you prefer.
There is a lengthy feature list, with built-in support for Github flavoured markdown, a file editor, Google Analytics and many more features. Plenty to help you out with most projects. [Get it here]
In the creator’s own words, Ladda is “A UI concept which merges loading indicators into the action that invoked them“. Ladda enables you to create awesome interaction indicators for buttons.
A number of sizes and animations are available. I particularly enjoy the progress bars which have been built right into the buttons. [Get it here]
Revaxarts Theme Documentor
This project is used by a number of Themeforest authors but can be used for any documentation purpose. Its online interface makes it easy for you to assemble your documentation and it has great HTML5 tech to store them on your local computer.
Plus you can enable auto-saving and come back any time to complete the docs. In addition, it has json import and export functionality and theme modification capabilities, allowing you to tailor it pretty well to your company colors. [Get it here]
Unicode characters can be a great help when you want to add specific characters not usually found on keyboards. You should always be careful of adding arrows and other elements because screen readers may not handle them well but in some cases they still are the most effective solution. This Unicode Table is my favorite because it allows me to search with plain English like “circle” or “arrow” and get a pretty good list of results to work from. [Get it here]
WordPress Plugin Boilerplate
WordPress Plugin Boilerplate is now in it’s third iteration. It’s a boilerplate for creating modular WordPress plugins. It tries to impose a stricter architecture on you which should lead to better code. Thus, leading to equal intrepretation by all programmers. It takes an object oriented approach which is a breath of fresh air amidst all the procedurally coded plugins. [Get it here]
The rules cover everything from syntax and commenting to naming conventions, specificity and architectural principles. If some of it is over your head don’t worry, try to keep to things you can understand and your code will already be that much better! [Get it here]
Another entry into loading animations, Spinkit provides awesome CSS only transformations for simple elements. Whether you use them for loading or interaction purposes, they are easy to grab off the site and then make your own. [Get it here]
Random User Generator
Since Random User Generator is a fully functioning API, you can build it into your application development needs as a dynamic tool. No more having to go to the website to generate test data each and every time.
It spits back emails, addresses avatars, names, all that good stuff, using a fast and secure connection. Using it programmatically with AJAX is extremely simple and understandable, this is something you shouldn’t forget for your next project! [Get it here]
jQuery Plugin Boilerplate
By using the boilerplate, you are already writing better code by adhering to some simple rules it lays out. How the plugin is initialized, how functions are added and so on. There’s also a more recent version which you can get via the site. [Get it here]
Many people are scared of regex because of the perceived complexity and the difficulty of testing with it. Regex 101 helps us by allowing the testing of our regex right in the browser.
Tools like explanations, hints, match explanations and others are also offered. I find this an invaluable tool because I myself struggle a bit with regex but this tool helps me figure it all out much faster! [Get it here]
Of all the icon fonts available on the web, Font Awesome is my favorite resource. It is completely free, regularly updated and has over 450 icons at the moment. I use it regularly in a wide range of projects, from designs to keynotes to websites.
Since it is a proper font, you can embed it in any capable application making it a very flexible and portable option. Be sure to check out the Cheat Sheet for a full list of copy-pastable icons, class names and hex codes. [Get it here]