We ask that NSFW posts nevertheless focus on the technology rather than the content. links to NSFW apps built with React) but try not to be prudes. ![]() Please link some source code (or if not possible, we understand, link some live demo or codepen so that people can try you out and learn from you) 6. We're all here to learn from you, but can't learn very much from a video recording. Demos should link source code or live demos If you need further guidelines on spam, see Reddit's guidelines on Spam. Per Reddit guidelines for self-promotion, you are definitely welcome to promote your own content as part of your participation in this community, but if you repeatedly post low quality crap you will be banned. ![]() Telling people to "get out" of the industry or that they are not good enough in some shape or form is a bannable offense. Reasoned criticism of React or any other library is welcome, but spare us your rants. Polite or Constructive criticism is welcome but don't rag on other people's work or attempts to improve themselves. Interested in building mobile apps using React Native? Check out /r/reactnative! Rules 1. Thank you all for reading this far.A community for learning and developing web applications using React by Facebook. This is such a useful hook to have in your belt and a nice simple one to get started learning how to write them.Īs always if you have any questions or think I've done anything wrong please don't hesitate to leave a comment. First we try the new way and if it fails we do it the old way this means in all modern browsers we get the new way straight away and in old browser, IE11, we wait a couple of milliseconds longer before adding the listeners.īelow are a couple of examples, feel free to look through the code and ask any questions you might have.Īnd there we have it, a React hook that will return the result of a media query into a state and will update that state when, and if, the media changes. So that try - catch when the spec was originally made addListener(func) was the way to listen for media change but in 2015, 2 years after iE11 the spec was changes to standardise this with other event listeners and thus addEventListener('change, func) was born. I'll leave you to read through the code then I'll talk a little about the try - catch bit after. The hook is going to be quite a simple one it's only going to use useState and useEffect as well as matchMedia. With this we can simple change animation to fade-ins rather than slides, or even remove the animations completely if you want to. The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.Īgain accessibility related, are you noticing a pattern? Animations are cool, I love adding animations to my sites and apps but some people get motion sickness from them. If someone can't read your text because they need a higher contrast then your site is no good to them. This is another feature with huge accessibility implications. This one currently only works in safari but support will come and it doesn't hurt to have your apps ready to hit the ground running. ![]() The prefers-contrast CSS media feature is used to detect if the user has requested that the web content is presented with a higher (or lower) contrast. This means we can change the whole look and feel of our sites to match the theme a user is requesting, this is not only be for ascetics but if a user has sensitive eyes they may request dark mode by default and we can deliver that making a better, more seamless, user experience. The prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme. You can look down the list over on MDN and see what all the different properties do, I'm going to focus and 3 here that I feel are important and are often overlooked. Enter fullscreen mode Exit fullscreen mode
0 Comments
Leave a Reply. |