Docracy has collected the experience of many designers to provide a wide range of starting points for less experienced creative professionals, and to start a permanent free legal resource for the community. You will find a collection of some pretty useful legal documents there. You can have a look at this Collective Legal Guide For Designers.
There are contracts for creating an icon set, building a responsive website, starting a graphic design project, doing a small project with design and code, doing a BIG project with design and code, doing UX work, creating an infographic, redesigning a website, hiring a developer/designer to work on a project, making a mobile application and etc…
Source: http://www.smashingmagazine.com/2013/04/03/legal-guide-contract…
ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top†feature that will work with any website, with ease. To create a visible line to help determin an ideal scroll distance from the top, assign a valid CSS colour to the activeOverlay setting.
ScrollUp is fully customisable through CSS which makes it simple to fit right into your project. Simply target the scrollUp’s generated ID in your CSS file and set your styles. It is released under MIT License.
Requirements: jQuery Framework
Demo: http://markgoodyear.com/2013/01/scrollup-jquery-plugin/
License: MIT License
Sidr is a handy jQuery plugin for creating side menus and the easiest way for doing your menu responsive. You will be able to create multiple sidrs on both sides of your web to make responsives menus or not, it works perfectly on desktop too.
There are two themes included with the plugin, a dark one and a light one. You can use them, create a new one or override them with your own styles. It is released under MIT License.
Requirements: jQuery Framework
Demo: http://www.berriart.com/sidr/
License: MIT License
Admit it, 3D is cool. But, you know what’s cooler? 2D. I love WebGL, but unfortunately it doesn’t work everywhere. Flat Surface Shader is a lighting simulation, which can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles. It also utilises native Float32Arrays to store numerical data for highly optimised calculations. You can export the image once you have done.
Requirements: –
Demo: http://wagerfield.github.com/flat-surface-shader/
License: License Free
Working with CSS in Web documents, we often find ourselves using the fundamental screen unit, the pixel—a square, nondivisible part of every display device (well, visual screens anyway) that distributes little sources of light in a regular, perpendicular grid.Because the majority of Web developers’ work focuses on creating pixel-perfect manifestations of designs delivered in pixel-based, noninteractive image formats, we tend to forget that the Web offers more than just pixel values for expressing lengths and sizes with CSS. This knowledge is fundamental for dealing with responsive Web design, where understanding how CSS length units work is crucial to correctly assigning sizes to objects and aligning elements on the page.
In this article, I’ll look at these units of measure and describe how they behave and apply to elements in documents. (Keep in mind that a fair bit of book typesetting is done in CSS as well, so it’s not just HTML documents we’re dealing with.)
Relative vs. Absolute Units
In terms of measurement, every length is expressed in relation to some basic unit. All measurement systems provide a standard set of units with which to compare and calibrate all other units and measurement devices.
Units (as far as CSS goes) can be absolute or relative, depending on whether their basic unit depends on the context within which it’s used. For computer displays, the basic unit is the pixel, to which all other units are recalculated when objects are finally rendered to the screen. Although the pixel is treated as a relative unit, it is nevertheless dependent on two parameters: the screen’s physical size and its resolution. I’ll cover how pixels relate to physical units later in the article.
Other units, such as percentages (denoted by the % symbol), are dependent on the context of their use. They can express a proportion of a container’s width or height or a proportion of the current font size or line height.
First, let’s cover absolute CSS units. Read the rest of this entry »
As a long-running fan of practical jokes, I love April Fools’ Day. Fool.js is a jQuery plugin that lets you play one or more fun practical jokes on an unsuspecting visitor, and it’s crazy easy to set up. There’s a whole range of fun options to use.
You can make the scrollbar to fall over, Hide random elements as they interact, Sing Spongebob with your browser, Flip the page upside down, Make the page 100% editable, Makes the site flash on and off, Forces a shutter on the screen, Makes the page unclickable and etc…
The download link on the site was broken somehow. You can grab the source code here on Github. Have fun!
Requirements: jQuery Framework
Demo: http://fooljs.com/
License: License Free
Sails.js makes it easy to build custom, enterprise-grade Node.js apps. It is designed to resemble the MVC architecture from frameworks like Ruby on Rails, but with support for the more modern, data-oriented style of web app development. It’s especially good for building realtime features like chat.
Sails.js API scaffolding is nothing like Rails scaffolding. Instead, Sails automatically builds a RESTful JSON API for your models. And here’s the thing, it supports HTTP and WebSockets. By default, for every controller you create, you get the basic CRUD operations created automatically.
Requirements: Node.js Framework
Demo: http://balderdashy.github.com/sails/
License: MIT License
In the first article in this series, I covered cross-origin resource sharing (CORS) and building iframe sandboxes and described how to use these techniques in mashup applications to consume data from other domains and provide a layer to a defense-in-depth strategy. In this article, I’ll start exploring how to consume data from CORS connections (or any Ajax connection) by defining a level of trust and then sanitizing accordingly. To do this, I’ll build on top of the guidance provided by Project Silk. First, let’s discuss trust and how mashup applications in the enterprise provide a unique challenge to the existing paradigm.
Trust or the Lack Thereof
In Writing Secure Code, the authors put forth an excellent mantra: “All input is evil.†In the world of enterprise mashup applications, this is true, but some input is more evil than others. As an example, does a data feed from your company’s human resources system pose the same threat as a data feed from Twitter? Another common expression about software security is “all external systems pose a threat.†Again, this is true, but security is about risk management, which needs to stay a central focus in your mashup development process. Risk is a combination of the impact of a threat (a threat is an exploitation of a vulnerability in the system) and its probability of execution. The types of threats that a HR data feed present probably have a lower impact than threats that could be realized by consuming a Twitter feed. A Twitter feed can be any text content provided by any user, while the HR feed would be a structured set of data points provided and verified by members of the HR department. This gives the HR system a lower risk (assuming the probability of execution is lower or equal to Twitter). When considering the trust of systems, extend your vision of input to include the content coming from your mashup providers and also weigh trust for internal vs. external providers.
Here are some questions to consider when building your input validation for mashup providers:
- What is your organization’s culture toward risk? Are you risk adverse or less concerned about risk when functionality is at stake?
- What is the history of the provider? As an example, if you know that an internal provider has had malicious code posted to its site by disgruntled employees, you would obviously want to keep an eye on this provider.
- What kind of data are you receiving from the provider? Take Twitter vs. Bing Maps, for example. The type of content coming from Bing Maps is different from the content coming from Twitter (depending on the API). How does that impact your trust of the provider?
- Does the data cross a trust boundary in your threat model?
Mashup Data = Input
Overall, your goal is to securely consume data from various sources, some trusted and others not as trusted. “Data from various sources†is a long way of saying “input,†which means you need to consider the three elements of input validation: constrain, reject and sanitize. Constraining input is not only limiting what is permitted. It also means reducing the possible entry points into the system. (In information security, we call this “reducing the attack surface.â€) You need an input chokepoint through which all consumed data must pass. Fortunately, the nice folks at Microsoft patterns & practices have provided a great design to do just that with the Data Manager in Project Silk. Read the rest of this entry »
CSSmatic is a non-profit ultimate CSS tools for web designers. There are four useful tools at the moment. You can use the Gradient Generator which supports multiple colors and opacity stops to get amazing gradients. By using the gradient tool you can create gradients with smooth color changing effects and subtle transparencies.
Border Radius is super easy to use and a super time saver. Change all the borders selected at the same time. Noise Texture helps you create subtle background patterns with dirty pixels and noise, changing the color and values and previewing the results in real time. Box Shadow supports Blur radius changes, color changes, shadow size. Everything that you need to create great drop shadows in a single place.
Requirements: –
Demo: http://www.cssmatic.com/
License: License Free
Photoset Grid is a simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature. Originally the plugin was created for the Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but they have since expanded it and released a jQuery plugin for us.
Beyond the basic usage, you can set a number of optional arguments including callback functions that are useful for adding a lightbox for high resolution images. You can download Photoset Grid jQuery plugin on Github.
Requirements: jQuery Framework
Demo: http://stylehatch.github.com/photoset-grid/
License: License Free