Live Q&A with Ryan Seddon on Modernizr 3 - Oct 15, 2PM (PDT)

What tools do you use when working on Modernizr3 ?

I use vim for my text editor when working on the code, I switch between the command line and sourcetree when doing git related stuff. The chrome devtools are really great and super helpful. I also use remote.modern.ie to test in the latest IE locally on my Macbook.

What tools to you use to test cross-browser/device?

I really love browserstack and I use that a lot we’ve also got some early browser automation tests setup for modernizr using saucelabs but this has been a bit finicky to get running correctly.

1 Like

Out of curiosity, which 1 or 2 browser features would you say are the
most difficult to check for? In a similar vein, which browser features
would you say are the most commonly checked for?

There’s quite a few hairy stories on trying to detect something consistently! One that still hasn’t actually been detected satisfactorily is structured clones in the postMessage API, essentially allows you to pass objects, regexp etc see issue #388 each browser had a unique different way of handling certain scenarios.

The other test was detecting CSS hyphens which seems simple on the surface but is actually really hard to do, check out the source code for ~200 lines of code.

3 Likes

Hi, might be a silly question but what is better. To Detect with javascript or just use a class in css? Like .no-touch. Is one better then the other performance wise?

2 Likes

@Ryan_Seddon

  1. anything interesting planned for the next major release or on the near horizon for Modernizr?

  2. How do you feel about the cut the mustard approach?

  3. Does Modernizr have any automated testing (CI)? If so how is that done? I’m sure it would be quite tricky.

  4. Certain approaches like a react with a babel polyfill would be more about filling in the holes instead of detecting them. What are your thoughts on this approach.

  5. How did your involvement with Modernizr start?

  6. Are you contributing to any other open source projects? If so, which ones?

  7. Is there anything in the industry you are particularly excited about?

3 Likes

Hi Ryan,
Thanks for sharing knowledge.

What’s the issue with Firefox on desktop and touch feature?

Thanks,
Dragan

1 Like

In my meagre attempts to learn JS, one thing that was drilled in was to
feature detect, rather than assume a browser had a certain feature. It
seemed this wasn’t only so that you knew if a feature would work or not.
It was also to ensure the browser wouldn’t choke on a script it didn’t
understand. Is that also one of the rationales for Modernizr?

For a long time people used user agent sniffing or feature inference, if you’ve been around long enough you may remember document.all to detect netscape navigator. Modernizr was definitely trying to solve that issue where you could have a safe API surface to get definitive answers to the current browsers support for a feature and not make assumptions about it because it has a certain user agent string.

2 Likes

To Detect with javascript or just use a class in css? Like .no-touch. Is one better then the other performance wise?

Both have there unique use cases. If you’re after just changing styles then the CSS classes are the best thing to use.

If you need to get access to a users camera you would use the JavaScript properties

if(Modernizr.getUserMedia) {
  // I can safely try and access the camera
} else {
  // Show a message or try an alternative method e.g. flash.
}
1 Like

Great. Thanks for that👍🏻

1 Like

Can JavaScript access PHP sessions somehow?

Is there a CSV file you are aware of that has a SQL table friendly infobase showing support on a browser/ device level for a good list of features?

you would think a consortium would want to have a standard knowledge base …

1 Like

Hey there Ryan

Thanks for coming and having a chat with us.

My thoughts / questions are on using Modernizer for video detection and playback for Mobile devices.

Previously there was no real way easy to detect for ‘autoplay’ and pretty much you would have to check for touch screen support and assume its a Mobile device.

Now with Modernizer 3 there is support for the ‘autoplay’ attribute. However I’ve found it works inconsistently, some browsers like Mobile FF will say they don’t support it (but they actually do automatically play videos if you set the ‘preload’ attribute)

Other browsers will detect as supporting ‘autoplay’ but will kinda fail or not work as expected.

Is detecting support just a painful process for video related tasks? I assume you would have to try and play a video to even know if it does support the auto play attribute.

Thanks mate

5 Likes

Hey @simoncodrington, we haven’t forgotten about your question. Ryan is going through a few at the moment but we will get to this! :smile:

