# jQuery

jQuery is a JavaScript library with an API for HTML document traversal and manipulation, event handling, animation, and Ajax.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Rethinking the Next-gen Analytics Web App at trivago

DevFeed: [Rethinking the Next-gen Analytics Web App at trivago](<https://devfeed.tech/articles/rethinking-the-next-gen-analytics-web-app-at-trivago-28006.md>)

Original publisher: [Read original article](<https://tech.trivago.com/post/2021-02-09-rethinknextgenanalyticswebappattrivago/>)

Author: Daw Chih Liou

Published: 2021-02-09T00:00:00Z

Content type: article

Language: en

Sources: [Trivago](<https://devfeed.tech/sources/trivago.md>)

Topics: [web applications](<https://devfeed.tech/topics/web-applications.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [legacy](<https://devfeed.tech/topics/legacy.md>), [A/B Testing](<https://devfeed.tech/topics/a-b-testing.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>)

Tags: [a-b-testing](<https://devfeed.tech/tags/a-b-testing.md>), [analytics](<https://devfeed.tech/tags/analytics.md>), [backend](<https://devfeed.tech/tags/backend.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [legacy-application](<https://devfeed.tech/tags/legacy-application.md>), [legacy-code](<https://devfeed.tech/tags/legacy-code.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

trivago's Frontend Engineering team describes rebuilding its nearly decade-old in-house Business Intelligence web application for analytics and A/B testing. The article explains the legacy system's maintenance, testing, data-flow, UI, and design-system challenges, and reports that the revamped application became more reliable, user-friendly, and scalable while the legacy application was retired.

### Source excerpt

After almost a decade, we decided to rebuild our in-house Business Intelligence web application to better support the organization. It is always challenging to replace software with a long history and a high degree of complexity. Nevertheless, we successfully completed the project because we fundamentally challenged and re-thought all aspects of the project.

## Jekyll footnotes as Edward Tufte inspired sidenotes

DevFeed: [Jekyll footnotes as Edward Tufte inspired sidenotes](<https://devfeed.tech/articles/jekyll-footnotes-as-edward-tufte-inspired-sidenotes-25273.md>)

Original publisher: [Read original article](<https://kau.sh/blog/jekyll-footnote-tufte-sidenote/>)

Author: Kaushik Gopal

Published: 2020-07-21T07:00:00Z

Content type: tutorial

Language: en

Sources: [Kaushik Gopal's Site](<https://devfeed.tech/sources/kaushik-gopal-s-site.md>)

Topics: [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [CSS](<https://devfeed.tech/topics/css.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>)

### AI overview

The article explains how to implement Tufte-inspired sidenotes in a Jekyll blog by adapting kramdown footnotes. It uses JavaScript and jQuery to position notes in the page margin and discusses handling image loading and browser resizing.

### Source excerpt

I've been looking into Tufte CSS recently. Tufte CSS -inspired by the teachings of the legendary Edward Tufte1- provides suggestions and tools to style web articles for improved legibility. I've started to incorporate some of those principles here while still trying to keep the authenticity of my original design. Most of these changes have been in the realm of CSS however the sidenotes feature was a slightly trickier beast. I've implemented this feature in my blog theme "Henry" for both Hugo & Jekyll. Jekyll kramdown comes built in with a footnotes feature that I've used here for some time. It works pretty well for the most part. The only problem though is -as the names suggests- it displays the notes all the way at the bottom of the articles near the footer. Your browser doesn't support HTML5 video. Download the video instead. Edward Tufte instead suggests the use of "sidenotes": Sidenotes are like footnotes, except they don't force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. So my objective was to use the existing kramdown pipes and generate the footnotes, but display them off to the side in the margin instead of at the bottom. Pulling this off is tricky with pure CSS but is baby talk for javascript. So I pulled out my trusty old jQuery2 chops and got this fun side project done. source You can find the js source code here. As is the case with these things though, the devil is in the details. I got the basic functionality down in about an hour but adding the finishing touches took more testing and improving. Here's some of the ones I had to tackle: Image loading throws the position off: ## Since jQuery loads eagerly, it typically wouldn't wait for the images to load before calculating the position. This would cause the position to be off sometimes. Your browser doesn't support HTML5 video. Download the video instead. This is a one-line fix in jQuery: $(window).on("load", function() { // executes after e

## Laravel v5.8.27 released

DevFeed: [Laravel v5.8.27 released](<https://devfeed.tech/articles/laravel-v5-8-27-released-3813.md>)

Original publisher: [Read original article](<https://laravel.com/blog/laravel-v5-8-27-released>)

Author: Laravel Team

Published: 2019-07-02T21:49:00Z

Content type: release

Language: en

Sources: [Laravel Blog](<https://devfeed.tech/sources/laravel-blog.md>)

Topics: [Laravel](<https://devfeed.tech/topics/laravel.md>), [Database](<https://devfeed.tech/topics/database.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>)

Tags: [app](<https://devfeed.tech/tags/app.md>), [database](<https://devfeed.tech/tags/database.md>), [laravel](<https://devfeed.tech/tags/laravel.md>), [release](<https://devfeed.tech/tags/release.md>), [v5](<https://devfeed.tech/tags/v5.md>)

### AI overview

Laravel v5.8.27 is a release from July 2, 2019. The documented changes include updates to helpers, relation methods, database handling, jQuery component loading, script execution behavior, method chaining, custom channels, service manifests, Doctrine DBAL connections, and Mailgun message headers.

### Source excerpt

Laravel v5.8.27 is released in 2019/07/02, here are the changes we`ve merged into this release

## How to Add Emojis to Your Website

DevFeed: [How to Add Emojis to Your Website](<https://devfeed.tech/articles/how-to-add-emojis-to-your-website-27891.md>)

Original publisher: [Read original article](<https://clevertap.com/blog/how-to-add-emojis-to-your-website/>)

Author: Shivkumar M

Published: 2017-08-10T09:36:50Z

Content type: tutorial

Language: en

Sources: [CleverTap](<https://devfeed.tech/sources/clevertap.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [HTML](<https://devfeed.tech/topics/html.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>)

Tags: [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [customer-engagement](<https://devfeed.tech/tags/customer-engagement.md>), [customer-engagement-marketing-strategies-technology-engineering-emojis](<https://devfeed.tech/tags/customer-engagement-marketing-strategies-technology-engineering-emojis.md>), [emojis](<https://devfeed.tech/tags/emojis.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [js](<https://devfeed.tech/tags/js.md>), [marketing-strategies](<https://devfeed.tech/tags/marketing-strategies.md>), [notifications](<https://devfeed.tech/tags/notifications.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [personalization](<https://devfeed.tech/tags/personalization.md>), [technology](<https://devfeed.tech/tags/technology.md>), [website](<https://devfeed.tech/tags/website.md>)

### AI overview

A tutorial on adding emoji support to HTML inputs using an open-source widget, including stylesheet and JavaScript setup, input attributes, initialization, and a workaround for emojis that did not render in Chrome on Mac or Windows. It also describes CleverTap's use of emojis in customer engagement and data analysis.

### Source excerpt

Grab your phone and look at the last few text messages you have sent and received. I bet there were The post How to Add Emojis to Your Website first appeared on CleverTap.

## Managing content for a JAMstack site with Netlify CMS

DevFeed: [Managing content for a JAMstack site with Netlify CMS](<https://devfeed.tech/articles/managing-content-for-a-jamstack-site-with-netlify-cms-20781.md>)

Original publisher: [Read original article](<https://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/>)

Author: {"twitter"=\>"hlaueriksson"}

Published: 2017-06-30T12:00:00Z

Content type: tutorial

Language: en

Sources: [Henrik Lau Eriksson](<https://devfeed.tech/sources/henrik-lau-eriksson.md>)

Topics: [Jamstack](<https://devfeed.tech/topics/jamstack.md>), [Content Management System](<https://devfeed.tech/topics/cms.md>), [Netlify](<https://devfeed.tech/topics/netlify.md>), [Hugo](<https://devfeed.tech/topics/hugo.md>), [azure functions](<https://devfeed.tech/topics/azure-functions.md>), [OAuth](<https://devfeed.tech/topics/oauth.md>), [GitHub](<https://devfeed.tech/topics/github.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>)

Tags: [azure-functions](<https://devfeed.tech/tags/azure-functions.md>), [cms](<https://devfeed.tech/tags/cms.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [github](<https://devfeed.tech/tags/github.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [hugo](<https://devfeed.tech/tags/hugo.md>), [jamstack](<https://devfeed.tech/tags/jamstack.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [modern-web-development](<https://devfeed.tech/tags/modern-web-development.md>), [netlify](<https://devfeed.tech/tags/netlify.md>), [oauth](<https://devfeed.tech/tags/oauth.md>), [source](<https://devfeed.tech/tags/source.md>)

### AI overview

A tutorial on using Netlify CMS as a headless, Git-based content management system for a JAMstack site built with Hugo, jQuery, and Azure Functions. It explains the architecture, setup steps, GitHub OAuth configuration, and required site code changes.

### Source excerpt

Content for the modern web development architecture:

## Building a JAMstack site with Hugo and Azure Functions

DevFeed: [Building a JAMstack site with Hugo and Azure Functions](<https://devfeed.tech/articles/building-a-jamstack-site-with-hugo-and-azure-functions-20776.md>)

Original publisher: [Read original article](<https://conductofcode.io/post/building-a-jamstack-site-with-hugo-and-azure-functions/>)

Author: {"twitter"=\>"hlaueriksson"}

Published: 2017-05-31T20:00:00Z

Content type: tutorial

Language: en

Sources: [Henrik Lau Eriksson](<https://devfeed.tech/sources/henrik-lau-eriksson.md>)

Topics: [Jamstack](<https://devfeed.tech/topics/jamstack.md>), [Hugo](<https://devfeed.tech/topics/hugo.md>), [azure functions](<https://devfeed.tech/topics/azure-functions.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [API](<https://devfeed.tech/topics/api.md>), [Serverless](<https://devfeed.tech/topics/serverless.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [azure](<https://devfeed.tech/tags/azure.md>), [azure-functions](<https://devfeed.tech/tags/azure-functions.md>), [build-times](<https://devfeed.tech/tags/build-times.md>), [hugo](<https://devfeed.tech/tags/hugo.md>), [jamstack](<https://devfeed.tech/tags/jamstack.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [performance](<https://devfeed.tech/tags/performance.md>), [serverless](<https://devfeed.tech/tags/serverless.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

### AI overview

A tutorial on building a JAMstack site with Hugo, jQuery, and Azure Functions. It explains how Hugo generates markup, jQuery provides client-side JavaScript, and Azure Functions implement APIs, using a jam-recipe site as the example.

### Source excerpt

Modern web development architecture:

## jQuery/CSS Style Selectors for Codename One

DevFeed: [jQuery/CSS Style Selectors for Codename One](<https://devfeed.tech/articles/jquery-css-style-selectors-for-codename-one-19345.md>)

Original publisher: [Read original article](<https://www.codenameone.com/blog/jquery-css-style-selectors-for-cn1/>)

Author: Steve Hannah

Published: 2017-03-15T00:00:00Z

Content type: tutorial

Language: en

Sources: [CodeName One](<https://devfeed.tech/sources/codename-one.md>)

Topics: [selectors](<https://devfeed.tech/topics/selectors.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [library](<https://devfeed.tech/tags/library.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [selectors](<https://devfeed.tech/tags/selectors.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

This tutorial introduces Codename One's ComponentSelector class, which is heavily influenced by jQuery. It explains CSS-like component selection, a fluent API, set-based operations, and effects such as fading and sliding components.

### Source excerpt

The ComponentSelector class is a new class that brings the power of jQuery to Codename One. While it is not actually jQuery, it is heavily influenced by it. If you're not familiar with jQuery, here is the 10 second intro. jQuery is a javascript library, created by John Resig in 2006, that has become a staple of browser-based UI development. As of March 2017, over 70% of web sites are using jQuery. The initial problem that jQuery solved was browser incompatibility issues. It provided a consistent API for most useful DOM methods so that the developer didn't have to spend all their days and nights fighting with browser compatibility issues. In a way, it did for Javascript, what Codename One does for mobile apps.

## 3D Rotating cubes hover effect

DevFeed: [3D Rotating cubes hover effect](<https://devfeed.tech/articles/3d-rotating-cubes-hover-effect-37232.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/3d-rotating-cube-effect/>)

Author: Stanko

Published: 2016-02-23T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [jQuery](<https://devfeed.tech/topics/jquery.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [browser](<https://devfeed.tech/tags/browser.md>), [demo](<https://devfeed.tech/tags/demo.md>), [devices](<https://devfeed.tech/tags/devices.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [github](<https://devfeed.tech/tags/github.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [responsive](<https://devfeed.tech/tags/responsive.md>)

### AI overview

A tutorial demonstrating a responsive 3D cube hover effect built with jQuery. The cube switches between two sides on hover, changes rotation direction based on cursor entry, and adapts interaction direction for touch devices. Internet Explorer falls back to a fade effect because it does not support the required transform-style property.

### Source excerpt

Again, I've seen it somewhere on the internet and recreated it. This one uses jQuery, although I plan to rewrite it to vanilla JavaScript. It switches between two sides of the cube, every time you hover. Depending from which side cursor entered the cube, it will rotate in opposite direction. It is fully responsive, and on touch devices, direction depends of where you tap. Cube side is a regular div, and you can put any type of content in it. Works on every modern browser, but on IE it falls back to the fade effect. Thing is that Internet Explorers do not support transform-style: preserve-3d property. More on MDN. Check the demo. Documentation is on the same page. Grab the code on GitHub. Warning: Every person introduced to these cubes, played with them for ages :)

## Hack: How to mimic a disabled checkbox

DevFeed: [Hack: How to mimic a disabled checkbox](<https://devfeed.tech/articles/hack-how-to-mimic-a-disabled-checkbox-21221.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2014/09/hack-mimic-disabled-checkboxes/>)

Published: 2014-09-11T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Forms](<https://devfeed.tech/topics/forms.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [forms](<https://devfeed.tech/tags/forms.md>), [hack](<https://devfeed.tech/tags/hack.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

### AI overview

A tutorial explains how to mimic a disabled checkbox while ensuring its value is included in an HTML form submission. The approach temporarily stores and removes existing event handlers, blocks interaction with click and keydown handlers, and applies disabled styling, then restores the handlers and styling when re-enabled.

### Source excerpt

Lorem ipsum dolor sit amet

## How jQuery Can Subvert AngularJS Goals

DevFeed: [How jQuery Can Subvert AngularJS Goals](<https://devfeed.tech/articles/developing-with-angularjs-forget-jquery-exists-29155.md>)

Original publisher: [Read original article](<http://tech.zumba.com/2014/08/02/angularjs-forget-jquery//>)

Author: Stephen Young (stephen.young@zumba.com)

Published: 2014-08-02T00:00:00Z

Content type: opinion

Language: en

Sources: [Zumba](<https://devfeed.tech/sources/zumba.md>)

Topics: [jQuery](<https://devfeed.tech/topics/jquery.md>)

Tags: [angularjs](<https://devfeed.tech/tags/angularjs.md>)

### AI overview

The article examines how jQuery's familiarity and capabilities can unintentionally undermine AngularJS goals.

### Source excerpt

Understanding how jQuery's power and familiarity can unintentionally subvert AngularJS' goals.

## Wrapping a jQuery plugin in a Ember.js component (Screencast)

DevFeed: [Wrapping a jQuery plugin in a Ember.js component (Screencast)](<https://devfeed.tech/articles/wrapping-a-jquery-plugin-in-a-ember-js-component-screencast-40629.md>)

Original publisher: [Read original article](<https://eviltrout.com/blog/2014-06-03-jquery-component/>)

Published: 2014-06-03T00:00:00Z

Content type: tutorial

Language: en

Sources: [Robin Ward](<https://devfeed.tech/sources/robin-ward.md>)

Topics: [Ember](<https://devfeed.tech/topics/ember.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [reuse](<https://devfeed.tech/topics/reuse.md>)

Tags: [component](<https://devfeed.tech/tags/component.md>), [ember](<https://devfeed.tech/tags/ember.md>), [js](<https://devfeed.tech/tags/js.md>), [plugin](<https://devfeed.tech/tags/plugin.md>), [reuse](<https://devfeed.tech/tags/reuse.md>)

### AI overview

A screencast demonstrates how to wrap a jQuery plugin in an Ember.js component for reuse.

### Source excerpt

Time for another screencast! This one is shorter and shows how easy it is to wrap a jQuery plugin in an Ember.js component for reuse.

## Rendering ONLY Children in XHP

DevFeed: [Rendering ONLY Children in XHP](<https://devfeed.tech/articles/rendering-only-children-in-xhp-22041.md>)

Original publisher: [Read original article](<https://codebeforethehorse.tumblr.com/post/80902252142>)

Author: Codebeforethehorse

Published: 2014-03-27T19:54:00Z

Content type: tutorial

Language: en

Sources: [Stefan Parker](<https://devfeed.tech/sources/stefan-parker.md>)

Topics: [ui](<https://devfeed.tech/topics/ui.md>), [selectors](<https://devfeed.tech/topics/selectors.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [selectors](<https://devfeed.tech/tags/selectors.md>), [ui](<https://devfeed.tech/tags/ui.md>), [xhp](<https://devfeed.tech/tags/xhp.md>)

### AI overview

This tutorial explains how to use XHP rendering priority and :x:primitive to render only the augmented children of an element. It demonstrates the technique with Facebook news feed lists that add class names to children before appending them through an AJAX request.

### Source excerpt

My last post, Rendering NULL in XHP, surprised a bunch of people by the use of extending :x:primitive to handle children rendering before the parent's rendering. So I thought I'd quickly discuss another useful trick you can do by extending :x:primitive, this one deals with getting just the children from elements that alter their children before rendering. There are a few cases where you want this to happen. For instance, Facebook has an element <ui:list>, which allows engineers to make lists with pre-defined spacing and border colors. The news feed is one of these lists. The problem we had was that we needed <ui:list> to add class names to its children because we couldn't use CSS selectors to target direct children (specifically, the > selector, which IE6 didn't support). So we had to add class names like .uiListSmallVerticalPadding to every child element. Keeping this logic inside <ui:list> meant we only needed to specify the spacing once and it would remain uniform over the whole list. This works fine until we need to append more children through an AJAX request. When we load more news feed stories we need to create another <ui:list>, render it, but then remove the root element and only append its children to the existing news feed. :x:primitive to the rescue! We can use the rendering priority of :x:primitive to create an element that will let its child render first (adding class names to its children) and then remove the root. class :render-children extends :x:primitive { children (:xhp); protected function stringify() { $xhp = <x:frag> {$this->getFirstChild()->getChildren()} </x:frag>; return :xhp::renderChild($xhp); } } Now we're left with the augmented children to append to the existing list. Easy peasy.

## Set up Flask with webassets

DevFeed: [Set up Flask with webassets](<https://devfeed.tech/articles/set-up-flask-with-webassets-32125.md>)

Original publisher: [Read original article](<https://adambard.com/blog/fresh-flask-setup/>)

Published: 2014-02-20T00:00:00Z

Content type: tutorial

Language: en

Sources: [Adam Bard](<https://devfeed.tech/sources/adam-bard.md>)

Topics: [Flask](<https://devfeed.tech/topics/flask.md>), [Python](<https://devfeed.tech/topics/python.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [npm](<https://devfeed.tech/topics/npm.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [flask](<https://devfeed.tech/tags/flask.md>), [npm](<https://devfeed.tech/tags/npm.md>), [python](<https://devfeed.tech/tags/python.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

A step-by-step tutorial for setting up a new Flask application with Python, Sass, CoffeeScript, Flask-Assets, webassets, Bower, and jQuery. It covers installation, project structure, asset bundles, preprocessing, and serving compiled static assets.

### Source excerpt

Flask isn't new, but it's really great, and it's definitely my first choice when starting a new Python app. Today I want to give you a quick tour of the tools I use to set up a new Flask app.

## Introducing CodePlayer - watch your code like a movie

DevFeed: [Introducing CodePlayer - watch your code like a movie](<https://devfeed.tech/articles/introducing-codeplayer-watch-your-code-like-a-movie-19987.md>)

Original publisher: [Read original article](<http://engineering.hackerearth.com/2014/01/21/introducing-codeplayer/>)

Published: 2014-01-21T00:00:00Z

Content type: article

Language: en

Sources: [HackerEarth](<https://devfeed.tech/sources/hackerearth.md>)

Topics: [Code](<https://devfeed.tech/topics/code.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Django](<https://devfeed.tech/topics/django.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Databases](<https://devfeed.tech/topics/databases.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [backend](<https://devfeed.tech/tags/backend.md>), [batch](<https://devfeed.tech/tags/batch.md>), [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [coding](<https://devfeed.tech/tags/coding.md>), [database](<https://devfeed.tech/tags/database.md>), [demo](<https://devfeed.tech/tags/demo.md>), [development](<https://devfeed.tech/tags/development.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [load](<https://devfeed.tech/tags/load.md>), [post](<https://devfeed.tech/tags/post.md>), [server](<https://devfeed.tech/tags/server.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

HackerEarth introduces CodePlayer, a feature that records and replays coding activity like a video. It integrates with the site's code editors, captures editor changes, and batches requests to reduce web and database operations.

### Source excerpt

Ever thought of sharing solution of a coding problem in form of a video with someone, to teach them how you implemented the solution. Or, wanted to see what's the thought process of a potential employee when he/she solves a difficult problem. Ofcourse you have thought about it. But, it was not exactly possible to watch it as seamlessly as a movie until now. Today, we are announcing the release of HackerEarth's CodePlayer that exactly does that. tl;dr Watch a demo code video or Make your own code video. How it works CodePlayer is tightly integrated with all code editors in HackerEarth and sister site - CodeTable. That is, wherever you will find code editor in our site, there CodePlayer will also be activated. By choice, we have built it to be activated automatically in stealth mode on page load or first keystroke. Our code editor is built on top of Ace Editor. In ace editor, keystrokes or deltas can be captured and applied programmatically using Ace API. This is where the idea of playing code like a video seemed possible. CodePlayer was built on the following line of development: Setup Video Recording Keystrokes Playing Video Setup Video After the code editor is loaded, an AJAX POST request is made to server to setup video info in Django model. /** * This function sends ajax request to setup video. * This code is made generic to integrate it with code editor anywhere in site. * @arg video_obj: contains video info * @arg callback: called on success * @arg callback_arg_obj: above callback argument */ function setup_video(video_obj, callback, callback_arg_obj) { $.ajax({ url: '*****', type: 'POST', data: video_obj, dataType: 'json', callback: callback, callback_arg_obj: callback_arg_obj, success: function(response_obj) { this.callback(response_obj, this.callback_arg_obj); }, error: function(err) { } }); }; 
 Video model*(Backend)* class CodeVideo(Generic): final_code = models.TextField(null=True) # used as thumbnail lang = models.CharField(max_length=10) last_updated

## Asynchronous Control Flow with jQuery.Deferred

DevFeed: [Asynchronous Control Flow with jQuery.Deferred](<https://devfeed.tech/articles/asynchronous-control-flow-with-jquery-deferred-29153.md>)

Original publisher: [Read original article](<http://tech.zumba.com/2014/01/16/asynchronous-control-flow-jquery-deferred//>)

Author: Stephen Young (stephen.young@zumba.com)

Published: 2014-01-16T00:00:00Z

Content type: tutorial

Language: en

Sources: [Zumba](<https://devfeed.tech/sources/zumba.md>)

Topics: [jQuery](<https://devfeed.tech/topics/jquery.md>), [callback](<https://devfeed.tech/topics/callback.md>)

Tags: [asynchronous](<https://devfeed.tech/tags/asynchronous.md>), [callback](<https://devfeed.tech/tags/callback.md>), [how-to](<https://devfeed.tech/tags/how-to.md>)

### AI overview

This tutorial explains how to adapt callback structures into callback queues using deferred objects, also known as promises, with jQuery.Deferred.

### Source excerpt

How to adapt callback structures to callback queues using deferred objects (promises).

## Caching, jQuery Ajax and Other IE Fun

DevFeed: [Caching, jQuery Ajax and Other IE Fun](<https://devfeed.tech/articles/caching-jquery-ajax-and-other-ie-fun-21195.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2013/06/caching-jquery-ajax-and-other-ie-fun/>)

Published: 2013-06-05T00:00:00Z

Content type: article

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Caching](<https://devfeed.tech/topics/caching.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Ajax](<https://devfeed.tech/topics/ajax.md>), [browser](<https://devfeed.tech/topics/browser.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [HTTP](<https://devfeed.tech/topics/http.md>), [data](<https://devfeed.tech/topics/data.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [caching](<https://devfeed.tech/tags/caching.md>), [data](<https://devfeed.tech/tags/data.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [http](<https://devfeed.tech/tags/http.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [request](<https://devfeed.tech/tags/request.md>), [responses](<https://devfeed.tech/tags/responses.md>)

### AI overview

This article explains how browser caching affects jQuery Ajax requests, especially how user-agent handling of conditional requests can expose 304 Not Modified responses as 200 responses. It also discusses jQuery's cache-related option and an Internet Explorer issue involving response headers.

### Source excerpt

Lorem ipsum dolor sit amet

## Ember without Ember Data

DevFeed: [Ember without Ember Data](<https://devfeed.tech/articles/ember-without-ember-data-40617.md>)

Original publisher: [Read original article](<https://eviltrout.com/blog/2013-03-23-ember-without-data/>)

Published: 2013-03-23T00:00:00Z

Content type: tutorial

Language: en

Sources: [Robin Ward](<https://devfeed.tech/sources/robin-ward.md>)

Topics: [Ember](<https://devfeed.tech/topics/ember.md>), [Persistence](<https://devfeed.tech/topics/persistence.md>), [API](<https://devfeed.tech/topics/api.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [ajax](<https://devfeed.tech/tags/ajax.md>), [api](<https://devfeed.tech/tags/api.md>), [article](<https://devfeed.tech/tags/article.md>), [ember](<https://devfeed.tech/tags/ember.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [persistence](<https://devfeed.tech/tags/persistence.md>)

### AI overview

A tutorial explaining that Ember applications can use Ember's object model and AJAX-based data access without relying on Ember Data. It demonstrates modeling Reddit links, binding model properties to Handlebars templates, and accessing Reddit's JSONP API through jQuery.

### Source excerpt

Update May 26, 2014 The concepts in this article are still true, but I've recorded a screencast showing how to use ember without ember data using ember-cli and the latest version of Ember. It goes beyond the contents of this article, showing how to create an adapter, store and even your own identity map. Check it out! Ember Data is a persistence layer for Ember.Js. Unlike Ember, which currently has a candidate for a 1.0 release, Ember Data is still very much a work in progress. This has been a source of confusion for people who are learning Ember, as the two frameworks are complimentary but currently exist in different realms of stability.

## Interview with DZone

DevFeed: [Interview with DZone](<https://devfeed.tech/articles/interview-with-dzone-21188.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2013/03/interview-with-dzone/>)

Published: 2013-03-05T00:00:00Z

Content type: article

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [mvc](<https://devfeed.tech/topics/mvc.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [Single-page application (SPA)](<https://devfeed.tech/topics/spa.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [HTML5](<https://devfeed.tech/topics/html5.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [Microsoft](<https://devfeed.tech/topics/microsoft.md>), [Package manager](<https://devfeed.tech/topics/package-manager.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Test automation](<https://devfeed.tech/topics/test-automation.md>)

Tags: [applications](<https://devfeed.tech/tags/applications.md>), [dev-tools](<https://devfeed.tech/tags/dev-tools.md>), [development](<https://devfeed.tech/tags/development.md>), [frameworks](<https://devfeed.tech/tags/frameworks.md>), [html5](<https://devfeed.tech/tags/html5.md>), [interview](<https://devfeed.tech/tags/interview.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [microsoft](<https://devfeed.tech/tags/microsoft.md>), [mvc](<https://devfeed.tech/tags/mvc.md>), [test-automation](<https://devfeed.tech/tags/test-automation.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>)

### AI overview

An interview about building single-page e-government web applications with JavaScript. Juri describes adopting JavaScriptMVC, its jQuery-based full-stack tooling, and the benefits and challenges of JavaScript MVC frameworks, HTML5, TypeScript, and Microsoft's investment in JavaScript development.

### Source excerpt

Lorem ipsum dolor sit amet

## Programming ASP.net MVC4 by J. Chadwick, T. Snyder and H. Panda

DevFeed: [Programming ASP.net MVC4 by J. Chadwick, T. Snyder and H. Panda](<https://devfeed.tech/articles/programming-asp-net-mvc4-by-j-chadwick-t-snyder-and-h-panda-21179.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2012/12/programming-aspnet-mvc4/>)

Published: 2012-12-13T00:00:00Z

Content type: opinion

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [ASP.NET](<https://devfeed.tech/topics/aspnet.md>), [mvc](<https://devfeed.tech/topics/mvc.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Routing (disambiguation)](<https://devfeed.tech/topics/routing.md>), [Authentication](<https://devfeed.tech/topics/authentication.md>)

Tags: [asp-net](<https://devfeed.tech/tags/asp-net.md>), [authentication](<https://devfeed.tech/tags/authentication.md>), [best-practices](<https://devfeed.tech/tags/best-practices.md>), [caching](<https://devfeed.tech/tags/caching.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [mvc](<https://devfeed.tech/tags/mvc.md>), [routing](<https://devfeed.tech/tags/routing.md>), [techniques](<https://devfeed.tech/tags/techniques.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

### AI overview

A review of the book Programming ASP.net MVC4 describes its coverage of ASP.NET MVC development, from MVC fundamentals, routing, authentication, and application architecture to deployment, client-side JavaScript, mobile web development, and production practices. The review presents the book as suitable for both beginners and experienced developers.

### Source excerpt

Lorem ipsum dolor sit amet

## Output Caching in ASP.net MVC

DevFeed: [Output Caching in ASP.net MVC](<https://devfeed.tech/articles/output-caching-in-asp-net-mvc-21170.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2012/10/output-caching-in-aspnet-mvc/>)

Published: 2012-10-28T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [ASP.NET](<https://devfeed.tech/topics/aspnet.md>), [Caching](<https://devfeed.tech/topics/caching.md>), [mvc](<https://devfeed.tech/topics/mvc.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>)

Tags: [asp-net](<https://devfeed.tech/tags/asp-net.md>), [browser](<https://devfeed.tech/tags/browser.md>), [caching](<https://devfeed.tech/tags/caching.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [mvc](<https://devfeed.tech/tags/mvc.md>)

### AI overview

This tutorial explains output caching in ASP.NET MVC, including default response behavior, cache-control headers, ways to disable server and client caching, and the use of the OutputCache mechanism. It also discusses caching effects on AJAX requests.

### Source excerpt

Lorem ipsum dolor sit amet

## It's time to learn CoffeeScript

DevFeed: [It's time to learn CoffeeScript](<https://devfeed.tech/articles/it-s-time-to-learn-coffeescript-21164.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2012/08/its-time-to-learn-coffeescript/>)

Published: 2012-08-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>)

Tags: [examples](<https://devfeed.tech/tags/examples.md>), [install](<https://devfeed.tech/tags/install.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [learn](<https://devfeed.tech/tags/learn.md>), [npm](<https://devfeed.tech/tags/npm.md>)

### AI overview

A tutorial based on notes and examples from a Fluent Conference 2012 talk introduces CoffeeScript. It covers setup and installation, compilation, variables, functions, optional parameters, jQuery usage, conditionals, and operators.

### Source excerpt

Lorem ipsum dolor sit amet

## How jQuery.extend Can Mutate an Existing Object

DevFeed: [How jQuery.extend Can Mutate an Existing Object](<https://devfeed.tech/articles/why-extend-someobj-anotherobj-might-be-dangerous-21163.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2012/07/why-extendsomeobj-anotherobj-might-be/>)

Published: 2012-07-17T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [jQuery](<https://devfeed.tech/topics/jquery.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [function](<https://devfeed.tech/tags/function.md>), [object](<https://devfeed.tech/tags/object.md>), [property](<https://devfeed.tech/tags/property.md>)

### AI overview

This article explains that using jQuery.extend with an existing object as the target can overwrite its properties and cause unintended side effects. It recommends copying values into a new object instead.

### Source excerpt

Lorem ipsum dolor sit amet

## Waveforms, Let's Talk About Them

DevFeed: [Waveforms, Let's Talk About Them](<https://devfeed.tech/articles/waveforms-let-s-talk-about-them-2177.md>)

Original publisher: [Read original article](<https://developers.soundcloud.com/blog//waveforms-let-s-talk-about-them>)

Published: 2012-06-26T00:00:00Z

Content type: article

Language: en

Sources: [SoundCloud Backstage Blog](<https://devfeed.tech/sources/soundcloud-backstage-blog.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [WebKit](<https://devfeed.tech/topics/webkit.md>), [CSS](<https://devfeed.tech/topics/css.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [announcements](<https://devfeed.tech/tags/announcements.md>), [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>), [image](<https://devfeed.tech/tags/image.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [learn](<https://devfeed.tech/tags/learn.md>), [library](<https://devfeed.tech/tags/library.md>), [plugin](<https://devfeed.tech/tags/plugin.md>), [server](<https://devfeed.tech/tags/server.md>), [techniques](<https://devfeed.tech/tags/techniques.md>)

### AI overview

This SoundCloud developer article introduces Waveform.js, a JavaScript library for coloring audio waveforms. It reviews element stacking, WebKit masking, and Canvas-based pixel manipulation, including a server-side workaround for cross-domain image restrictions and a jQuery plugin implementation.

### Source excerpt

Waveforms I've worked at SoundCloud for over two years now, and if there's one thing I do a lot, it's color waveforms. Tons of them. And, I've done it several different ways. Today, Johannes and I are pumped to announce a new JavaScript library called Waveform.js that will assist you in your coloring efforts. But first, let's take some time to look back and learn from past techniques.

## Finn.no shares eventHub and Awesome Board repositories on GitHub

DevFeed: [Finn.no shares eventHub and Awesome Board repositories on GitHub](<https://devfeed.tech/articles/spreading-love-and-good-vibrations-on-github-31961.md>)

Original publisher: [Read original article](<https://tech.finn.no2011/11/21/spreading-love-and-good-vibrations-on-github/>)

Author: espen

Published: 2011-11-21T19:02:40Z

Content type: release

Language: en

Sources: [Finn.no](<https://devfeed.tech/sources/finn-no.md>)

Topics: [GitHub](<https://devfeed.tech/topics/github.md>), [Publish-subscribe pattern](<https://devfeed.tech/topics/pubsub.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [App](<https://devfeed.tech/topics/app.md>)

Tags: [awesome](<https://devfeed.tech/tags/awesome.md>), [code](<https://devfeed.tech/tags/code.md>), [event](<https://devfeed.tech/tags/event.md>), [github](<https://devfeed.tech/tags/github.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [manipulation](<https://devfeed.tech/tags/manipulation.md>), [repositories](<https://devfeed.tech/tags/repositories.md>), [tools](<https://devfeed.tech/tags/tools.md>)

### AI overview

Finn.no announces that it has shared the eventHub and Awesome Board repositories on GitHub under the finn-no organization. eventHub uses the publish-subscribe pattern for loosely coupled components and applications, while Awesome Board supports quality visualization. The shared versions are incomplete compared with the internal version.

### Source excerpt

We have finally made an effort to put some of our repos out on GitHub under the finn-no organization. It is not exactly filled with stuff right now, but we aim to put a lot more of our libraries and tools out here. Currently there are a few repositories out there: eventHub Awesome Board[Gone] eventHub This is just a tiny piece of code which enables you to build loosely coupled components or applications by utilizing the publish-subscribe pattern. The eventHub is just an object which publishes event to those to registered event listeners functions. We have written one-page JS applications using only the hub besides jQuery for DOM manipulation. It scales pretty well and it is pretty much what you'd need to create an application. Once your application grows to be quite large you might want to add some other architectural components, but for small to medium sized projects it is brilliant. It is used for the dashboard part for the Awesome Board[Gone]. Awesome Board The Awesome Board[Gone] is the application which has featured in two articles about visualizing quality. We have shown it a few times to different audiences and due to request for making it available we decided it was a good thing to share it on GitHub. There are some pieces missing from the version we run internally, but have patience the rest might still make it to a repo near you. Enjoy! Feel free to drop us a line in the comments section or follow us on Twitter.

[Next page](<https://devfeed.tech/topics/jquery.md?cursor=WyIyMDExLTExLTIxVDE5OjAyOjQwKzAwOjAwIiwgImJlZDE0NjY0LTlkMTItNDBiNC1iMTgxLWQ2MTE1NzM2NDJmNSJd>)