Posts Tagged:Timeline

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.


People are Watching…

There’s been a little bit of a dust-up in regards to Twitter and their upcoming changes to their API. Essentially, they are turning of a number of features that greatly impact the end user experience, for the negative. So much so that a bunch of app developers have come together to raise awareness of this imminent change and hope to gather enough support to make a change. From Twitter’s end, they are focusing more on “data features and access” and not so much on “client app product features” which include Push Notifications and Automatic Timeline Updates. This is a huge loss to some incredible native applications, like Tweetbot which is one of the best in my honest opinion. Twitter isn’t unfamiliar with developer relations and have really messed up in the past. Here, they have an opportunity to do it right… but, it seems, that they haven’t learned anything from their…

Read More →

Custom List Number Styling

How about a classic CSS trick! This isn’t even so tricky anymore, since CSS has counter-increment and counter-reset and such that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready. Let’s say all you wanna do is style the dang numbers: See the Pen Custom List Style 2 by Chris Coyier (@chriscoyier) on CodePen. Here’s an example from the CodePen Challenges pages: See the Pen Custom List Counters by Chris Coyier (@chriscoyier) on CodePen. The keyframers made a Pen the other day that used pretty cool styles. Here’s a redux: See the Pen Custom List Style 3 by Chris Coyier (@chriscoyier) on CodePen. Recipe sites are great places to look for custom list styles, as lists of steps are such a prevelant feature. On Mat Marquis’ site, he’s got some fun ones. I ripped off his…

Read More →

Inspecting Animations in DevTools

