STYLE SWITCHER

Developer

< 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 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

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 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 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

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

Get Started with Remote Debugging Android Devices

Remote debug live content on an Android device from your Windows, Mac, or Linux computer. This tutorial teaches you how to:
  • Set up your Android device for remote debugging, and discover it from your development machine.
  • Inspect and debug live content on your Android device from your development machine.
  • Screencast content from your Android device onto a DevTools instance on your development machine.
remote debugging illustration

Requirements

  • Chrome 32 or later installed on your development machine.
  • USB drivers installed on your development machine, if you're using Windows. Ensure Device Managerreports the correct USB driver.
  • A USB cable to connect your Android device to your development machine.
  • Android 4.0 or later.
  • Chrome for Android installed on your Android device.
 

Step 1: Discover your Android device

  • On your Android device, select Settings > Developer Options > Enable USB DebuggingDeveloper Options is hidden by default on Android 4.2 and later. See Enabling On-Device Developer Options to learn how to enable it.
  • On your development machine, open Chrome. You should be signed in to Chrome with one of your Google accounts. Remote debugging does not work in Incognito Mode or Guest Mode.
  • Open DevTools.
  • In DevTools, click the Main Menu Main Menu then select More tools > Remote devices.Opening remote devices drawer
  • In DevTools, click the Settings tab, if another tab is showing.
  • Make sure that Discover USB devices is enabled.Discover USB devices is enabled
  • Connect your Android device directly to your development machine using a USB cable. Don't use any intermediate USB hubs. If this is your first time connecting your Android device to this development machine, your device shows up under Unknown, with the text Pending Authorization below it.Unknown device, pending authorization
  • If your device is showing up as Unknown, accept the Allow USB Debugging permission prompt on your Android device. Unknown is replaced with the model name of your Android device. The green circle and the Connected text indicate that you are all set to remotely debug your Android device from your development machine.

Step 2: Debug content on your Android device from your development machine

  • If you don't already have Chrome open on your Android device, open it now.
  • Back in DevTools, click the tab that matches your device's model name. At the top of this page, you see your Android device's model name, followed by its serial number. Below that, you can see the version of Chrome that's running on the device, with the version number in parentheses. Each open Chrome tab gets its own section. You can interact with that tab from this section. If there are any apps using WebView, you see a section for each of those apps, too. The screenshot below does not have any tabs or WebViews open.Connected remote device
  • Next to New tab, enter a URL and then click Open. The page opens on a new tab on your Android device.
  • Click Inspect next to the URL that you just opened. A new DevTools instance opens. The version of Chrome running on your Android device determines the version of DevTools that opens on your development machine. So, if your Android device is running a very old version of Chrome, the DevTools instance may look very different than what you're used to.
 

More actions: reload, focus, or close a tab

Click More Options More Options next to the tab that you want to reload, focus, or close. reload, focus, or close a tab

Inspect elements

Go to the Elements panel of your DevTools instance, and hover over an element to highlight it in the viewport of your Android device. You can also tap an element on your Android device screen to select it in the Elements panel. Click Select Element Select Element on your DevTools instance, and then tap the element on your Android device screen. Note that Select Element is disabled after the first touch, so you need to re-enable it every time you want to use this feature.

Screencast from Android device to development machine

Click Toggle Screencast Toggle Screencast to view the content of your Android device in your DevTools instance. You can interact with the screencast in multiple ways:
  • Clicks are translated into taps, firing proper touch events on the device.
  • Keystrokes on your computer are sent to the device.
  • To simulate a pinch gesture, hold Shift while dragging.
  • To scroll, use your trackpad or mouse wheel, or fling with your mouse pointer.
Some notes on screencasts:
  • Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Chrome omnibox, the Android status bar, or the Android keyboard.
  • Screencasts negatively affect frame rates. Disable screencasting while measuring scrolls or animations to get a more accurate picture of your page's performance.
  • If your Android device screen locks, the content of your screencast disappears. Unlock your Android device screen to automatically resume the screencast.
Website
More

Array Manipulation Using JavaScript Map Method

Creating and manipulating Arrays in JavaScript is a task that a JavaScript developer does on a daily basis. In this tutorial, you’ll see how to use JavaScript Map method for Array manipulation to reduce your code and make it more readable.

Let’s have a look at the following example:


let employees = [
    { "first_name": "Hari", "last_name": "Krishnan" },
    { "first_name": "Samuel", "last_name": "Jackson" },
    { "first_name": "Suriel", "last_name": "Johnson" },
    { "first_name": "Roy", "last_name": "Agasthyan" }
];
let full_names = []

let name;

for (let i = 0; i < employees.length; i++) {
    name = employees[i]["first_name"] + ' ' + employees[i]["last_name"]
    full_names.push(name)
}

console.log(full_names)

//  [ 'Hari Krishnan',
//  'Samuel Jackson',
//  'Suriel Johnson',
//  'Roy Agasthyan' ]

As seen in the above code, you have a list of employees in the employees variable. The purpose of the above code is to iterate through the list of employees and concat the first name and the second and create another list with the full name of the employees. Now let’s see how to accomplish the above task using the JavaScript Map method.

Understanding JavaScript Map Method

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

The Map method when applied to an array, applies the provided function to each element of the array and returns a new array. Now let’s see how you can rewrite the above code using the JavaScript Map method and how it reduces the code and improves readablity. Here is how the JavaScript Array can be manipulated to return a new array with the full name of the employees using Map method:

let full = employees.map(function(emp) {
    return emp["first_name"] + ' ' + emp["last_name"]
});

console.log(full)

