​Reinvest Your Time with HelloSign API

HelloSign API makes it simple to embed secure and legally binding eSignatures directly into any website. It’s 2x faster to implement than other eSign solutions and is also the only eSign API that allows customers to completely white label the integration, meaning our customers can give their customers a seamless, native signing experience. The three key features of the HelloSign API are the ability to collect signatures, request signatures, and format documents for signing directly on any site. Integrations go smoothly with help from tools like the API Dashboard, an industry-first feature that makes it easy for developers to debug and view critical information about API requests and responses. What are you going to do with all that time you saved by using HelloSign API?

Try it free today

The post ​Reinvest Your Time with HelloSign API appeared first on CSS-Tricks.

Writing Good Support Requests

My take on trying to be helpful to a support staff.

One bit is just as relevant for learning development:

Writing out a ticket will help you figure out the problem.

Sometimes when you have to take a second to collect your thoughts and explain something, the problem will become clear and maybe even the solution. Oftentimes, a bug is a bug and just needs to be fixed — but sometimes your support ticket might actually be something you can sort out for yourself and writing things out might be the first step toward that.

You know what they say, the best way to learn something is to teach it.

Just replace “ticket” with “forum topic” or whatever, on something like Spectrum.

Direct Link to Article — Permalink

The post Writing Good Support Requests appeared first on CSS-Tricks.

How to create a logo that responds to its own aspect ratio

One of the cool things about <svg> is that it’s literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it.

This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which ones respect the media queries most reliably. Sara Soueidan experimented with that a bunch more. Jake Archibald embedded a canvas inside and tested cross-browser compatibility that way. Estelle Weyl used that ability to do responsive images before responsive images.

Another thing that has really tripped people’s triggers is using that local media query stuff to make responsive logos. Most famously Joe Harrison’s site, but Tyler Sticka, Jeremy Frank, and Chris Austin all had a go as well.

Nils Binder has the latest take. Nils take is especially clever in how it uses <symbol>s referencing other <symbol>s for extra efficiency and min-aspect-ratio media queries rather than magic number widths.

For the record, we still very much need container queries for HTML elements. I get that it’s hard, but the difficulty of implementation and usefulness are different things. I much prefer interesting modern solutions over trying to be talked out of it.

Direct Link to Article — Permalink

The post How to create a logo that responds to its own aspect ratio appeared first on CSS-Tricks.

Free E-book: ​Modernize for Mobile Apps

(This is a sponsored post.)

No sign up required to read the free e-book.

Building modern apps (mobile, PWAs or Single Page Apps) that connect to legacy or enterprise systems is a pain. We put together an e-book that discusses the various options for how to make it all work. Here are some of the chapter contents:

  • The Challenges of Migrating to a Modern Mobile Architecture
  • Strategies for Migrating to Mobile
  • Strategies for Migrating to the Cloud
  • Data & Mobile Applications
  • Future-Proofing Your Modernization Efforts

Check out our Mobile Modernization: Architect Playbook

Direct Link to Article — Permalink

The post Free E-book: ​Modernize for Mobile Apps appeared first on CSS-Tricks.

Better rendering for variable fonts

I was messing around with a variable font the other day and noticed this weird rendering issue in the latest version of Chrome where certain parts of letterforms were clipping into each other in a really weird way. Thankfully, though, Stephen Nixon has come to the rescue with a temporary hack to fix the issue which using a text-shadow on the text that’s using the variable font:

.variable-font { text-shadow: 0 0 0 #000; /* text color goes last here */
} 

Once you do that, you shouldn’t be able to see those weird clip marks in the letterforms anymore. Yeah, it feels pretty hacky but I’m sure this rendering bug will be fixed relatively soon. It doesn’t look like it affects other browsers, as far as I can tell.

Direct Link to Article — Permalink

The post Better rendering for variable fonts appeared first on CSS-Tricks.

​Add real-time comments to a Gatsby blog

(This is a sponsored post.)

This tutorial will show you how to add realtime comments to a Gatsby blog. You will use Node and Express to create a simple backend, allowing users to add and view comments instantly.

Direct Link to Article — Permalink

The post ​Add real-time comments to a Gatsby blog appeared first on CSS-Tricks.

Resilient, Declarative, Contextual

Keith J. Grant:

I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it’s resilient; it’s declarative; and it’s contextual. Understanding these aspects of the language, I think, is key to becoming proficient in CSS.

  1. Like HTML, unknown or slightly broken CSS doesn’t stop a site in its tracks.
  2. You write something you want to happen in CSS, it happens, and a bunch of related things may happen to. I like Keith’s example with font-size. Increase it, and the container will also grow in height without you having to tell it to.
  3. You can’t understand what CSS is going to do without understanding the DOM structure it is paired with and the other styles at play.

And it’s my suspicion that developers who embrace these things, and have fully internalized them, tend to be far more proficient in CSS.

Easy to learn, a lifetime to master, as they say.

Direct Link to Article — Permalink

The post Resilient, Declarative, Contextual appeared first on CSS-Tricks.

​Truly understand your site visitors’ behavior

(This is a sponsored post.)

Hotjar is a quick and easy way to truly understand your visitors and identify opportunities for improvement and growth.

Try the all-in-one analytics and feedback tool for free.

Direct Link to Article — Permalink

The post ​Truly understand your site visitors’ behavior appeared first on CSS-Tricks.

World wide wrist

After all the hubbub with WWDC over the past couple of days, Ethan Marcotte is excited about the news that the Apple Watch will be able to view web content.

He writes:

If I had to guess, I’d imagine some sort of “reader mode” is coming to the Watch: in other words, when you open a link on your Watch, this minified version of WebKit wouldn’t act like a full browser. Instead of rendering all your scripts, styles, and layout, mini-WebKit would present a stripped-down version of your web page. If that’s the case, then Jen Simmons’s suggestion is spot-on: it just got a lot more important to design from a sensible, small screen-friendly document structure built atop semantic HTML.

But who knows! I could be wrong! Maybe it’s a more capable browser than I’m assuming, and we’ll start talking about best practices for layout, typography, and design on watches.

I had this inkling for a long while that there wouldn’t ever be a browser in the Watch due to its constraints, but instead I hoped that there might be a surge of methods to read web content aloud via some sort of voice interface. “Siri, read me the latest post from James’ blog,” is probably nightmare fuel for most people but I was sort of holding out for devices like this to access the web via audio.

Another interesting aside is that both Safari OSX and iOS have had a reader mode for a long time now, but have it as an option enabled by the user while viewing the content. Bypassing the user-enabled option would be the difference on watchOS and where our structured, semantic chops are put to task.

Direct Link to Article — Permalink

The post World wide wrist appeared first on CSS-Tricks.

Headless CMS: The Developers’ Best Friend

(This is a sponsored post.)

Your current CMS sucks! You know that for some time already but have not decided yet what your next solution should be.

You’ve noticed all the buzz around headless CMS but you’re still not sure what is in it for you and how it can solve all your woes.

What is the difference between traditional on-premise CMS with REST API and true API-first cloud based CMS? How does headless CMS fit to your scenarios? What it brings being language agnostic for you?

Explore the new possibilities unlocked by the headless CMS and see how it will help you stand out.

Direct Link to Article — Permalink

The post Headless CMS: The Developers’ Best Friend appeared first on CSS-Tricks.