Posts Tagged:extension

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 Can-Do’s of CodePen Projects

We just recently launched Projects, the latest big feature over on CodePen. It’s quite a bit different than the Pen Editor, so let’s take a look at all the things it can do! A Complete File System, and Complete HTML Files With CodePen Projects, you get a sidebar of files for you to put whatever files you like. That’s different than the Pen Editor on CodePen, which only gives you the HTML, CSS, and JavaScript editor to work with. While that’s super convenient for many types of demos, it can be limiting. What if you need multiple HTML files to link between? What if you need partials to include as needed? What if you need to upload other files to work with just for this demo? With Projects, you have complete control over the entire file structure. Create files and folders as needed. HTML files are complete documents, so you…

Read More →

5 Personalization Hacks that Fly Under the Radar

There’s no doubt. No questioning or debate necessary. Every marketer is trying to personalize. It’s seen as THE trend by most. And yet, results vary. Some still struggle. Slapping on trite $FNAME or $COMPANY wherever possible. Then there’s others setting the bar. Setting the tone. The difference is nuanced. You can’t always see it in front of you when you click on an ad or visit a landing page. But you can feel it. It’s there. And it’s undeniable. Some of the most sophisticated marketing today segment customer bases; delivering real-time personalization to each individual – without them even realizing it. Here’s five examples of what they’re doing, how they’re doing it, and you can do it, too. 1. Content vs. Web Personalization Type in and what do you see? It’s not generic. Or static. But a list of recommended products. And a list of suggestions based on past…

Read More →

Brotli and Static Compression

Content compression can be as simple as flipping a switch, but there’s a lot to consider beyond that. We pretty well know what we need to compress, but what about configuring compression? Or static versus dynamic compression? What about Brotli? By now, Brotli enjoys support in a good chunk of browsers in use. While it provides performance advantages in many situations, there are some ins and outs that can prove challenging. At its highest compression setting, Brotli provides superior compression ratios to gzip, but the compression speed at this setting is slow enough that the benefit is squandered when content is dynamically compressed. What you really want in cases such as these is static compression. If you’re unaware of the differences between static and dynamic compression, here’s a quick refresher: Dynamic compression occurs on-the-fly. The user makes a request, the content is compressed (as the user waits) and the compressed…

Read More →

Debugging Tips and Tricks

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We’ll start with some core tenants and then drill down to more specific examples. Main Concepts Isolate the Problem Isolation is possibly the strongest core tenant in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren’t working on the project anymore. Isolating…

Read More →

Little Stuff about Markdown I Always Forget and have to Google

This is mostly for me. These are the little things that sometimes confuse me about Markdown and I find myself having to search the web for. So I’ll write them down. Blogging as memory extension. Know that your mileage may vary on this stuff, as there are many varietals of Markdown. markdown=”1″ There is no concept of a <div> in Markdown syntax (or most other structural HTML elements), except that Markdown supports HTML so you can just use a <div> if you want to. But as soon as you do, nothing nested inside of it can be Markdown. ### Header <div class=”special-class”> 1. Nope 1. Not 1. Happening </div> Except it can! In many (most?) varietals of Markdown, you can put <div markdown=”1″> on the element and it will allow Markdown inside of it. ### Header <div class=”special-class” markdown=”1″> 1. All 1. Fixed 1. Up </div> Multiple paragraph lists and…

Read More →

Password Policies and Drupal

People tend to choose bad passwords if they are allowed to. By default Drupal provides some guidance about how to “make your password stronger,” but there’s no enforcement of any particular password policy out of the box. As usual, there’s a module for that. More than one in fact. Thinking on password policies has evolved over the years. The United States National Institute for Standards and Technology (NIST) has been working for some time on a new set of guidelines which are a good basis on which to formulate your own password policy. The default Drupal 7 password form Security is always a compromise between mitigating risk and convenience. A fairly recent piece of research on password strategies from Microsoft, for example, suggested that users should use simple memorable passwords for “low-risk” sites, reserving more complex passwords for sites where the risk warrants the higher effort involved. Not everybody will…

Read More →

Bing Releases an iMessage Extension, a Potential Google Allo Competitor by @MattGSouthern

