Posts Tagged:location

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.

How to Import a Sass File into Every Vue Component in an App

If you’re working on a large-scale Vue application, chances are at some point you’re going to want to organize the structure of your application so that you have some globally defined variables for CSS that you can make use of in any part of your application. This can be accomplished by writing this piece of code into every component in your application: <style lang=”scss”> @import “./styles/_variables.scss”; </style> But who has time for that?! We’re programmers, let’s do this programmatically. Why? You might be wondering why we would want to do something like this, especially if you’re just starting out in web development. Globals are bad, right? Why would we need this? What even are Sass variables? If you already know all of this, then you can skip down to the next section for the implementation. Companies big and small tend to have redesigns at least every one-to-two years. If your…

Read More →

Lazy Loading Images with Vue.js Directives and Intersection Observer

When I think about web performance, the first thing that comes to my mind is how images are generally the last elements that appear on a page. Today, images can be a major issue when it comes to performance, which is unfortunate since the speed a website loads has a direct impact on users successfully doing what they came to the page to do (think conversation rates). Very recently, Rahul Nanwani wrote up an extensive guide on lazy loading images. I’d like to cover the same topic, but from a different approach: using data attributes, Intersection Observer and custom directives in Vue.js. What this’ll basically do is allow us to solve two things: Store the src of the image we want to load without loading it in the first place. Detect when the image becomes visible to the user and trigger the request to load the image. Same basic lazy…

Read More →

Best Career Decision?

A very cool thread that has some neat answers from folks who shared about some of their best career decisions. There are some good answers: Emotionally detaching. I was a workaholic from age 16 until 33 and this was my primary identity. I used to always be proud of the work I did, no matter how lame the company or how many times I was screwed over. Then one day my father died, and I was fired from a company who I truly believed in and for whom I had sacrificed. This sounds cynical, but it’s really peaceful. With the emotional energy and sheer time saved I am able to cultivate strong relationships, passionate devote myself to music, be a better father/husband/son, discover new interests that have nothing to do with the internet. I frequently espouse the virtues of a “Fuck you, pay me” work attitude, and I recommend everybody…

Read More →

The next big jump in Basecamp accessibility!

How we made the Basecamp 3 Jump Menu accessibleThe Basecamp 3 Jump MenuEarlier this year I wrote about How we stopped making excuses and started improving Basecamp’s accessibility. Accessibility improvements in Basecamp 3 have come in two ways: All new features we’ve shipped over the past year and a half have been designed and tested to meet WCAG AA guidelines (The Web Content Accessibility Guidelines, or WCAG, provides a shared standard that web developers can follow to make sure their products are accessible).At the same time, we’ve gone back and retrofitted existing features and interactions for better accessibility. Today I’m excited to announce that we just completed some significant improvements to the Basecamp 3 Jump Menu!The jump menu has always been the quickest way for getting to a person, project, recently visited page, and My assignments/bookmarks/schedule /drafts/latest activity. Here’s a look at it in action:Note the small-ish “Press ⌘+J to show the menu” labelIn…

Read More →

Using Drupal 8 and AWS IoT to Power Digital Signage for New York’s Subway System

Intro: About Digital Experiences and Signs (Special thanks to Gerardo Gonzalez and Andy Hawks, engineers at CivicActions, who worked on this project — and this post — with me.) “Digital Experiences” are the next big thing someone at your company is almost certainly talking about. These include visionary technology that operates based on rich data that is timely and location-based, interactions between other services and products, and perhaps most importantly: content that is not reliant on a user manually driving the experience (as they usually might on a website or mobile application). One common form factor for these experiences is the digital sign. Not all signs constitute a digital experience, but there is an emerging market for such devices and the management of the content / data that is flowing to them. This challenge is particularly exciting when considering the potential for massive scale, as digital signage is installed across…

Read More →

Nested Links

