Posts Tagged:javascript

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.


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 →

The Little Schemer Will Expand/Blow Your Mind

I thought I’d take a break from the usual web dev content we post here to tell you about my favorite technical book, The Little Schemer, by Daniel P. Friedman and Matthias Felleisen: why you should read it, how you should read it, and a couple tools to help you on your journey. Why read The Little Schemer It teaches you recursion. At its core, TLS is a book about recursion — functions that call themselves with modified versions of their inputs in order to obtain a result. If you’re a working developer, you’ve probably worked with recursive functions if you’ve (for example) modified a deeply-nested JSON structure. TLS starts as a gentle introduction to these concepts, but things quickly get out of hand. It teaches you functional programming. Again, if you program in a language like Ruby or JavaScript, you write your fair share of anonymous functions (or lambdas…

Read More →

The Modlet Workflow: Improve Your Development Workflow with StealJS

You’ve been convinced of the benefits the modlet workflow provides and you want to start building your components with their own test and demo pages. Whether you’re starting a new project or updating your current one, you need a module loader and bundler that doesn’t require build configuration for every test and demo page you want to make. StealJS is the answer. It can load JavaScript modules in any format (AMD, CJS, etc.) and load other file types (Less, TypeScript, etc.) with plugins. It requires minimum configuration and unlike webpack, it doesn’t require a build to load your dependencies in development. Last but not least, you can use StealJS with any JavaScript library or framework, including CanJS, React, Vue, etc. In this tutorial, we’re going to add StealJS to a project, create a component with Preact, create an interactive demo page, and create a test page. Article Series: The Key…

Read More →

Announcing Node.js on Acquia Cloud

Today, Acquia announced that it expanded Acquia Cloud to support Node.js, the popular open-source JavaScript runtime. This is a big milestone for Acquia as it is the first time we have extended our cloud beyond Drupal. I wanted to take some time to explain the evolution of Acquia’s open-source stack and why this shift is important for our customers’ success. From client-side JavaScript to server-side JavaScript JavaScript was created at Netscape in 1995, when Brendan Eich wrote the first version of JavaScript in just 10 days. It took around 10 years for JavaScript to reach enterprise maturity, however. Adoption accelerated in 2004 when Google used JavaScript to build the first release of Gmail. In comparison to e-mail competitors like Yahoo! Mail and Hotmail, Gmail showed what was possible with client-side JavaScript, which enables developers to update pages dynamically and reduces full-page refreshes and round trips to the server. The benefit…

Read More →

Node.js and Headless Drupal on Acquia Cloud

The press release went out this morning with the headline, Acquia Debuts Node.js and Headless Drupal on Acquia Cloud. The subhed: “Company Expands Upon Drupal Cloud Solutions for Web and Flexible Content Applications.” The news: Acquia today unveiled a new application service for Acquia Cloud that makes it easy for digital IT teams to build and run JavaScript alongside Drupal. Acquia Cloud now supports the use of Node.js in addition to Drupal. The Dries quote: “Decoupled applications using JavaScript front ends are on the rise. They’re making it possible to create experiences with responsive, elegant, application-like behavior. To help our customers build such digital experiences with headless Drupal, we added Node.js support to Acquia Cloud.” Why it’s important: Developers will now be able to leverage tools enabling continuous delivery and integration across Node.js and Drupal from one user interface. IT professionals benefit from one secure, compliant cloud for Drupal, decoupled Drupal,…

Read More →

Deploying ES2015+ Code in Production Today

Philip Walton suggests making two copies of your production JavaScript. Easy enough to do with a Babel-based build process. <!– Browsers with ES module support load this file. –> <script type=”module” src=”main.js”></script> <!– Older browsers load this file (and module-supporting –> <!– browsers know *not* to load this file). –> <script nomodule src=”main-legacy.js”></script> He put together a demo project for it all and you’re looking at 50% file size savings. I would think there would be other speed improvements as well, by using modern JavaScript methods directly. Direct Link to Article — Permalink Deploying ES2015+ Code in Production Today is a post from CSS-Tricks Source: CssTricks

The Key to Building Large JavaScript Apps: The Modlet Workflow

You’re a developer working on a “large JavaScript application” and you’ve noticed some issues on your project. New team members struggle to find where everything is located. Debugging issues is difficult when you have to load the entire app to test one component. There aren’t clean API boundaries between your components, so their implementation details bleed one into the next. Updating your dependencies seems like a scary task, so your app doesn’t take advantage of the latest upgrades available to you. One of the key realizations we made at Bitovi was that “the secret to building large apps is to never build large apps.” When you break your app into smaller components, you can more easily test them and assemble them into your larger app. We follow what we call the “modlet” workflow, which promotes building each of your components as their own mini apps, with their own demos, documentation,…

Read More →

React + Dataviz

There is a natural connection between Data Visualization (dataviz) and SVG. SVG is a graphics format based on geometry and geometry is exactly what is needed to visually display data in compelling and accurate ways. SVG has got the “visualization” part, but SVG is more declarative than programmatic. To write code that digests data and turns it into SVG visualizations, that’s well suited for JavaScript. Typically, that means D3.js (“Data-Driven Documents”), which is great at pairing data and SVG. You know what else is good at dealing with data? React. The data that powers dataviz is commonly JSON, and “state” in React is JSON. Feed that JSON data to React component as state, and it will have access to all of it as it renders, and notably, will re-render when that state changes. React + D3 + SVG = Pretty good for dataviz I think that idea has been in…

Read More →

Is there any value in people who cannot write JavaScript?

Mandy Michael: If all you do in your job is write JS, that is fantastic and you are awesome, just like all the people that write CSS or have a focus in a particular area like accessibility, SVG, animation etc. What I am very concerned about is that many still don’t see value in being skilled in CSS & HTML. This attitude is something I just don’t understand. All of us working together provide value in our industry. +1 on all Mandy’s points. I suspect HTML and CSS skill will swing back higher in desirability a bit as design trends swing toward more complicated looks. More interesting layouts being one of those things. I tend to find those developers who only dabble in HTML/CSS fall over quickly when it comes to from-scratch work that involves layout. There is a lot of gray area here too. For example, I write Ruby…

Read More →

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/

Do you put anything in your code specifically for “Find in Project”?

During a having a team meeting the other day, a code formatting idea came up that I thought was super interesting. It had to do with formatting code in a such a way that made it easier to find what you were looking for later with any code editors “Find in Project” feature. Here’s what it was. When declaring a function in JavaScript, put a space after the function name and before the opening parenthesis, like… function doSomething () { } That space between doSomething and () is perfectly fine. Then when you call the function, don’t use a space, like this: doSomething(); It’s just a syntax convention. But now, “Find in Project” is more useful. If we want to quickly find where that function was defined, we can search for “doSomething ()”, and if we want to find instances of where it is used, we can look for “doSomething()”.…

Read More →

HTML Templates via JavaScript Template Literals

You know those super cool backticks-for-strings in new JavaScript? let emotion = `happy`; let sentence = `Chris is feeling ${emotion}`; Besides the variable interpolation in there being mighty handy, the do multi-line strings wonderfully, making them great for chunks of HTML: const some_html = ` <div class=”module> <h2>${data.title}</h2> <p>${data.content}</p> </div> `; That doesn’t look overly different than JSX does it?! Maybe we’d do something like that as a React component: class MyModule extends React.Component { render() { return <div class=”module> <h2>{this.props.title}</h2> <p>{this.props.content}</p> </div>; } } But what if we don’t really need React, or any other fairly-large-ish JavaScript framework? What if the only thing we want is the ability to render HTML templates and also really efficiently re-render them when we need to, like React is known for? As far as I understand it, that’s what projects like lit-html are for. As I write, it’s a pretty new library from…

Read More →

Cloud Storage as a CDN Option

Inspired Magazine Inspired Magazine – creativity & inspiration daily If you have a slow site, probably on shared server that receives a lot of traffic, you may be able to speed things up a bit by hosting some of your content on a Content Delivery Network (CDN). Unfortunately traditional CDN is often priced out of reach for a small business website, but the good news is there is a way to set up cloud storage drives to act as your own personal CDN systems. In this article we’ll discover some methods for doing that. Cloud storage CDN emulation vs pure CDN The main difference is cost and volume. Pure CDN usually works out cheaper for high traffic volumes and more expensive for low traffic volumes. Because a typical small business isn’t likely to see the kind of traffic that would make pure CDN worth it, emulating CDN functionality with cloud…

Read More →

Basecamp 3 for iOS: Hybrid Architecture

We’ve written quite a bit in the past about our approach to building hybrid mobile apps. Basecamp 3 represents the latest generation of this architecture, taking everything we’ve learned from previous versions.The first app for Basecamp 2 app was iPhone only, written in RubyMotion as a thin wrapper around UIWebView. Next, we did a new universal app for Basecamp 2, written in Xcode + Objective-C, still a using UIWebView, but with a bit more native code thrown in. For Basecamp 3, we’ve replaced Objective-C with Swift, UIWebView with WKWebView and added Turbolinks, with even more native code, and a deeper integration between native and web.Defining HybridFirst, it helps to be clear about what we mean by “hybrid”. That term is used in so many different contexts, that it’s almost meaningless. In our use, we’re referring to standard native apps where a significant portion of the content is rendered using web technology.…

Read More →

Upgrade Your JavaScript Error Monitoring

(This is a sponsored post.)Automatically detect and diagnose JavaScript errors impacting your users with Bugsnag. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in a fraction of the time compared to traditional tools. Bugsnag detects every single error and prioritizes errors with the greatest impact on your users. Get support for 50+ platforms and integrate with the development and productivity tools your team already uses. Bugsnag is used by the world’s top engineering teams including Airbnb, Pandora, MailChimp, Square, Shopify, Yelp, Lyft, Docker, and Cisco. Start your free trial today. Direct Link to Article — Permalink Upgrade Your JavaScript Error Monitoring is a post from CSS-Tricks Source: CssTricks

Boston Drupal Meetup Considers Distributions

The topic was “Distributions” at the September Boston Drupal Meetup, which was held at Acquia HQ in downtown Boston, and attendees were treated to an unusually comprehensive session. That’s because Drupal Project Lead Dries Buytaert kicked off the meeting by going waaay back, to the very first Drupal “distro.” To back up a bit, a distribution is a combination of Drupal core + modules + configuration + documentation — all bundled up and optimized for a particular purpose or group of users. And the very first distro, according to Dries: DeanSpace, the campaign management system used by Howard Dean during his brief, but notable, campaign for President of the United States in 2004. At the time, Drupal was relatively unknown, and DeanSpace gave the platform a boost. Ever since, Dries said, he’s been bullish about distributions: they help Drupal get into new places, and they reduce the burden of selecting…

Read More →

Switching Your Site to HTTPS on a Shoestring Budget

Google’s Search Console team recently sent out an email to site owners with a warning that Google Chrome will take steps starting this October to identify and show warnings on non-secure sites that have form inputs. Here’s the notice that landed in my inbox: The notice from the Google Search Console team regarding HTTPS support If your site URL does not support HTTPS, then this notice directly affects you. Even if your site does not have forms, moving over to HTTPS should be a priority, as this is only one step in Google’s strategy to identify insecure sites. They state this clearly in their message: The new warning is part of a long term plan to mark all pages served over HTTP as “not secure”. Current Chrome’s UI for a site with HTTP support and a site with HTTPS The problem is that the process of installing SSL certificates and…

Read More →

6 Reasons Why Web Design Is Not A Dying Profession

In recent years, there have been many concerns about web design as a profession. People are worried that the major advancements in technology, especially artificial intelligence, are a threat to this field. However, a group of people still argues that there’s still hope. So, we’ll be taking a look at reasons why web design is not a dying profession.   Why Is It Seen As A Dying Profession? Before we get started on the reasons why web design isn’t a dying profession, let’s see why people think it is. In this article, the term web design will be used to refer to both design and front end development. This involves the process of designing the website and coding the design. If you’ve been using the internet, then you’ve definitely noticed numerous adverts for both free and paid website builders. These types of websites allow users to create fully functional websites…

Read More →

Best Way to Programmatically Zoom a Web Application

Website accessibility has always been important, but nowadays, when we have clear standards and regulations from governments in most countries, it’s become even more crucial to support those standards and make our projects as accessible as they can be. The W3C recommendation provides 3 level of conformance: A, AA and AAA. To be at the AA level, among other requirements, we have to provide a way to increase the site’s font size: 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) Let’s look at solutions for this and try to find the best one we can. Incomplete Solution :  CSS zoom The first word which comes up when we talk about size changing is zoom. CSS has a zoom property and it does exactly what we want — increases size. Let’s take a…

Read More →

Back to Top