React Higher-Order Components in TypeScript made simple

  • These attributes were chosen to illustrate all the aspects of HOCs while keeping the HOC as simple as possible.PropsThere are three types of props we need to consider when creating a HOC: OriginalProps, ExternalProps and InjectedProps.OriginalProps are props of the wrapped component.
  • The state of the HOC is simple, just the count of the clicksOptionsAs stated before, HOC is a function that takes a component and returns a component.While this is true, many HOCs take the form of curried HOC factories (like the mentioned connect from react-redux) that take a configuration object…
  • If you need to interact with props or states from here, the only way to do it is to specify options as functions, that take the props or states as arguments.For ClickCounted the options are simple – a flag indicating whether to console.log on click:Putting it all togetherHaving declared all the…
  • Now that we have the signature, all that’s left is to implement the HOC:First, we define the type alias for the resulting component’s props — the TOriginalProps ExternalProps to simplify its reuse.
  • Props and state are passed to it with whatever was in the OriginalProps along with the clickCount from the HOC state.Using the HOCTo illustrate how to use our HOC, we create a Demo component, that displays a different text depending on the amount of clicks and a custom message.Notice the type…

On a simple React Higher-Order Component, the process of writing them in TypeScript is demonstrated along with advice and rationals behind the type declarations
Continue reading “React Higher-Order Components in TypeScript made simple”

Scalable Design: Beyond Responsive Design – Julien Etienne – Medium

Beyond Responsive Design  #webdevelopment #webdesign #javascript #react #css #reactjs

  • I hope you are able to comprehend the impact this has on the way in which we:Design for the web.Implement user interfaces.Fight against content-display limitations.Fight against limitation regarding animations.Work harder to make things look similar-ish on the large variety of browsers and devices we consume today.Why?Despite what some believe, fonts are not static down to better design implementations or because it works better for Responsive Design, I believe the decision is largely due to backwards compatibility, and rightfully so.Yea but what about SVG and the Canvas API?Good point imaginary reader…Unfortunately SVG cannot wrap fonts at the time of this article.Canvas lacks SEO and accessibility.WebGL in many cases can be overkill and lacks SEO and accessibility.With all that said, all three technologies are way under utilise in modern web development.
  • At some point we need to realise that we can do more with less complications.I don’t get it(huff) If font-size can scale proportionately to the width of the viewport consistently across all modern browsers IE9+ without breaking zoom accessibility, design constraints will be significantly reduced.But you still need media queries?Yes but you’re not getting it, it’s more predictable this way.
  • Less than 2.5kb gzipped, ES, CJS and UMD and only has the features it needs.BTW, I have to give thanks to Browserstack for providing cross-browser support.Now let me tell you what it does…MIMETIC scales relative font units to the viewport, without breaking the browser’s zoom and it detects the zoom level for all browsers IE9+.
  • That’s it!You can improve accessibility on zoom or even let the user know they are viewing the browser in zoom.It’ supports:IE9+Safari 6.2+Every other modern browser, tablet, mobile etc.When you use MIMETIC, the rules change.
  • You have to worry less about container widths and CSS caveats and more about proportions, more like a print designer.How?There are a few things I discovered to make this library possible:Changing the root font-size only and only relying on relative units.Calculating and normalising the devicePixelRatio from the user’s client device widths even when the DPR it’s not available or not behaving as expected.Differentiating between the window resize and zoom by knowing if the devicePixelRatio changed last or not.Calculating the defautDevicePixelRatio.Fire on orientation change.IE logicalXDPI deviceXDPI values.Keep it simple: Option to use viewport units for mobile (Doesn’t break zoom on mobile)False hopeThe scariest discovery is that there was nothing stopping a viable solution being made several years ago, all the way since IE6.

Responsive Design has been a great breakthrough for modern web development. But I couldn’t help but notice that something is lacking in our expectations regarding the aesthetics of web user…
Continue reading “Scalable Design: Beyond Responsive Design – Julien Etienne – Medium”

React Native — first impressions – Real Life Programming – Medium

React Native — first impressions  #react #softwaredevelopment #reactnative #reactjs

  • Right now QuotesKeeper is already in AppStore and we’ll be posting updated thoughts about React Native soon.Some time ago at we started a project to build 3 apps with 3 devs in 30 days — the one month project.
  • Most of the knowledge you have about components, lifecycle, state, props, mixins, etc. can be used in your React Native project.
  • Just like you would do in regular React app.There are plenty of libraries ready to be used by your project if any native component is missing.
  • Also built-in React Native list component start scrolling very slow when you have so many elements.
  • You really need to test things out if you plan to work on large datasets.SummaryTo sum things up — would I use React Native in my next project?

First thoughts about React Native after more than a month of iOS app development. Good and bad sides of building your app with React Native.
Continue reading “React Native — first impressions – Real Life Programming – Medium”