Category Archive for: AJAX

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

The Importance Of JavaScript Abstractions When Working With Remote Data

Recently I had the experience of reviewing a project and accessing its scalability and maintainability. There were a few bad practices here and there, a few strange pieces of code with lack of meaningful comments. Nothing uncommon for a relatively big (legacy) codebase, right? However was something that I keep finding. A pattern that repeated itself throughout this codebase and a number of other projects I’ve looked through.They could be all by lack of abstraction. Ultimately, this was the cause for maintenance difficulty. In object-oriented programming, abstraction is one of the three central principles (along with encapsulation and inheritance). Abstraction is valuable for two key reasons: Abstraction hides certain details and only show the essential features of the object. It tries to reduce and factor out details so that the developer can focus on a few concepts at a time. This approach improves understandability as well as maintainability of the…

Read More →

Creating a Static API from a Repository

When I first started building websites, the proposition was quite basic: take content, which may or may not be stored in some form of database, and deliver it to people’s browsers as HTML pages. Over the years, countless products used that simple model to offer all-in-one solutions for content management and delivery on the web. Fast-forward a decade or so and developers are presented with a very different reality. With such a vast landscape of devices consuming digital content, it’s now imperative to consider how content can be delivered not only to web browsers, but also to native mobile applications, IoT devices, and other mediums yet to come. Even within the realms of the web browser, things have also changed: client-side applications are becoming more and more ubiquitous, with challenges to content delivery that didn’t exist in traditional server-rendered pages. The answer to these challenges almost invariably involves creating an…

Read More →

JavaScript Scope and Closures

Scopes and closures are important in JavaScript. But, they were confusing for me when I first started. Here’s an explanation of scopes and closures to help you understand what they are. Let’s start with scopes. Scope A scope in JavaScript defines what variables you have access to. There are two kinds of scope – global scope and local scope. Global scope If a variable is declared outside all functions or curly braces ({}), it is said to be defined in the global scope. This is true only with JavaScript in web browsers. You declare global variables in Node.js differently, but we won’t go into Node.js in this article. const globalVariable = ‘some value’ Once you’ve declared a global variable, you can use that variable anywhere in your code, even in functions. const hello = ‘Hello CSS-Tricks Reader!’ function sayHello () { console.log(hello) } console.log(hello) // ‘Hello CSS-Tricks Reader!’ sayHello() //…

Read More →

Template Doesn’t Mean Cookie Cutter

The Challenge The mere mention of website templates makes some clients bristle. Nobody likes being told they have to conform to a set of rules they feel weren’t written with them in mind. They also believe that their site will look like everyone else’s and not meet their unique needs. Developers and designers also get concerned with templates, unsure if content editors will put the correct types of content in pre-built components. Sites that the development and design team spent a lot of time building can end up looking unprofessional if the templates aren’t used properly. No one wins in this scenario. The Solution Let’s first dispel the myth that using templates means your site will look like everyone else’s. When we talk about templates, we aren’t talking about simple differences in colors and fonts. Our Lectronimo website solution takes advantage of Drupal’s modularity and Panelizer to deliver different frameworks…

Read More →

Improving Conversations using the Perspective API

I recently came across an article by Rory Cellan-Jones about a new technology from Jigsaw, a development group at Google focused on making people safer online through technology. At the time they’d just released the first alpha version of what they call The Perspective API. It’s a machine learning tool that is designed to rate a string of text (i.e. a comment) and provide you with a Toxicity Score, a number representing how toxic the text is. The system learns by seeing how thousands of online conversations have been moderated and then scores new comments by assessing how “toxic” they are and whether similar language had led other people to leave conversations. What it’s doing is trying to improve the quality of debate and make sure people aren’t put off from joining in. As the project is still in its infancy it doesn’t do much more than that. Still, we…

Read More →