The other day I posted an image, quite literally as a thought exercise, about how you might accomplish “nested” links. That is, a big container that is linked to one URL that contains a smaller container or text link inside of it that goes to another URL. That’s harder than it might seem at first glance. The main reason being that… <!– this is invalid and won’t render as expected –> <a href=”#one”> Outside <a href=”#two”> Inside </a> </a> Eric Meyer once called for more flexible linking, but even that doesn’t quite handle a situation where one link is nested inside another. Here’s what happens with that HTML, by the way: The nested link gets kicked out. My first inclination would be to simply not nest the links in the markup, but make them appear nested visually. Some folks replied to the tweet, including Nathan Smith, who shared that same…

Read More →

Shadow DOM in Ionic

Mike Hartington glows about how good and useful the Shadow DOM is: [Shadow DOM is] actually built on two simple ideas, isolation and location. Need to create a bit of DOM that is isolated from the global scope? Shadow DOM is here to help. Need to specify the exact location of a piece of DOM? Shadow DOMs scope API is what you need! It can be helpful to think of components that use Shadow DOM as modules for HTML. Markup and styles are isolated to their own DOM tree, and removed from the global context. Last time we talked about it around here, I showed how Twitter is using it for embedded tweets — which is a pretty awesome use case — and how it can fall back to an iframe. Mike says they polyfill it in unsupported situations. I suspect isolated styles is the primary selling point for any…

Read More →

Google Ads Location Targeting: When and Why You Should (and Shouldn’t) Use it

Google Ads Location targeting is an impressive feature that allows you to target specific markets like cities, airports, congressional districts, and more. And guess what? You don’t even need a brick-and-mortar business location! That doesn’t mean that you should go ahead and fire up a location targeting campaign though. These types of campaigns are very tricky. Read more Source:

Render Caching for React

Server Side Rendering (SSR) is a very useful technique that makes web apps appear faster. The initial HTML is displayed before the JavaScript is parsed and, while the user is deciding what to tap on, our handlers are ready. Server side rendering in React requires additional work to setup and has server costs. Furthermore, if your server team cannot have JavaScript running on your servers, you are stuck. It significantly complicates the CDN setup especially if you have pages that require login and where the user’s information is managed. I want to walk through a new concept called Render Caching. This is a cool trick that can give users an instant performance boost just like that of SSR without having to resort to writing code on the server. What is Render Caching? The migration from static HTML pages to Single Page Apps (SPAs) has left a gaping hole in the…

Read More →

Security Essentials for Site Developers and Admins

Of all tech topics, security is possibly the most complex, and certainly the most important. This is because security is always evolving. It is a forced evolution, as we must adapt to constantly emerging threats. There are various levels of security that we’ll have responsibility for. The first level is ourselves or the organization we work for. The second level is our clients. And the third level is the users of the websites or applications we develop for our clients. Despite our best efforts, clients will always find ways to undermine the protections we provide for them. They rely on us as IT professionals to help them stay safe, but paradoxically also rarely follow the safety advice we provide them with. Most users really are their own worst enemies. What we need to do, then, is make it as difficult as possible for clients to compromise their own security, while…

Read More →

Google Local Search Grades Hotels Based on Location by @MattGSouthern

Google has added a new tab to local search knowledge panels which assigns a grade to hotels based on location.The post Google Local Search Grades Hotels Based on Location by @MattGSouthern appeared first on Search Engine Journal. Source:

Five interesting ways to use for image art direction

When we saw Chris put up a list of cloud-hosted data-stores, we couldn’t resist letting him know that we also had one of those, only ours is a fully featured CMS that come with a rich query language and an open source, real time, collaborative authoring tool that you can tailor to your specific needs using React. It’s called “Add us to your list!” we asked Chris. “No, your stuff is interesting, can’t you write about you,” he replied. “Maybe something that would be useful for people working with images.” Challenge accepted! Systems like Sanity wants to free your content from the specific page it happens to be sitting on, so that you can flow it through APIs. That way you can reuse your painstakingly crafted content anywhere you need it. So, what does this mean for images? Images are the odd ones out. We can capture documentation articles,…

