With styled-components into the future – 💅 styled-components – Medium

With styled-components into the future  #styledcomponents #react #cssinjs #css #reactjs

  • Those remain the same and intact.While this sounds like no more can be achieved from a library that was mostly about best practices and common patterns in CSS, we are still in a position to drive change in the community.And this is because of the ecosystem that people have created…
  • Even more so with our new docs that we’ve published a few months ago.But the real question is, what makes it the library you know and love?There’s a lot of great content and talks from both Max and Glen, so if you’re new to what the ideas of the library are,…
  • [1]Then we have to transform the CSS to be able to inject it [2], and finally inject your CSS into the stylesheet, at the position that we’ve marked earlier.In v2 and onwards we’ve focused a lot on optimising all of the different steps involved here for performance, but one step…
  • The idea that becomes increasingly important here is, that we can’t build a library that works for some special use cases, but what we can build is a CSS infrastructure that allows you to change the CSS yourself.Let’s see how we could approach this.The interesting thing is that with v1…
  • We can run our transformations during Babel’s transpilation, or during build-time in general.We can build a CSS-in-JS pipeline!This would result in nothing being shipped to the runtime, and as long as we can provide an “opt-in” system, you would still be able to decide whether you’d like to ship the…

styled-components has changed a lot in its past. And we are not even done yet!
Continue reading “With styled-components into the future – 💅 styled-components – Medium”

What’s New With Server-Side Rendering in React 16 – Hacker Noon