Has Bing one-upped Google with the release of an iMessage extension?The post Bing Releases an iMessage Extension, a Potential Google Allo Competitor by @MattGSouthern appeared first on Search Engine Journal. Source:

How to Migrate Joomla Comments Away from Disqus with CComment

Did you start seeing sponsored ads above and below your Disqus comments on your Joomla based site recently? If you did, then it means that Disqus, without your permission, has included your site in their advertising program Reveal. We first wrote about this in “How to Opt-Out of Disqus Reveal”. The only alternative Disqus provides to avoid ads is to pay them $10 a month. But what if you don’t want to? Fortunately, it is possible for Joomla users to migrate your comments away from Disqus. In this tutorial, I’ll show how you can move your Disqus comments to the CComment extension, created by Daniel Dimitrov at [[ This is a content summary only. Visit for full links, other content, and more! ]] Source:

Building a CSS Grid Overlay

Let’s take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as “CSS custom properties”). If you aren’t familiar with custom properties, I’d highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou’s enlighting talk on using them. This grid overlay that we’re building will consider a developer tool, as in, a tool just for us, not really our users. So, let’s not worry too much about browser support (If you do care, check out caniuse… data on custom properties). While it’s impossible to preprocess custom properties to behave exactly the same as native support, if you use them just like you would preprocessor variables, tools like the postCSS plugin cssnext can transform them into CSS compliant with older browsers. Preface A couple…

Read More →

Introduction to The Elm Architecture and How to Build our First Application

Creating our first Elm application might seem like a hard task. The new syntax and the new paradigm can be intimidating if you haven’t used other functional programming languages before. But once you create your first application, you will understand why Elm has been gaining so much attention lately. Article Series: Why Elm? (And How To Get Started With It) Introduction to The Elm Architecture and How to Build our First Application (You are here!) In this article, we are going to build a simple application that will introduce us to the language fundamentals: the Elm architecture and how to start making things. It is going to be pretty simple, but it will introduce us to one of the most common tasks in any application: reacting to user actions and doing something with them inside the application. A stylized version of the Elm application for this tutorial It is going…

Read More →

What Kind of Lead Magnet Should You Make?

A lead magnet is basically a bribe. In a world where marketers clamor for “eyeballs,” views, and clicks, a lead magnet cuts through the noise by actually delivering something of value. Yes, you’re angling for something in return—a name, an email address—but you’re getting it honestly. You’re getting it through reciprocation. People like what you’re offering and they want to give you that information in exchange. The problem is that you can’t just give away just anything. The type of lead magnet you choose to use needs to align with your customers’ needs, with your value proposition, and with your market. Picking the right kind of lead magnet could mean the difference between a campaign that flops and one that brings you thousands of new customers. Something your market needs An effective and successful lead magnet will demonstrate the kind of value that your business can offer. It’s not “giving…

Read More →

Visual Search Comes to Pinterest Browser Extension by @MrDannyGoodwin

Pinterest is bringing visual search to its Chrome browser extension. The new feature lets you select objects in images to see related images from Pinterest.The post Visual Search Comes to Pinterest Browser Extension by @MrDannyGoodwin appeared first on Search Engine Journal. Source:

Build a Custom Serverless CMS: Part 2

