Awesomeness & Usefulness for Web Developers #2 [31 August 2013]

Good day, everyone! Recently I saw a few awesomeness and usefulness tools/frameworks/events for web developers, which would like to share with you.

Webflow

Webflow By this service you will be able to build a fully cross-browser layout for 55 minutes without knowledge of HTML and CSS! Perfect solution for web designers, 26 000 of which already use Webflow. To create the two projects the service is free, and in further perspective, you are waiting for quite reasonable prices. This tool is really cool.

If you fundamentally don't like GUI for front-end like me, then still recommend sign in Webflow and export few free responsive layout. Also I want give link to responsive layout generator and responsive patterns.

Parallax.js

Functional and easy libary for creating parallax effect.

For all elements on which to apply the effect add class layer and set the speed attribute data-depth. Parallax.js has a number of parameters:

<ul id="scene"
  data-calibrate-x="false" 
  data-calibrate-y="true"  
  data-invert-x="false"     
  data-invert-y="true"  
  data-limit-x="false"
  data-limit-y="10"
  data-scalar-x="2"
  data-scalar-y="8"
  data-friction-x="0.2"
  data-friction-y="0.8"> 
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>

Then pass the parent element in Parallax constructor:

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

Intention.js

Small, but useful library that simplifies the development process of creating exactly adaptive layout. Everything is very simple. The principle of operation is well-illustrated in the following image:

Intention.js

Device.js

The script as Modernizr sets the HTML tag classes ios/android/windows/blackberry phone/tablet landscape/portrait, thereby eliminating the need to describe the basic resolution of the devices in media queries.

Speaking about cross-device development I would like to mention Risizer - Bookmark for testing responsive design. All we know about many similar services, but I think this method is the most convenient.

GistBox

GistBox

GistBox synchronized with your GitHub profile displays Gist sheet in convenient interface. All your snippets sorted by labels and always at hand. Available as an extension for Chrome.

CSS Modal

To begin with that the project was created by one of the team members HTML5 Boilerplate. CSS Modal - the easiest way to add to your project adaptive modal window. Firstly you must add this markup:

<section class="semantic-content" id="modal-text" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    <div class="modal-inner">
        <header id="modal-label"><!-- Header --></header>
        <div class="modal-content"><!-- The modals content --></div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">×</a>
</section>

Then add a modal.js before body's closing tag. That's all!

Dotdotdot.js, Uikit, HTML2PDF

Recently I needed use an ellipsis to indicate that there is more text than currently visible. But standard text-overflow only works on one line with no-wrap. On Internet I met a wonderful script dotdotdot.js, which is perfectly solves this problem.

Uikit - plus one to existing web frameworks with its own characteristics.

HTML2PDF. Service written on the basis of Phantom.js. May be useful for registration of the portfolio in .pdf.


I apologize for any typos. If you notice a problem - please write in PM.

Thank you all for your attention.

comments powered by Disqus