Creating Photorealistic 3D Graphics on the Web

Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we would need to use highly sophisticated animation software such as Maya, 3Ds Max or Houdini and do long hours of offline rendering on Render Farms that consisted of hundreds of machines. It’s because I worked with these tools for so long that I am now amazed by the state of the current web technology. We can now create and display high-quality 3D content right inside the web browser, in real time, using WebGL and Three.js. Here is an example of a project that is built using these technologies. You can find more projects that use three.js on their website. Some projects using three.js As the examples on the three.js website demonstrate,…

Read More →

More Gotchas Getting Inline SVG Into Production—Part II

The following is a guest post by Rob Levin and Chris Rumble. Rob and Chris both work on the product design team at Mavenlink. Rob is also creator and host of the SVG Immersion Podcast and wrote the original 5 Gotchas article back in ’14. Chris, is a UI and Motion Designer/Developer based out of San Francisco. In this article, they go over some additional issues they encountered after incorporating inline SVGs in to Mavenlink’s flagship application more then 2 years ago. The article illustrations were done by Rob and—in the spirit of our topic—are 100% vector SVGs! Wow, it’s been over 2 years since we posted the 5 Gotchas Getting SVG Into Production article. Well, we’ve encountered some new gotchas making it time for another follow up post! We’ll label these 6-10 paying homage to the first 5 gotchas in the original post 🙂 Gotcha Six: IE Drag &…

Read More →

(Now More Than Ever) You Might Not Need jQuery

The DOM and native browser API’s have improved by leaps and bounds since jQuery’s release all the way back in 2006. People have been writing “You Might Not Need jQuery” articles since 2013 (see this classic site and this classic repo). I don’t want to rehash old territory, but a good bit has changed in browser land since the last You Might Not Need jQuery article you might have stumbled upon. Browsers continue to implement new APIs that take the pain away from library-free development, many of them directly copied from jQuery. Let’s go through some new vanilla alternatives to jQuery methods. Remove an element from the page Remember the maddeningly roundabout way you had to remove an element from the page with vanilla DOM? el.parentNode.removeChild(el);? Here’s a comparison of the jQuery way and the new improved vanilla way. jQuery: var $elem = $(“.someClass”) //select the element $elem.remove(); //remove the…

Read More →

Introducing Microcosm: Our Data Layer For React

One of my favorite things about working in client-services is the interval with which we start new work. As a React shop, this means we build a lot of new apps from the ground up. Along the way, we’ve distilled what we’ve learned and baked it into a tool that I, finally, want to talk about. Microcosm is our general purpose tool for keeping React apps organized. We use it to work with application state, split large projects into manageable chunks, and as the guiding star for our application architecture. Before I go too much further: check it out the project on Github! In this post, I’ll provide a high level overview of Microcosm and some of the features I find particularly valuable. At a glance Microcosm was born out of the Flux mindset. From there it draws similar pieces: Actions Actions are a general abstraction for performing a job.…

Read More →

Form Validation – Part 4: Validating the MailChimp Subscribe Form

Over the last few articles in this series, we’ve learned how to use a handful of input types and validation attributes to natively validate forms. We’ve learned how to use the Constraint Validation API to enhance the native browser validation process for a better overall user experience. And we wrote a polyfill to extend support all the way back to IE9 (and plug a few feature holes in some newer versions). Now, let’s take what we’ve learned and apply it to a real example: the MailChimp signup form. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript A Validity State API Polyfill Validating the MailChimp Subscribe Form (You are here!) A simple form with a large footprint When you embed a MailChimp signup form on your site, it comes with a JavaScript validation script named `mc-validate.js`. This file is 140kb (minified), and includes the entire jQuery library,…