What’s New With Server-Side Rendering in #ReactJS 16:  by @xander76 #JavaScript

  • Naturally, this feature is also supported by React 16’s server-side rendering.So, you can now server-render components that look like this:class MyArrayComponent extends React.Component { render() { return [ div key=”1″first element/div, div key=”2″second element/div ]; }}class MyStringComponent extends React.Component { render() { return “hey there”; }}class MyNumberComponent extends React.Component {…
  • To learn more about this feature, read Dan Abramov’s post on the React blog about the change.React 16 SSR Doesn’t Support Error Boundaries or PortalsThere are two new features in the React 16 client-side renderer that are unfortunately not supported in the server-side renderer: Error Boundaries and Portals.
  • If for any reason there’s a mismatch, React raises a warning in development mode and replaces the entire tree of server-generated markup with HTML that has been generated on the client.In React 16, though, the client-side renderer uses a different algorithm to check that the server-generated markup is correct.
  • And when the client-side renderer in React 16 detects a markup mismatch, it only attempts to change the HTML subtree that doesn’t match, rather than the entire HTML tree.Generally, this change shouldn’t have much effect for end users, except for one fact: React 16 doesn’t fix mismatched SSR-generated HTML attributes…
  • This performance optimization means that you will need to make extra sure that you fix any markup mismatch warnings you see in your app in development mode.React 16 Doesn’t Need To Be Compiled For Best PerformanceIn React 15, if you used SSR straight out of the box, performance was less…

There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering. Let’s take a…
Continue reading “What’s New With Server-Side Rendering in React 16 – Hacker Noon”

What’s New With Server-Side Rendering in React 16 – Sasha Aickin – Medium

  • Naturally, this feature is also supported by React 16’s server-side rendering.So, you can now server-render components that look like this:class MyArrayComponent extends React.Component { render() { return [ div key=”1″first element/div, div key=”2″second element/div ]; }}class MyStringComponent extends React.Component { render() { return “hey there”; }}class MyNumberComponent extends React.Component {…
  • To learn more about this feature, read Dan Abramov’s post on the React blog about the change.React 16 SSR Doesn’t Support Error Boundaries or PortalsThere are two new features in the React 16 client-side renderer that are unfortunately not supported in the server-side renderer: Error Boundaries and Portals.
  • If for any reason there’s a mismatch, React raises a warning in development mode and replaces the entire tree of server-generated markup with HTML that has been generated on the client.In React 16, though, the client-side renderer uses a different algorithm to check that the server-generated markup is correct.
  • And when the client-side renderer in React 16 detects a markup mismatch, it only attempts to change the HTML subtree that doesn’t match, rather than the entire HTML tree.Generally, this change shouldn’t have much effect for end users, except for one fact: React 16 doesn’t fix mismatched SSR-generated HTML attributes…
  • This performance optimization means that you will need to make extra sure that you fix any markup mismatch warnings you see in your app in development mode.React 16 Doesn’t Need To Be Compiled For Best PerformanceIn React 15, if you used SSR straight out of the box, performance was less…

There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering. Let’s take a…
Continue reading “What’s New With Server-Side Rendering in React 16 – Sasha Aickin – Medium”

Migrate from #ReactJS to @PreactJS with One Command $ npm install -g bye-react $ bye-react

  • Migrate your project from React to Preact with a single command.
  • More specifically, this tool switches the project over to preact-compat, the “compatibility layer that makes React-based modules work with Preact, without any code changes”.
  • When you first run backups are made of all config files modified by this tool.
  • Running these undo commands restores these files to their original state.
  • It also uninstalls preact and reinstalls react and react-dom.

bye-react – Command-line tool to migrate React to Preact
Continue reading “Migrate from #ReactJS to @PreactJS with One Command
$ npm install -g bye-react
$ bye-react”

You.i TV demonstrates the ability to take React Native to new platforms leveraging the power of You.i Engine

You.i TV goes all in with @reactnative

  • July 28th, 2017 — Ottawa, Ontario — You.i TV, a global leader in video experience platforms, today announced support for React Native as a development framework on top of You.i Engine.
  • With growing demand for a consistent development strategy to bridge mobile and 10-foot platforms, developers now have more flexibility in how they build You.i Engine video applications.
  • By extending the React Native platform support to include You.i Engine, the same developer experience can be applied across mobile, streaming pucks, gaming consoles and smart TVs.
  • At You.i TV our founding principles are to enable the seamless delivery of beautiful user experiences, consistently to every screen,

    You.i TV is a privately held company whose You.i Engine software platform enables TV and media companies worldwide to create fans, engage users, and convert customers.

  • You.i Engine allows brand owners to build personalized, profitable experiences quickly on all platforms – mobile devices, set-top boxes, game consoles, and streaming devices – from a single code base.

You.i TV, a global leader in video experience platforms, today announced support for React Native as a development framework on top of You.i Engine.
Continue reading “You.i TV demonstrates the ability to take React Native to new platforms leveraging the power of You.i Engine”

CI / CD Pipeline Patterns For JavaScript (Part 1) – Django Shelton – Medium

  • Stages may be small but critically should be logically distinct from each other (e.g. “Codestyle” and “Unit Test”, not just “Test”), as this enables easier troubleshooting and bug finding.For ease of reading and in order to “separate our concerns”, the actual details of the steps are generally stored inside separate scripts, rather than forcing all of our implementation details into a single file.The checkout scm step defines the type of Source Code Management tool you are using (in this case Git), the branch to checkout, as well as the actual URL to go to and the credentials required (if any).
  • The sh step will execute the given shell command, which in our case runs some shell scripts stored inside a directory called jenkins.The Prepare stage should be used to run any prerequisites for running your app, such as an npm install or bower install, and can also be used to run any necessary cleanup tasks such as npm prune.If you’re working in big teams, or if you like consistency, you can add a Codestyle stage in your pipeline to ensure standards are maintained automatically, and reject anything which doesn’t meet the standards.
  • Tools like JSHint and ESLint can do this for JavaScript, and can be coordinated to run using a task runner, then executed in your pipeline.Once your environment has been setup and any linting rules have passed, you can run your Unit Test stage.
  • Reports produced by your unit tests can be published, and in the case of Jenkins the junit plugin can publish XML reports for you.Running this pipeline against your code on every commit to your Develop branch (as well as your feature and bug fix branches, depending on your teams branching model) will ensure any code on those branches has a level of quality that you define in your unit test specification — where you can define metrics such as coverage levels to fail on.
  • Any failing unit tests should cause the pipeline to fail, which is critical when it comes to implementing the next steps, as you don’t want to deploy code with failing tests…Part 2 will cover how to extend this basic pipeline to deploy your app, and look at how the pipeline might be a bit different when working with Node.JS services rather than front end apps.

Continuous Integration (CI) and Continuous Deployment (CD) are practices used by developers all over the world to increase the quality of their software, and decrease the time to market for features…
Continue reading “CI / CD Pipeline Patterns For JavaScript (Part 1) – Django Shelton – Medium”

How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native

  • The depth openness of the deep learning community, and the presence of talented minds like R.C. is what makes deep learning viable for applications today — but they also make working in this field more thrilling than any tech trend we’ve been involved with.Our final architecture ended up making significant departures from the MobileNets architecture or from convention, in particular:We do not use Batch Normalization Activation between depthwise and pointwise convolutions, because the XCeption paper (which discussed depthwise convolutions in detail) seemed to indicate it would actually lead to less accuracy in architecture of this type (as helpfully pointed out by the author of the QuickNet paper on Reddit).
  • While this is a subject of some debate these days, our experiments placing BN after activation on small networks failed to converge as well.To optimize the network we used Cyclical Learning Rates and (fellow student) Brad Kenstler’s excellent Keras implementation.
  • This was hard to defend against as a) there just aren’t that many photographs of hotdogs in soft focus (we get hungry just thinking about it) and b) it could be damaging to spend too much of our network’s capacity training for soft focus, when realistically most images taken with a mobile phone will not have that feature.
  • Of the remaining 147k images, most were of food, with just 3k photos of non-food items, to help the network generalize a bit more and not get tricked into seeing a hotdog if presented with an image of a human in a red outfit.Our data augmentation rules were as follows:We applied rotations within Âą135 degrees — significantly more than average, because we coded the application to disregard phone orientation.Height and width shifts of 20%Shear range of 30%Zoom range of 10%Channel shifts of 20%Random horizontal flips to help the network generalizeThese numbers were derived intuitively, based on experiments and our understanding of the real-life usage of our app, as opposed to careful experimentation.The final key to our data pipeline was using Patrick Rodriguez’s multiprocess image data generator for Keras.
  • Phase 2 ran for 64 more epochs (4 CLR cycles with a step size of 8 epochs), with a learning rate between 0.0004 and 0.0045, on a triangular 2 policy.Phase 3 ran for 64 more epochs (4 CLR cycles with a step size of 8 epochs), with a learning rate between 0.000015 and 0.0002, on a triangular 2 policy.UPDATED: a previous version of this chart contained inaccurate learning rates.While learning rates were identified by running the linear experiment recommended by the CLR paper, they seem to intuitively make sense, in that the max for each phase is within a factor of 2 of the previous minimum, which is aligned with the industry standard recommendation of halving your learning rate if your accuracy plateaus during training.In the interest of time we performed some training runs on a Paperspace P5000 instance running Ubuntu.

How Silicon Valley build the real AI app that identifies hotdogs — and not hotdogs using mobile TensorFlow, Keras & React Native.
Continue reading “How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native”