I wish I could just check a checkbox and make certain Google Analytics data public.
I get that analytics can be a very private thing for some sites. I think there are just as many sites where that data just doesn’t need to be private. Not only would it be interesting, but insight might be gleaned from having more eyeballs on the data, and it could contribute to a wider data set of analytic trends.
Anyway, there is no such checkbox. But Zach Aten pointed out to me there is a thing called Data Studio that allows you to build custom visual reports, and you can make them public with the same kind of sharing controls you find in other Google products (like Google Docs).
I slapped together a quick dashboard for just raw traffic data. Not the most useful thing to look at, but sometimes the most fun. I’d embed it here, but…
Can I embed charts on other sites?
No. Data Studio is currently a stand alone product.
Embedding a Data Studio report in an iframe is blocked by Chrome as a potential security risk.
Of course, you can do a way better job of not only building more beautiful and useful charts but also of collecting more useful data. If you’re using Google Analytics, doing a little bit more than using the default snippet goes a long way. Remember we have an article and video on that subject.
By giving folks an HTML API we can avoid potential headache.
You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you’re anything like me, you were completely bewildered when you first tried learning about it.
ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences.
An array is a collection of elements, such as [1, 2, 3, 4, 5]. You get all the elements immediately, and you can do things like map, filter and map them. This allows you to transform the collection of elements any way you’d like.
Now suppose that each element in the array occurred over time; that is, you don’t get all elements immediately, but rather one at a time. You might get the first element at 1 second, the next at 3 seconds, and so on. Here’s how that might be represented:
This can be described as a stream of values, or a sequence of events, or more relevantly, an observable.
An observable is a collection of values over time.
Just like with an array, you can map, filter, and more over these values to create and compose new observables. Finally, you can subscribe to these observables and do whatever you want with the final stream of values. This is where RxJS comes in.
<!-- the latest, minified version of RxJS -->
Once you have RxJS in your project, you can create an observable from just about anything:
const aboutAnything = 42;
// From just about anything (single value).
// The observable emits that value, then completes.
const meaningOfLife$ = Rx.Observable.just(aboutAnything);
// From an array or iterable.
// The observable emits each item from the array, then completes.
const myNumber$ = Rx.Observable.from([1, 2, 3, 4, 5]);
// From a promise.
// The observable emits the result eventually, then completes (or errors).
const myData$ = Rx.Observable.fromPromise(fetch('http://example.com/users'));
// From an event.
// The observable continuously emits events from the event listener.
const mouseMove$ = Rx.Observable
Note: the dollar sign ($) at the end of the variable is just a convention to indicate that the variable is an observable. Observables can be used to model anything that can be represented as a stream of values over time, such as events, Promises, timers, intervals, and animations.
As is, these observables don’t do much of anything, at least until you actually observe them. A subscription will do just that, which is created using .subscribe():
// Whenever we receive a number from the observable,
// log it to the console.
myNumber$.subscribe(number => console.log(number));
// > 1
// > 2
// > 3
// > 4
// > 5
From the mouseMove$ observable, every time a mousemove event occurs, the subscription changes the .innerHTML of the titleElm to the position of the mouse. The .map operator (which works similar to the Array.prototype.map method) can help simplify things:
With a little math and inline styles, you can make the card rotate towards the mouse. Both pos.y / clientHeight and pos.x / clientWidth evaluate to values between 0 and 1, so multiplying that by 50 and subtracting half (25) produces values from -25 to 25, which is just what we need for our rotation values:
Now let’s say you wanted this to respond to either mouse moves or touch moves, on touch devices. Without any callback mess, you can use RxJS to combine observables in many ways. In this example, the .merge operator can be used. Just like multiple lanes of traffic merging into a single lane, this returns a single observable containing all of the data merged from multiple observables.
As neat as the rotating card is, the motion a bit too rigid. Whenever the mouse (or finger) stops, the rotation instantly stops. To remedy this, linear interpolation (LERP) can be used. The general technique is described in this great tutorial by Rachel Smith. Essentially, instead of jumping from point A to B, LERP will go a fraction of the way on every animation tick. This produces a smooth transition, even when mouse/touch motion has stopped.
Let’s create a function that has one job: to calculate the next value given a start value and an end value, using LERP:
Short and sweet. We have a pure function that returns a new, linearly interpolated position value every time, by moving a current (start) position 10% closer to the next (end) position on each animation frame.
Schedulers and .interval
The question is, how do we represent animation frames in RxJS? Turns out, RxJS has something called Schedulers which control when data is emitted from an observable, among other things like when subscriptions should start receiving values.
Using Rx.Observable.interval(), you can create an observable that emits values on a regularly scheduled interval, such as every one second (Rx.Observable.interval(1000)). If you create a tiny interval, such as Rx.Observable.interval(0) and schedule it to emit values only on every animation frame using Rx.Scheduler.animationFrame, a value will be emitted about every 16 to 17ms, within the animation frame, as expected:
Now, smoothMove$ is a new observable that emits the latest values from move$only whenever animationFrame$ emits a value. This is desired — you don’t want values emitted outside animation frames (unless you really like jank). The second argument is a function that describes what to do when combining the latest values from each observable. In this case, the only important value is the move value, which is all that’s returned.
Transitioning with .scan
Now that you have an observable emitting the latest values from move$ on every animation frame, it’s time to add linear interpolation. The .scan() operator “accumulates” the current value and next value from an observable, given a function that takes those values.
This is perfect for our linear interpolation use-case. Remember that our lerp(start, end) function takes two arguments: the start (current) value and the end (next) value.
RxJS is not an animation library, of course, but handling values over time in a composable, declarative way is such a core concept to ReactiveX that animation serves as a great way to demonstrate the technology. Reactive Programming is a different way of thinking about programming, with many advantages:
It is declarative, composable, and immutable, which avoids callback hell and makes your code more terse, reusable, and modular.
It is very useful in dealing with all types of async data, whether it’s fetching data, communicating via WebSockets, listening to external events from multiple sources, or even animations
“Separation of concerns” – you declaratively represent the data that you expect using Observables and operators, and then deal with side effects in a single .subscribe() instead of sprinkling them around your code base.
There are implementations in so many languages – Java, PHP, Python, Ruby, C#, Swift, and others you might not have even heard of.
It is not a framework, and many popular frameworks (such as React, Angular, and Vue) work very well with RxJS.
You can get hipster points if you want, but ReactiveX was first implemented nearly a decade ago (2009), stemming from ideas by Conal Elliott and Paul Hudaktwo decades ago (1997), in describing functional reactive animations (surprise surprise). Needless to say, it’s battle-tested.
This article explored a number of useful parts and concepts of RxJS – creating Observables with .fromEvent() and .interval(), operating on observables with .map() and .scan(), combining multiple observables with .merge() and .withLatestFrom(), and introducing Schedulers with Rx.Scheduler.animationFrame. There are many other useful resources for learning RxJS:
Vincent De Oliveira has written an epic post that details pretty much everything you might ever want to know about the line-height and vertical-align properties. If you’ve ever had trouble aligning things next to text or wondered why two fonts look so wildly different from one another then this post is certainly for you.
I don’t believe that the overall page length itself is inherently problematic. I have noticed though that in many responsive designs, purposeful groupings of content are easy to spot on larger screens, but get muddled when things start to stack on mobile screens.
This is probably mostly a problem on “content” sites in which you smash things down into the ol’ tube of content. I don’t mind the tube, but I think Kevin is doing some smart thinking here. There are plenty of different patterns that can happen while tubizing, and it’s probably not thought about enough.
This site is particularly guilty. A quick document.documentElement.offsetHeight test showed 14749px, more than double the height of an example Kevin pointed out that was a bit excessive.
The DevTools (in any browser) are an invaluable development tool for CSS developers. If you need to see (and play with) the styles on any given element, a quick inspection is only a few clicks away.
Right click on something and “Inspect Element”, or, open DevTools and use its selection tools to grab what you need.
But… sometimes it can be difficult or impossible to target the element you need to target in the DevTools. The DOM events needed to work with the DevTools themselves can interfere.
Say I inserted an element on the mouseenter event of a certain other element, then removed it on mouseleave.
Try as I might, I just can’t target that newly-added element for inspection.
Chrome DevTools can simulate a :hover style, but that doesn’t really help us here. It doesn’t fire the DOM event, it just simulates the CSS state.
The trick is to fire a debugger; right when you need it
A debugger; statement, when the DevTools are open, kinda freezes the DOM. No more events are fired and script excecution is completely paused.
But… you can still use DevTools!
This is your opportunity to select that otherwise-impossible thing to select and do what you need to do. You can put that debugger; statement right in your code where you need it (remember DevTools has to be open for it to work). Or (Tim Holman taught me the trick) you can trigger it with a setTimeout() right from the console.
I tried this, and it works, in Chrome, Firefox, Edge, and Safari, so it’s a pretty cross-browser DevTools friendly trick. Only Chrome and Safari let you do mouse selection of elements while in debugger mode though, so in Edge or Firefox, you might have to do the drilling through the Elements tab to find what you need manually.
The following is a guest post by Jan Östlund. Jan is the creator of the GitFTP-Deploy, now at v2.0. He wrote to me about GitFTP-Deploy, and I thought it was pretty cool. As you’ll learn in this post, it’s macOS Git-based deployment software. I think it’s worth knowing about as it sits nicely between free (and usually a bit more complex) roll-your-own solutions, and solutions with monthly or yearly subscription costs. GitFTP-Deply is a flat cost. This is slightly tricky territory, as it’s advertorial in nature. So full disclosure: Jan didn’t pay for this, but I opted to use affiliate links.
Let’s set the scene. Say you are a web freelancer and are almost finished with a client’s new website. Over the years, you have learned the hard way not to edit the files directly over FTP. It’s too easy to make breaking changes with no record of what changed and who did what. Nowadays you are using Git to manage the version of the files.
Why use version control?
There are many benefits of using a version control system for your projects. Even if you’re a very organized person, you still might get confused with a naming system like `index-2017-01-12.html` or `header_image_final_final_v2.svg`. Is it really final? How do you know what exactly is different between these versions and the last?
A version control system (VCS, like Git) enforce that there is only one version of your files at any given time. All past versions of files are neatly packed up inside the VCS. When you need it, you can request any version at any time, and you’ll have a snapshot of the complete project at hand.
Every time you save a new version of your project, your VCS requires you to provide a short description of the changes. Additionally (if it’s a code/text file), you can see exactly what has been modified in the file’s content. The VCS helps you understand how your project evolved between versions.
Deployment / Uploading
As useful as a VCS is, it doesn’t directly help with uploading files to a live website. (We’ll refer to that as deployment.)
Deploying files can be very easy. Use an FTP client (e.g. Transmit) to upload files via FTP or SFTP straight to your server. The initial release of a site is especially easy: just upload all the files.
When you make changes to a site, you also need to upload files. But… which ones? Do you always remember which files you have changed? If your panicked client calls to tell you that the site is broken, do you know what changed the last few times you uploaded files?
If you are using Git, it’s easy to see. But still, Git doesn’t do deployment, and manually checking which files have changed and moving those is error prone and tedious. You still need a smart way to upload and deploy your changed files only.
So what other options do you have for deploying files? One option is also installing Git on the server. Then just like you push and pull from your Git repository locally, you can pull from that repository on the server and the server will pull down the latest changes. This isn’t an option for everyone, though. It will require shell access to the server and that just isn’t possible on many shared hosting solutions.
Another possibility is to rely on third-party cloud services like DeployBot, Springloops, or Beanstalk. None of these choices are bad, but there are potential downsides:
There are monthly or annual costs to these services, whether you are actively using them at the moment or not.
Setting up external Git repositories may take some time and can be complicated.
There is also the increased risk of relying on a third party service. The deployment service can be down at the moment you want to deploy.
The speed of the deployment is dependent on that service. There may be a long queue of other deployments before yours.
A Look at GitFTP-Deploy
Let’s take a look at my alternative: GitFTP-Deploy. GitFTP-Deploy is a native macOS app that only uploads the changed files (through SFTP, FTP or FTPS) since the last deployment. You don’t have to remember which files you have changed, added, or deleted.
Since GitFTP-Deploy reads what have changed from your local Git repository, you also get in the habit of using a Git for your project: once a file is committed, it’s also ready for deployment.
Other times it can be a real time saver just to commit the last changes, and it’s automatically pushed onto the server, just with a single Git commit command.
In less than two minutes you can start to deploy your files.
1) Create a new site
2) Point to your local repository and select which commit you want to start deploying from
3) Setup your server connection
4) Click Deploy
Maybe your workflow is a bit more complicated? You need more power?
Or perhaps you are using a workflow with another task runner like Grunt? Grunt can also be configured to help you with optimizing images, compressing scripts, compiling preprocessors, and countless other things.
The ability to run tasks can be quite powerful. For example, even WordPress has WP-CLI, meaning you could script out things like database syncing and settings updates with your deployment.
Other Notes on Usage
If you prefer not to have build files under version control, you can add this folder to “always upload”.
Using GitFTP–Deploy does not mean that you cannot use GitHub or another third-party hosted Git repository service. Just make sure to pull the changes from there before deploying.
While GitFTP–Deploy is not exactly built for teams, you can still use it. The easiest way it that one person handles the deployments. Another more advanced option is to run GitFTP-Deploy on a server.
This way may not work for large teams, and commits are done through many different individuals. However, GitFTP-Deploy will attempt to check which branch and commit that which was last deployed.