Read More →

Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type=”email”>) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can style fields that have errors on them with the :invalid pseudo-selector, but you can’t style the error messages themselves. Behavior is also inconsistent across browsers. User studies from Christian Holst and Luke Wroblewski (separately) found that displaying an error when the user leaves a field, and keeping that error persistent until the issue is fixed, provided the best and fastest user experience. Unfortunately, none of the browsers natively behave this way. However, there is a way to get this behavior without depending on a large JavaScript form validation library. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript (You…

Read More →

A Pretty Good SVG Icon System

I’ve long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant. I’ve also often advocated for a SVG icon system that is based on <symbol>s (an “SVG sprite”) and the <use> element for placing them. I’ve changed my mind a little. I don’t think that is a bad way to go, really, but there is certainly a simpler (and perhaps a little better) way to go. Just include the icons inline. That’s it. Sorry if you were hoping for something fancier. Like this: <button> <svg class=”icon icon-cart” viewBox=”0 0 100 100″ aria-hidden=”true”> <!– all your hot svg action, like: –> <path d=” … ” /> </svg> Add to Cart </button> Or perhaps more practically, with your server-side include of choice: <button> <?php include(“/icons/icon-cart.svg”); ?> Add to…

Read More →

How to Deal with the AJAX Loading Error: Not Found Error

Did you ever face the dreaded “AJAX Loading Error: Not Found” error message when trying to update your Joomla site using the “Joomla! Update” core component?    In this tutorial, you will learn a few tips helping your to get rid of this error and smoothly run your Joomla update.   [[ This is a content summary only. Visit for full links, other content, and more! ]] Source:

Using Fetch

Whenever we send or retrieve information with JavaScript, we initiate a thing known as an Ajax call. Ajax is a technique to send and retrieve information behind the scenes without needing to refresh the page. It allows browsers to send and retrieve information, then do things with what it gets back, like add or change HTML on the page. Let’s take a look at the history of that and then bring ourselves up-to-date. Another note here, we’re going to be using ES6 syntax for all the demos in this article. A few years ago, the easiest way to initiate an Ajax call was through the use of jQuery’s ajax method: $.ajax(‘some-url’, { success: (data) => { /* do something with the data */ }, error: (err) => { /* do something when an error happens */} }); We could do Ajax without jQuery, but we had to write an XMLHttpRequest,…

Read More →

Senior Java Developer – Loginsoft Consulting LLC – Rockville, MD

Senior Java Developer. Knowledge in other technologies such as Drupal, HTML, HTML5, CSS (Cascading Style Sheets) JQuery and AJAX may also be necessary….From Loginsoft Consulting LLC – Sat, 29 Apr 2017 01:43:34 GMT – View all Rockville jobs Source:

When Does a Project Need React?

You know when a project needs HTML and CSS, because it’s all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn’t have. As the need for these libraries fades, and we see a massive rise in new frameworks, I’d argue it’s not as clear when to reach for them. At what point do we need React? I’m just going to use React as a placeholder here for kinda large JavaScript framework thingies. Vue, Ember, Svelte… whatever. I understand they aren’t all the same, but when to reach for them I find equally nebulous.…

Read More →

Say You Need a Persistent Data Store Entirely on the Client-Side

You got your localStorage. You got your IndexedDB. Those are both client side and capable of storing data, but they are limited to a single browser. I can’t store data there from my laptop then come back later on my phone and have the same data. That’s the kind of thing websites have back-end databases for. The data is stored elsewhere, so you have access everywhere. But what if you don’t want to deal with a back end? There are third-party solutions for this. Firebase Firebase has a “Realtime Database” feature, so not only can you gather, store, and send data from the client side, that data is synced across any other device currently connected to the same database (if you care to do that). Instead of typical HTTP requests, the Firebase Realtime Database uses data synchronization—every time data changes, any connected device receives that update within milliseconds. That’s just…

Read More →

ES6 for Drupal Developers: ES6 Modules, Classes, and Promises

Some of the most important new features in ES6 originate from existing solutions for problems shared by a large swath of JavaScript applications. This is particularly true of ES6 modules, a new system of class-based inheritance, and promises. Prototypal inheritance can be difficult for those new to JavaScript. And at some point, modules and promises have both been present in various JavaScript libraries, but until now, they were impossible to implement natively. In the previous installment of this blog series, we looked at some of the most conspicuous aspects of ES6, such as arrow functions and concise methods, in addition to smaller syntactic features like template literals and computed property names. In this final installment of the “ES6 for Drupal Developers” series, we’ll dig into ES6 modules, classes, and promises, all essential elements that are emblematic of the new way to write JavaScript. ES6 modules and named exports The most…

Read More →

Back to Top