Read More →

Adding Particle Effects to DOM Elements with Canvas

Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for many kinds of effects. Before we begin, feel free to grab the source code in the repo. View Repo Create the initial element First, let’s create an HTML element to build on. I’m using a simple styled button, but it really could be any HTML element. See the Pen DOM to Canvas #1 by Zach Saucier (@Zeaklous) on CodePen. A modern browser like Chrome, Firefox, or Edge is required to view these demos. But how can we get a canvas to “see” this element so that we can manipulate each pixel using canvas? In order to make that to happen, we will essentially need to take a snapshot of our HTML…

Read More →

Create your own Serverless API

If you don’t already know of it, Todd Motto has this great list of public APIs. It’s awesome if you’re trying out a new framework or new layout pattern and want to hit the ground running without fussing with the content. But what if you want or need to make your own API? Serverless can help create a nice one for data you’d like to expose for use. Serverless really shines for this use case, and hopefully this post makes it clear why. In a non-serverless paradigm, we have to pick something like express, we have to set up endpoints, we have to give your web server secured access to your database server, you have to deploy it, etc. In contrast, here we’ll be able to create an API in a few button clicks, with minor modifications. Here’s the inspiration for this tutorial: I’ve been building a finder to search…

Read More →

Remote Conferences; Bridging the Gap, Clearing the Odds

A few weeks back, I saw one of my esteemed mentors decry the psychological traumas he had experienced, following series and series of refusals at certain embassies. “A child concentrating hard at school” by Les Anderson on Unsplash You would think he went for a contract he did not have the capacity for, but then, you would have been wrong. He needed to impart knowledge. He opted to do so across borders, but then, some realities were harsh. We are fighting just the police for mistaking techies and related careers as fraudsters when we have a much bigger problem #thread — Christian Nwamba (@codebeast) June 3, 2018 Borders and geographical constraints can cause a lot of havoc. However, it can only do so, when the full discovery of a better way to impart knowledge across borders has not been made. Video conferencing technology has become handy at times like this.…

Read More →

CSS Grid in IE: CSS Grid and the New Autoprefixer

In Part 1 of this series, I debunked a few misconceptions that many people have around the Internet Explorer (IE) implementation of CSS grid. This article builds on that knowledge. It would be best to go back and read that article first if you haven’t already. Today I’m going to be tackling the biggest misconception of all: that utilizing the IE implementation of CSS grid is extremely difficult. You can easily use CSS grid in IE right now without having to give it any sort of crappy fallback layout. It really isn’t that hard. Article Series: Debunking Common IE Grid Misconceptions CSS Grid and the new Autoprefixer (This Post) Faking an auto-placement grid with gaps (Coming Soon!) Giving IE a crappy fallback layout is a bit of a tough sell to clients. It is especially tough if this is for an intranet where 90% of the users are using IE.…

Read More →

Storing Secret Credentials in Rails 5.2 and Up

The Good Ol’ Days Since version 4.1, Rails has helped developers store their secrets by generating a new secrets.yml file in the config folder. By default, this file contains a SECRET_KEY_BASE that is used to “derive keys for encrypted cookies… [and] HMAC signed cookies.”[1] However, you could add additional keys to this file: # config/secrets.yml development: secret_key_base: n3mb3r5a5ndl3t4ter5 secret_api_key: SOME_PRIVATE_KEY Once everything is saved, you could access it via Rails.application.secrets.secret_api_key. This way, you could store your secret credentials in a single file and simply make sure that secrets.yml is part of your .gitignore. The release of Rails 5.1 added another file named secrets.yml.enc to allow for encrypting your secret credentials, but this caused some confusion. The combination of config/secrets.yml, config/secrets.yml.enc, and SECRET_KEY_BASE made it so it wasn’t clear where secrets should be stored and what the relevance of SECRET_KEY_BASE was [2] . A New Beginning With this confusion in mind,…

Read More →

Back to Top