2 Likes

Wow a lot of questions, really interesting.

anything interesting planned for the next major release or on the near horizon for Modernizr?

We’ve only just shipped v3 and followed up quickly with 3.1 we plan to release a lot more often rather than a big bang release like we did with v3, we want to follow up with fixes and new features much faster.

How do you feel about the cut the mustard approach?

I think it’s an interesting approach to have a base line of features to “cut the mustard” and if it works well for you then go for it.

Modernizr is trying to be a useful tool but if it isn’t right in your situtation then we won’t hold it against you for not using it.

Does Modernizr have any automated testing (CI)? If so how is that done? I’m sure it would be quite tricky.

Yes! We have a huge test suite setup that runs a lot of tests in node.js for speed. I believe we have 100% coverage thanks to fellow team member Patrick. We also have saucelabs setup to run the same test suite in a large array of browsers, this is still a little brittle. If you have the skills to help in this area we’d love for you to have a go at fixing the issues.

Certain approaches like a react with a babel polyfill would be more
about filling in the holes instead of detecting them. What are your
thoughts on this approach.

Makes complete sense if you’re relying on some packages that need promises or Object.assign support built in, detecting support for those through Modernizr is probably not the correct way to go. What you really want is to fill the gap in support not just detect it and then decide what to do.

How did your involvement with Modernizr start?

I was looking through the code and saw that some of it could be refactored into a generalised method for injecting DOM nodes as well as finding a reliable detect CSS generated content. Check out my first PR.

After that Mr Irish thought I was worthy of getting commit access to the repository. So I’ve contributed ever since.

Are you contributing to any other open source projects? If so, which ones?

Modernizr is definitely the one I’m most active on but Ive done small PRs to Angular, React and jsdom.

Is there anything in the industry you are particularly excited about?

Yes! The Houdini task force which is all about exposing low level primitives to the browser so we can finally dig down and tune performance, add new CSS features and one day have truly performant web apps. Also super excitied about service workers and the new APIs being built on top of it ala push notifications and background refresh.

6 Likes

Hey everyone!
It’s 9am and so we’ll be wrapping up soon. All questions that have already been posted will be answered, so don’t worry you haven’t missed out! :smile:

1 Like

What’s the issue with Firefox on desktop and touch feature?

Modernizr 3 deprecated the touch detect as it was never about detecting touch devices nor was there ever a reliable way to do so. Patrick Lauke has done extensive research into this and has some great posts and talks on it.

3 Likes

I’m not super familiar with PHP but you should be able to write out the session into a PHP template

<script>
var session = <?php echo $_SESSION ?>;
</script>

You might have better luck asking this question in the PHP forum.

5 Likes

Is there a CSV file you are aware of that has a SQL table friendly
infobase showing support on a browser/ device level for a good list of
features?

Yes! caniuse.com is the best resource for which browsers support what down to specific versions it’s an amazing resource. You can also check out the DB that backs it on github https://github.com/Fyrd/caniuse

2 Likes

Hi Simon,

Now with Modernizer 3 there is support for the ‘autoplay’ attribute.
However I’ve found it works inconsistently, some browsers like Mobile FF
will say they don’t support it (but they actually do automatically play
videos if you set the ‘preload’ attribute)

Both autoplay and preload attributes have been quite tricky to detect there’s been some activity on fixing preload for audio tests but looks like these may apply to video too. If you have some time we’d love for you to create a PR to address these issues or if not opening an issue going into detail about what you’re seeing. We want these test to be accurate and we need the communities help to make this happen.

2 Likes

What a discussion! Thank you everyone for such interesting questions!

Most importantly, thank you @Ryan_Seddon for spending time with us on the forums and responding to these questions with equally informative responses. It was great to read along and follow! :clap:

For everyone else, feel free to carry on the discussion. This will be left open for you all. :smile:

4 Likes

Thanks for your great questions everyone!

Modernizr is only as strong as its contributions, we’d love for the community to keep being involved in not only reporting issues but also fixing/adding current or new features.

5 Likes