STYLE SWITCHER

Developer

Rallax.js – Dead-Simple Parallax Scrolling Plugin

Rallax.js – Dead-Simple Parallax Scrolling Plugin

Rallax.js is a Vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies.

Explore a variety of options, including:

  • Changing parallax speed
  • Conditionally disabling and enabling the effect
  • Compensating for mobile devices
 // example code for 'dead' block         
const dead = rallax('.dead')
dead.when(
() => window.scrollY > 750,
() => dead.stop()
).when(
() => window.scrollY < 750,
() => dead.start()
Website
More
Contentful: Content Infrastructure for Digital Teams

Contentful: Content Infrastructure for Digital Teams

Our content infrastructure enables teams to power content in any digital product: website, app, or device.

Developers

  • Manage, integrate, and deliver content via APIs
  • Use your preferred languages and frameworks
  • Iterate quickly from dev, test, and staging to production

Content Creators

  • Easily create, manage, and publish content in the web app
  • Customizable workflows for each content team
  • Instant access to all new web app features
Website
More
Netlify CMS

Netlify CMS

Open source content management for your Git workflow. Use Netlify CMS with any static site generator for a faster and more flexible web project

Static + content management = ♥

Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content.

An integrated part of your Git workflow

Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

An extensible CMS built on React

Netlify CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add backends to support different Git platform APIs.

Website
More
Grav

Grav

Building Faster Websites with Grav, a Modern Flat-file CMS

Nowadays, there’s an interesting get-back-to-the-basics tendency among web developers. Some modern, best-in-class technologies — like Markdown, Twig, and YAML — are often used together to produce many new, lightweight CMSs, focused on speed, simplicity and productivity. The principle they all follow is pretty straightforward: when things get too complex, it’s better to start from scratch, instead of trying to clean up the existing mess.

Website
More
< css-doodle /> – A web component for drawing patterns with CSS

< css-doodle /> – A web component for drawing patterns with CSS

is based on Shadow DOM v1 and Custom Elements v1. You can use it on latest Chrome and Safari right now without polyfills. The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself.

#Getting Started

Include the script directly from cdnjs and everything is ready:

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.2.3/css-doodle.min.js"></script>

<css-doodle>
/* put your code here */
</css-doodle>

You can also install it from npm and import the module in javascript:

npm install css-doodle
Website
More
Pico.js – Lightweight JavaScript Face Detection Library

Pico.js – Lightweight JavaScript Face Detection Library

pico.js is lightweight face detection library in 200 lines of JavaScript. pico.js has real-time detection capabilities (200+ FPS in a practical setting)

If your platform supports the getUserMedia API call, you can try the pico.js real-time face detector. Simply click the button below and allow the page to access your webcam.

DownloadWebsite
More
CSS Hacks Targeting Firefox

CSS Hacks Targeting Firefox

Firefox specific styling is now possible with CSS alone. No more JS hacks required.

#Firefox 2

html>/**/body .selector, x:-moz-any-link { color:lime; }

#Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default { color:lime; }

#Any Firefox

@-moz-document url-prefix() { .selector { color:lime; } }
Website Thank you so much Nidhin for giving us such an effective Mozilla specific info.
More
Blotter.js – JavaScript API for Drawing Unconventional Text Effects

Blotter.js – JavaScript API for Drawing Unconventional Text Effects

Blotter is a javascript API for drawing unconventional text effects on the web. Blotter provides a simple interface for building and manipulating text effects that utilize GLSL shaders without requiring that the designer write GLSL.

Overview

When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of cases this is entirely suitable – text is text right? Yet still, there exist numerous examples of designers combining CSS properties or gifs and images to create effects that evoke something more playful. Precisely here, Blotter exists to provide an alternative.

GLSL Backed Text Effects with Ease

Blotter provides a simple interface for building and manipulating text effects that utilize GLSL shaders without requiring that the designer write GLSL. Blotter has a growing library of configurable effects while also providing ways for student or experienced GLSL programmers to quickly bootstrap new ones.

Atlasing Effects in a Single WebGL Back Buffer

Blotter renders all texts in a single WebGL context and limits the number of draw calls it makes by using atlases. When multiple texts share the same effect they are mapped into a single texture and rendered together. The resulting image data is then output to individual 2d contexts for each element.

Animation Loop

Rather than executing on a time based interval, Blotter's internal animation loop uses requestAnimationFrame to match the browser's display refresh rate and pause when the user navigates to other browser tabs; improving performance and preserving the battery life on the user's device.

What Blotter Isn't

Any texts you pass to Blotter can be individually configured using familiar style properties. You can use custom font faces through the @font-face spec. However, Blotter ultimately renders the texts passed to it into canvas elements. This means rendered text won't be selectable. Blotter is great for elements like titles, headings, and texts used for graphic purposes. It's not recommended that Blotter be used for lengthy bodies of text.

Website
More
Marko – Friendly and Fast UI Library from eBay

Marko – Friendly and Fast UI Library from eBay

Marko is a friendly and fast UI library that makes building web apps fun.
  • Simple: If you know HTML, CSS, and Javascript, you know Marko
  • Fast: Faster loads via streaming and a tiny (~10kb gzip) runtime
  • Progressive: From simple HTML templates to powerful UI components
  • Trusted: Marko is powering high-traffic websites like ebay.com
Website
More
Add Google reCAPTCHA in WordPress

Add Google reCAPTCHA in WordPress

Google reCAPTCHA is becoming popular since the day of its announcement. The performance of this product is not been evaluated yet because of its age.
I have covered basic tutorial about how to code custom script with Google reCAPTCHA.

functions.php

/*Add Google captcha field to Comment form*/

add_filter('comment_form','add_google_captcha');

function add_google_captcha(){
echo '<div class="g-recaptcha" data-sitekey= "=== Your site key === "></div>';
}

/*End of Google captcha*/

single.php

<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
jQuery("#submit").click(function(e){
var data_2;
jQuery.ajax({
type: "POST",
url: "http://yourblog.com/wp-content/themes/yourtheme/google_captcha.php",
data: jQuery('#commentform').serialize(),
async:false,
success: function(data) {
if(data.nocaptcha==="true") {
data_2=1;
} else if(data.spam==="true") {
data_2=1;
} else {
data_2=0;
}
}
});
if(data_2!=0) {
e.preventDefault();
if(data_2==1) {
alert("Please check the captcha");
} else {
alert("Please Don't spam");
}
} else {
jQuery("#commentform").submit
}
});
</script>

google_captcha.php

<?php
$data;
header('Content-Type: application/json');
error_reporting(E_ALL ^ E_NOTICE);
if(isset($_POST['g-recaptcha-response'])) {
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
$data=array('nocaptcha' => 'true');
echo json_encode($data);
exit;
}
// calling google recaptcha api.
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=Your secret key&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
// validating result.
if($response.success==false) {
$data=array('spam' => 'true');
echo json_encode($data);
} else {
$data=array('spam' => 'false');
echo json_encode($data);
}
?>
Website
More