I stumbled upon the Animation panel in Chrome’s DevTools the other day and almost jumped out of my seat with pure joy. Not only was I completely unaware that such a thing exists, but it was better than what I could’ve hoped: it lets you control and manipulate CSS animations and visualize how everything works under the hood. To access the panel, head to More Tools → Animations in the top right-hand menu when DevTools is open: Many of the tutorials I found about this were pretty complicated, so let’s take a step back and look at a smaller example to begin with: here’s a demo where the background-color of the html element will transition from black to orange on hover: html { cursor: pointer; background-color: #333; transition: background-color 4s ease; } html:hover { background-color: #e38810; } Let’s imagine that we want to nudge that transition time down from 4s.…

Read More →

Twitter to Display News Articles More Prominently by @MattGSouthern

Twitter is going to start displaying more links shared by those in your network in the home timeline.The post Twitter to Display News Articles More Prominently by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Leverage Interactivity to Build Better Visualizations

Data visualization is a powerful tool for exploring and explaining data. Visualizations typically leverage scale, position, shape, and color to convey meaning and understanding. While these facets represent the core of a visualization, the web offers an opportunity to incorporate interactivity, transitions, and movement. When used effectively, these additional dimensions help users better understand a dataset by showcasing individual elements or key groups, demonstrating change over time, or communicating changes in scale. The examples and best practices shared below represent a sample of the myriad ways interactivity and animation can add value and clarity to data visualizations. Showcase Elements and Sets Perhaps the most immediate application of interactivity within data visualizations is the ability for users to drill deeper into datasets with a hover or click. This pattern is common across most interactive dashboards and charts and is built-in to tools such as Google Charts and Tableau. This type of…

Read More →

Methods, Computed, and Watchers in Vue.js

One of the reasons I love working with Vue is because of how useful methods, computed, and watchers are, and the legibility of their distinction. Until understanding all three, it’s difficult to leverage the functionality of Vue to its full potential. Still, the majority of people I see confused about this framework tend to also be confused about the differences here, so let’s dig in. In case you need a quick answer and don’t have time to read through the entire article, here’s a small TL;DR: Methods: These are exactly what they sound like they might be (yay, naming!). They’re functions that hang off of an object—typically the Vue instance itself or a Vue component. Computed: These properties may at first look like they’d be used like a method, but are not. In Vue, we use data to track changes to a particular property that we’d like to be reactive.…

Read More →

Methods, Computed, and Watchers in Vue.js

One of the reasons I love working with Vue is because of how useful methods, computed, and watchers are, and the legibility of their distinction. Until understanding all three, it’s difficult to leverage the functionality of Vue to its full potential. Still, the majority of people I see confused about this framework tend to also be confused about the differences here, so let’s dig in. In case you need a quick answer and don’t have time to read through the entire article, here’s a small TL;DR: Methods: These are exactly what they sound like they might be (yay, naming!). They’re functions that hang off of an object—typically the Vue instance itself or a Vue component. Computed: These properties may at first look like they’d be used like a method, but are not. In Vue, we use data to track changes to a particular property that we’d like to be reactive.…

Read More →

The revolutionary project management tool

(This is a sponsored post.)monday.com is a project management tool your team will actually enjoy using. It makes it fun and easy for everyone to collaborate, focus on what’s important, and get more done at work. It’s a visual project management tool that’ll help you and your team collaborate and achieve more together. With monday.com you can manage projects and tasks in a single board, move through the timeline visually and intuitively and communicate with your teammates in the context of each task. Plus, it connects with all the apps you already use and love like Dropbox, Google Drive, and Zapier. Start free trial. Direct Link to Article — PermalinkThe post The revolutionary project management tool appeared first on CSS-Tricks. Source: CssTricks

Improve Project Communication With These Git Tips

.code-block code { max-width: 826px; margin-left: auto; margin-right: auto; } .code-block .line-numbers-rows { display: none; } .code-block pre { padding: 50px 20px; } Collaboration is a critical component of successful software development. While there are many opinions on how to build the best software, one decision is a given for most projects: using Git for version control. The data in Git is critical to understanding how things change over time in a project. Is this work a feature or a bug fix? Does it resolve an open issue? Does it introduce a breaking change? These days, Git extends beyond version control. Web services like GitHub provide tools for issue tracking, sprint planning, and more. In these integrations, Git data is a critical piece of digital project management. With that in mind, this article will share some tips to communicate effectively using Git. In the following examples, I’ll be referencing tie-ins…

Read More →

Reddit Launches New Promoted Posts for Mobile by @brentcsutoras

Reddit has a new Promoted Posts feature that lets users promote posts to all mobile users natively in their timeline.The post Reddit Launches New Promoted Posts for Mobile by @brentcsutoras appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Screen Recording Utilities for macOS

I record quite a few short little videos. Sometimes for use demonstrating bugs or weirdnesses. Sometimes right here for the blog. A lot of times for Instagram or other social media. Allow me to get SUPER NITPICKY about what I like. Multiple formats. Sometimes you need a GIF. Sometimes you need an MP4. Sometimes you need both. It’s ideal if the software can export as either or both. Easily resizeable recording area. If you need to record the entire screen, fine, but I feel like that’s the job for more full-blown screencasting apps. More often, I need to record a smaller bit of the screen. Ideally, I can drag over the portion I want, but the more control the better. Aspect ratios and saved sizes. Speaking of control, it’s likely I might want a square recording (like if it’s going to Instagram) or I might want a 16:9, a common…

Read More →

What Houdini Means for Animating Transforms

I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts. The Problem In order to better understand the issue at hand, let’s consider the example of a box we move horizontally across the screen. This means one div as far as the HTML goes: <div class=”box”></div> The CSS is also pretty straightforward. We give this box dimensions, a background and position it in the middle horizontally with a margin. $d: 4em; .box { margin: .25*$d auto; width: $d; height: $d; background: #f90; } See the Pen by thebabydino (@thebabydino) on CodePen. Next, with the…

Read More →

Facebook Reveals New Tool for Posting Personal Lists by @MattGSouthern

Facebook has released a new type of timeline post that allows users to create and publish personal lists.The post Facebook Reveals New Tool for Posting Personal Lists by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

A New Approach to Feature Requests

A few months ago, I got this email from a customer:It would be wonderful if there was a way to tag/assign forwarded emails to specific task lists within client projects. The “email forwards” section is really cumbersome on large scope client projects where we have lots of balls in the air at once.It’s pretty straightforward. Our app doesn’t have this feature and they would like it to be added. It’s a feature request. Our support team sees a dozen or so feature requests every day.Deciding how to handle feature requests like this one is tough. Do you track every single one? Are you only focused on some subset?And most importantly — how do you turn a customer email into something usable for your product teams? That’s the end goal — something usable by others in the company.Early in our days at Basecamp, we would literally “read them, throw them away, and forget them”.“It sounds blasphemous but the ones that…

Read More →

Additive Animation with the Web Animations API

These features have not landed in any stable browsers at the time of writing. However, everything discussed is already in Firefox Nightly by default and key parts are in Chrome Canary (with the Experimental Web Platform Features flag enabled), so I recommend using one of those browsers (when reading this article) to see as many of the features in action as possible. Regardless your preferred method of animation on the web, there will be times that you need to animate the same property in separate animations. Maybe you have a hover effect that scales an image and a click event that triggers a translate — both affecting the transform. By default, those animations do not know anything about the other, and only one will visually be applied (since they are affecting the same CSS property and the other value will be overridden). element.animate({ transform: [‘translateY(0)’, ‘translateY(10px)’] }, 1000); /* This…

Read More →

20 Years of SEO: A Brief History of Search Engine Optimization by @lorenbaker

Here’s a timeline of notable milestones in the history and evolution of search and SEO, starting in the 1990s.The post 20 Years of SEO: A Brief History of Search Engine Optimization by @lorenbaker appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Breaking Down the Performance API

JavaScript’s Performance API is prudent, because it hands over tools to accurately measure the performance of Web pages, which, in spite of being performed since long before, never really became easy or precise enough. That said, it isn’t as easy to get started with the API as it is to actually use it. Although I’ve seen extensions of it covered here and there in other posts, the big picture that ties everything together is hard to find. One look at any document explaining the global performance interface (the access point for the Performance API) and you’ll be bombarded with a slew of other specifications, including High Resolution Time API, Performance Timeline API and the Navigation API among what feels like many, many others. It’s enough to make the overarching concept more than a little confusing as to what exactly the API is measuring but, more importantly, make it easy to…

Read More →

Triggering Individual Animations on a Timeline with Bodymovin.js

In our recent collaboration with the Ad Council and AARP, we created a chatbot experience to walk users through a set of questions and serve them personalized action items to prepare for retirement. The tricky thing about retirement is that few people are truly prepared for it. To address this issue, we created an animated character that felt alive, showed empathy, and helped users stay engaged with the conversation. It’s name? Avo! Below is a set of emotions we needed to animate and bring into our web experience. Enter Bodymovin.js. Bodymovin is an After Effects plugin that exports animation data and translates it into Javascript. Bodymovin is exceptional when animating complex vector-based animations, especially with all the parts of Avo’s face. Because we had to convey many emotions, we needed a way to link them all together without distracting the user. Our approach was to have every animation return to…

Read More →

Triggering Individual Animations on a Timeline with Lottie-web

In our recent collaboration with the Ad Council and AARP, we created a chatbot experience to walk users through a set of questions and serve them personalized action items to prepare for retirement. The tricky thing about retirement is that few people are truly prepared for it. To address this issue, we created an animated character that felt alive, showed empathy, and helped users stay engaged with the conversation. It’s name? Avo! Below is a set of emotions we needed to animate and bring into our web experience. Enter Lottie-web. Lottie-web is an After Effects plugin that exports animation data and translates it into Javascript. Lottie-web is exceptional when animating complex vector-based animations, especially with all the parts of Avo’s face. Because we had to convey many emotions, we needed a way to link them all together without distracting the user. Our approach was to have every animation return to…

Read More →

Back to Top