Posts Tagged:jquery

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.


Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here. Noel Delagado See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen. The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction: var getDirection = function (ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = (ev.pageX – obj.offsetLeft – (w / 2) * (w > h ? (h / w) : 1)), y = (ev.pageY – obj.offsetTop – (h / 2) * (h > w ? (w…

Read More →

Stimulus 1.0: A modest JavaScript framework for the HTML you already have

Modern JavaScript doesn’t have to mean single-page, client-side MVC apps.We write a lot of JavaScript at Basecamp, but we don’t use it to create “JavaScript applications” in the contemporary sense. All our applications have server-side rendered HTML at their core, then add sprinkles of JavaScript to make them sparkle.This is the way of the majestic monolith. Basecamp runs across half a dozen platforms, including native mobile apps, with a single set of controllers, views, and models created using Ruby on Rails. Having a single, shared interface that can be updated in a single place is key to being able to perform with a small team, despite the many platforms.It allows us to party with productivity like days of yore. A throwback to when a single programmer could make rapacious progress without getting stuck in layers of indirection or distributed systems. A time before everyone thought the holy grail was to confine their…

Read More →

Is jQuery still relevant?

Remy Sharp: I’ve been playing with BigQuery and querying HTTP Archive’s dataset … I’ve queried the HTTP Archive and included the top 20 [JavaScript libraries] … jQuery accounts for a massive 83% of libraries found on the web sites. This corroborates other research, like W3Techs: jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 73.1% of all websites. And BuiltWith that shows it at 88.5% of the top 1,000,000 sites they look at. Even without considering what jQuery does, the amount of people that already know it, and the heaps of resources out there around it, yes, jQuery is still relevant. People haven’t stopped teaching it either. Literally in schools, but also courses like David DeSandro’s Fizzy School. Not to mention we have our own. While the casual naysayers and average JavaScript trolls are obnoxious for dismissing it out of hand, I can…

Read More →

10 Web Design Choices That Can Kill Your Clients’ Search Ranking

As a web designer, there’s no getting away from your responsibility to make design choices with SEO in mind. Your clients want their sites to rank well in search engines – there’s not much point in having one otherwise – and this means we sometimes have to make compromises. Compromise really is the key term, too. There’s no perfect way to design a website for search and your all your other priorities (user experience, conversions, etc.). You have to make the call on a number of design choices and come to the best overall result you can. Here are 10 design choices to avoid for the sake of your clients’ search ranking. Indexability killers The first thing to think about with search optimisation indexability and there are a number of potential issues you can come across as a designer. #1: One page, too much content Even basic apps like IFTTT and Pocket break…

Read More →

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 →

Dropdown Menus in Drupal 8 with the Superfish Module

If you want to build a large, multi-level drop-down menu in Drupal 8, then the Superfish module is a great choice. The Superfish module makes use of the jQuery Superfish menu plugin, which is useful for multi-level drop-down menus. Superfish has more features than most dropdown menus. It supports touch devices and keyboard interaction. [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

How to Create a Custom jQuery Plugin

jQuery is, in my humble opinion, the best Javascript library. Much of jQuery’s popularity is due to the fact that it considerably reduces development time. Their slogan is “write less, do more”, which is a great summary of jQuery’s benefits. What make jQuery really great are the plugins. Plugins are reusable portions of code which help you write even less Javascript to achieve specific features on the client side. For example, you can use plugins to create slideshows, galleries, popups and more. In this tutorial, you will learn how to create your own custom jQuery plugin in 4 easy steps. Let’s start… [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

Web Developer, Front-End – George Washington University – Foggy Bottom, MD

Drupal 7 experience (required). Experience building responsive websites using Drupal CMS , HTML /HTML5, CSS /CSS3, and JavaScript/jQuery….From George Washington University – Mon, 21 Aug 2017 16:25:18 GMT – View all Foggy Bottom, MD jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

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 →

Making Better HTML Tables

Inspired Magazine Inspired Magazine – creativity & inspiration daily Strangely enough, one of the most difficult web technologies to master is one of the earliest ones to be available for the browser after plain text and images. The problem is even greater today with so many different device types that need to be thought about. Perfect tables are nearly impossible to create unless they contain so few items that no problems are likely to be triggered. The kinds of errors that can arise include: Text wrapping incorrectly Justification errors Table rendering off screen Scroll problems Row height errors Column width errors General ugliness or untidiness In this article we’ll take a look at how to avoid problems like that, so your tables have the best chance of creating a good impression. Avoidance strategies to avoid Because tables are so difficult to get right, some people try to avoid using them.…

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 →

Musings on HTTP/2 and Bundling

HTTP/2 has been one of my areas of interest. In fact, I’ve written a few articles about it just in the last year. In one of those articles I made this unchecked assertion: If the user is on HTTP/2: You’ll serve more and smaller assets. You’ll avoid stuff like image sprites, inlined CSS, and scripts, and concatenated style sheets and scripts. I wasn’t the only one to say this, though, in all fairness to Rachel, she qualifies her assertion with caveats in her article. To be fair, it’s not bad advice in theory. HTTP/2’s multiplexing ability gives us leeway to avoid bundling without suffering the ill effects of head-of-line blocking (something we’re painfully familiar with in HTTP/1 environments). Unraveling some of these HTTP/1-specific optimizations can make development easier, too. In a time when web development seems more complicated than ever, who wouldn’t appreciate a little more simplicity? As with anything…

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 →

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 1: Constraint Validation in HTML

Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some custom MailChimp code. In fact, that setup is what inspired this new series about modern form validation. What new tools do we have these days for form validation? What is possible? What is still needed? In this series, I’m going to show you two lightweight ways to validate forms on the front end. Both take advantage of newer web APIs. I’m also going to teach you how to push browser support for these APIs back to IE9 (which provides you with coverage for 99.6% of all web traffic worldwide). Finally, we’ll take a look at MailChimp’s sign-up form, and provide the same experience with 28× (2,800%) less code. It’s worth mentioning that…

Read More →

15 Useful JavaScript Libraries to Enhance Your Site

Inspired Magazine Inspired Magazine – creativity & inspiration daily Making a great site requires a lot of skills, but you don’t always have to develop everything completely from scratch. To use any of the JavaScript libraries presented in this article, you will need to have at least some existing JavaScript skills, but you also don’t necessarily need to be an expert. What you do need to be expert with is working out how to blend the libraries into a site to get the most benefit from them. This isn’t really something that can be taught. It’s a skill you can only learn by doing. Once you have mastered the concepts, however, there is no limit to your creativity and what you can achieve with it. Collected here is our list of the most useful JavaScript libraries available to programmers for site enhancement. You may not see your favorite listed here,…

Read More →

10 Steps to Building Faster Websites

Google says websites should load in less than 2-3 seconds and when Google speaks you better damn well listen. Actually, it’s not only Google that comes up with numbers like this; countless studies say you want to be hitting the 2-second benchmark to stop traffic and valuable leads running out the door. There’s a problem, though. As the web becomes a more complex medium, performance tends to take a backseat to glitzy features. Which is fine, if you want a fancy website hidden behind that blank loading screen, but not so good when most people quit the session before your first line of content loads. So how do you find that sweet-spot between a fully-featured website and one that hits the 2-second benchmark? #1: Be careful with website builders Website builders are great for building websites quickly but quite so good when it comes to loading times. Bulky code working under the…

Read More →

Back to Top