//  [ 'Hari Krishnan',
//  'Samuel Jackson',
//  'Suriel Johnson',
//  'Roy Agasthyan' ]

As seen in the above code, you have applied the JavaScript map method to the employee's array. Each item inside the array is being applied the callback function where the employee first name and last name are being concatenated to return the full name. The map method returns a new array with the full name of the employees. Now if you compare the above two set of codes, you can see the following plus points:

  • You can get rid of the for loop
  • You don’t need the full_names array to keep the concatenated names.

And if you define the callback function as a separate function it would add up to the readability point of view. Here is how you can do it:

let full = employees.map(get_full_name);

function get_full_name(emp){
    return emp["first_name"] + ' ' + emp["last_name"]
}
More

What’s New In DevTools (Chrome 60)

Note: You can check what version of Chrome you're running at chrome://version. Chrome auto-updates to a new major version about every 6 weeks.

Welcome! New features and major changes coming to DevTools in Chrome 60 include:

  • A new Audits panel, including tests for progressive web apps, performance, accessibility, and best practices.
  • Third-party badges. Find out which third-parties are making network requests, logging to the Console, and executing JavaScript.
  • Continue To Here. A new gesture that can speed up your JavaScript debugging workflow.
  • Predictable debugging for asynchronous JavaScript.
  • Object previews in the Console.
  • Real-time updates in the Coverage tab.
  • A new menu for selecting contexts in the Console.
  • Simpler network throttling options.
  • Async stack traces on by default.

What's New In DevTools (Chrome 60)

Kayce Basques By Kayce Basques Technical Writer at Google Welcome! New features and major changes coming to DevTools in Chrome 60 include: A new Audits panel, including tests for progressive web apps, performance, accessibility, and best practices. Third-party badges. Find out which third-parties are making network requests, logging to the Console, and executing JavaScript. Continue To Here. A new gesture that can speed up your JavaScript debugging workflow. Predictable debugging for asynchronous JavaScript. Object previews in the Console. Real-time updates in the Coverage tab. A new menu for selecting contexts in the Console. Simpler network throttling options. Async stack traces on by default. Note: You can check what version of Chrome you're running at chrome://version. Chrome auto-updates to a new major version about every 6 weeks. Check out the video version of these release notes below or read on to learn more.

New features

New Audits panel, powered by Lighthouse
The Audits panel is now powered by Lighthouse. Lighthouse provides a comprehensive set of tests for measuring the quality of your web pages.

The scores at the top for Progressive Web AppPerformanceAccessibility, and Best Practices are your aggregate scores for each of those categories. The rest of the report is a breakdown of each of the tests that determined your scores. Improve the quality of your web page by fixing the failing tests.

A Lighthouse report
Figure 1. A Lighthouse report

To audit a page:

  • Click the Audits tab.
  • Click Perform an audit.
  • Click Run audit. Lighthouse sets up DevTools to emulate a mobile device, runs a bunch of tests against the page, and then displays the results in the Audits panel.
 

Lighthouse at Google I/O '17

Check out the DevTools talk from Google I/O '17 below to learn more about Lighthouse's integration in DevTools.

Contribute to Lighthouse

Lighthouse is an open-source project. To learn lots more about how it works and how to contribute to it, check out the Lighthouse talk from Google I/O '17 below. Got an idea for a Lighthouse audit? Post it here!

Third-party badges

Use third-party badges to get more insight into the entities that are making network requests on a page, logging to the Console, and executing JavaScript.
Hovering over a third-party badge in the Network panel
Figure 2. Hovering over a third-party badge in the Network panel
Hovering over a third-party badge in the Console
Figure 3. Hovering over a third-party badge in the Console
To enable third-party badges:
  • Open the Command Menu.
  • Run the Show third party badges command.
Use the Group by product option in the Call Tree and Bottom-Up tabs to group performance recording activity by the third-party entities that caused the activities. See Get Started With Analyzing Runtime Performance to learn how to analyze performance with DevTools.
Grouping by product in the Bottom-Up tab
Figure 4. Grouping by product in the Bottom-Up tab
Website
More

YouTube’s redesign is official, and there’s a dark mode

YouTube has a new look, with the desktop site getting a "Material Design" revamp today. The design has slowly been leaking out in A/B testing, but today the company is making it official.

YouTube says the new design aims for a "simple, consistent, and beautiful" look. Most of YouTube's box-heavy card design has been erased, instead going with a simple white background, the usual grid of thumbnails, and more white space. YouTube makes use of Material Design's trademark shadowing, with a pinned search bar at the top of the screen. It's not a drastic change until you turn on the new "dark mode," which replaces all the white UI with something easier on the eyes. The dark mode switch lives in the new profile menu, which you can access by clicking on your profile picture in the top right.

Material Design was introduced three years ago in Android 5.0 and is meant to be a unifying design style for all of Google. Seeing it finally come to YouTube is nice, but it is still missing from flagship products like Gmail and Google Calendar, which were both last redesigned in 2011.

The design isn't automatically rolling out to everyone yet. Users can opt-in to a "preview" of the design over at youtube.com/new, and it's easy to revert back to the old design if you don't like it. YouTube is soliciting feedback on the new design before a wider rollout; it suggests you leave feedback via the link on the account menu.

YouTube's new interface is built on Google's Polymer framework, a JavaScript library for creating Web components with a focus on creating Material Design-style apps on the Web. With the Polymer base up and running, YouTube says it will have "quicker feature development from here on out." It cites the dark theme as the first of these Polymer-enabled features and ends with saying, "This is only the beginning—you can look forward to more powerful new features coming soon!"

Website
More