In our previous proof-of-concept demo, we built a bare bones admin for generating a web page with the ability to edit some text on the page and set the site title and description. For this next demo, we build on our example and add rich text editing and image upload capabilities. Article Series: Build a Custom CMS for a Serverless Static Site Generator + Repo Build a Custom Serverless CMS: Part 2 (you are here!) + Repo Rich Text Editing TinyMCE is the most widely used web-based Rich Text Editor around, so let’s use it. We can add it to our admin form pretty easily. There are many configuration options available for TinyMCE. For this demo, we only need a few. tinymce.init({ selector: ‘#calloutText’, menubar: false, statusbar: false, toolbar: ‘undo redo | styleselect | bold italic | link’, plugins: ‘autolink link’ }); The rich text editor will encode its content…

Read More →

Tools to Visualize and Edit SVG Paths (Kinda!)

It was brought up at the SVG Summit the other day, wouldn’t it be nice when working with SVG to be able to work with it both ways at once? See and edit the code, and see the results visually See and edit the visual shapes, and see the code change There might not be the perfect one true tool, but there are certainly some ideas getting there! Anthony Dugois’s SVG Path Builder I’d embed the Pen here, but you really need a bit more space to play with it. Here’s a video of how it works: It shows you the code output, but you can’t adjust the code to see the changes back in the visual part. It still does an incredible job of showing you the different types of curve commands available in the SVG path syntax. Sten Hougaard’s SVG manipulate paths A Pen by Mr. Hougaard has…

Read More →

5 Nontraditional Productivity Tools

I’ll be honest – I love trying out new digital productivity and project management tools. I’m to the point where Product Hunt is generally a little too much of a rabbit hole for me, and I force a limit on the amount of time I spend checking it out. So it’s no big surprise that anytime someone is looking over my shoulder, they often ask at least once, “Oh, what tool/app is that?.” Most of the time, it’s something I’m experimenting with and likely not in love with, but I’ve come to realize I have a couple long-standing tools that have made a huge difference in my DPM work-life that are a bit off the beaten path. These range from applications to browser extensions to built-in mac functionality. Some are free, but others require an investment. In all cases though, the investment feels like it has paid off. Huge shout…

Read More →

HTTP/2 – A Real-World Performance Test and Analysis

Perhaps you’ve heard of HTTP/2? It’s not just an idea, it’s a real technology and slowly but surely, hosting companies and CDN services have been releasing it to their servers. Much has been said about the benefits of using HTTP/2 instead of HTTP1.x, but the proof the the pudding is in the eating. Today we’re going to perform a few real-world tests, perform some timings and see what results we can extract out of all this. Why HTTP/2? If you haven’t read about HTTP/2, may I suggest you have a look at a few articles. There’s the HTTP/2 faq which gives you all the nitty gritty technical details whilst I’ve also written a few articles about HTTP/2 myself where I try to tone-down the tech and focus mostly on the why and the how of HTTP/2. In a nutshell, HTTP/2 has been released to address the inherent problems of HTTP1.x…

Read More →

Intro to Vue.js: Vue-cli and Lifecycle Hooks

This is the third part in a five part series about the JavaScript framework, Vue.js. We’ll cover Vue-cli, and talk a little more about real-life development processes. This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Vue.js and understand what the framework has to offer. Article Series: Rendering, Directives, and Events Components, Props, and Slots Vue-cli (You are here!) Vuex (Coming soon!) Animations (Coming soon!) Vue-cli and build processes If you haven’t yet read the last section on Vue.js components and props, I highly suggest you do so before reading this section, otherwise, some things we’ll cover will lack context. Vue offers a really nice cli that gets you up and running with your choice of a few build tools, and really nice simple starter boilerplate. It’s a lovely tool. Before…

Read More →

Mozilla’s Light-Weight Web Design Tools

Inspired Magazine Inspired Magazine – creativity & inspiration daily Without any doubt, during the past five years, Google Chrome has emerged as the dominant force in the browser war for desktop users and (obviously) mobile users alike.  Developers, on the other hand, being more tech-savvy and security-conscious than the average user, have a tendency to prefer Firefox.  Indeed all security-focused distros feature Firefox as the browser of choice rather than Chromium, even though the latter is also open source and free in every sense of the word. Fortunately the adherence to web standards means that the browser most developers are using is mostly compatible with the browser most ordinary users are using.  This is important because it means something developed in Firefox is 99% of the time going to work flawlessly in Chrome.  Internet Explorer is no longer a priority for most developers because it’s seen as a fringe browser…

Read More →

Real CSS Tweets (Vol. I)

We be tweetin’ all the time about web design and development stuff. In fact, @Real_CSS_Tricks, the official Twitter account for this site, is largely just an outgoing airhorn for the stuff we publish here and interesting things elsewhere. The human beings that operate this site have their own accounts. It’s pretty interesting to see which tweets take off! Here’s a list of the most popular tweets in the last year or so. Wanna see a decent little slider in a handful of lines of code? — CSS-Tricks (@Real_CSS_Tricks) October 23, 2016 That one turned into a blog post and demo. Loads of icons you can make with a single element (and pseudos) — CSS-Tricks (@Real_CSS_Tricks) October 16, 2016 I’d say SVG is normally the best fit for this kind of thing, but this is a damn impressive experiment. I like the websites interface in how you can hover…

Read More →

Back to Top