Zaha: a visual note taking app – Tamrat – Medium

Zaha: a visual note taking app  #javascript #react #zaha #recursecenter #reactjs

  • Zaha: a visual note taking appDemo: is a simple visual note taker / mood board made with React.You create your visual notes by adding a mix of text or image notes on to the board.
  • You can drag around each text/image note around the board or edit it’s color highlight for more organizing within the board.This project is mostly based on how I come up with ideas for projects or crystalize concepts in my head.
  • I usually collect inspiration images and texts (mostly quotes) to get me started with an idea.
  • My sketchbook is full of bits and pieces of ideas in the form of nuggets of texts and images.This is v1 and you can’t save your notes yet!
  • ( coming soon 🙂 )This project is made at the Recurse Center , where I am currently learning programming.I called the project Zaha — after one of my favorite architect!

“Zaha: a visual note taking app” is published by Tamrat
Continue reading “Zaha: a visual note taking app – Tamrat – Medium”

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

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

  • 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.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.We were able to perform some runs on a Paperspace P5000 instance in the interest of time.
  • In those cases, we were able to double the batch size, and found that optimal learning rates for each phase were roughly double as well.Running Neural Networks on Mobile PhonesEven having designed a relatively compact neural architecture, and having trained it to handle situations it may find in a mobile context, we had a lot of work left

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”

Power of #TypeScript for #React part 3 is ready 🚀 Today looking at Actions #JavaScript…

  • Actions are a really helpful way to create separation between the different layers of an application, because they are not tightly coupled each layer can be built and tested in pieces.
  • It does bring it’s challenges however, whilst the code is loosely coupled, all areas of the code which interact with the action need to have the same expectation of it’s structure.
  • At Seccl all our actions follow the same basic structure and TypeScript allows us to define what that is by using an .
  • So now that we know the flavours, let’s look at an example of our action interface in the wild.
  • What we will create is an interface which describes the called and an action creator which builds the action.

Frontend leadership, Frontend architecture, HTML(5), JavaScript (OOJS, ES6, TypeScript), CSS (BEM, Less, SASS, Stylus), Testable Code (Mocha, Sinon, Chai, Karma), NodeJs (Express, Mongoose) , Cloud Applications (Heroku, S3, Azure)
Continue reading “Power of #TypeScript for #React part 3 is ready 🚀 Today looking at Actions #JavaScript…”

Reactjs vs Vuejs – What to Choose? #Vuejs #Reactjs #js

Reactjs vs Vuejs - What to Choose?
#Vuejs #Reactjs #js

  • Pros and cons of vue js
    Vue.js – is a JavaScript-framework that uses the MVVM pattern for creating user interfaces based on data models through reactive binding data.
  • A developer might not know how to use it but he should have heard about Vue js, because the framework became popular in past few years the number of use the words “Vue js” and “Vue.js” in Google trend in 2016 was more than in four times higher comparing to 2015.
  • Advantages of vue js:

    Having borrowed from older frameworks, such as Angular and React only the best, Vue.js stands the perfect balance between readability, maintainability of code and the pleasure of it, this code, writing.

  • From React Vue.js took a component approach, props, one-way data flow for the component hierarchy, performance, the ability to render on the backend and understanding the importance of proper state management.
  • This makes it easy to add the Vue library to the project, like jQuery.All this is possible in the React library, but generally the code written on React relies more on JSX and on the features of ES.

Both React.js and Vue.js have benefits and disadvantages, that may confuse a potential client at first. We’re going to make their comparison in this article.

Continue reading “Reactjs vs Vuejs – What to Choose?
#Vuejs #Reactjs #js”

React Behavioral Wrapper Components – Ian Carlson – Medium

React Behavioral Wrapper Components  #ui #react #javascript #reactjs

  • But because of how flexible React is you can create wrapper components that add behavior to the children being passed through.
  • This is more applicable when using Redux since not all the backend requests are made within the same component, like a session container for example.Here’s a example of creating an opacity animation component that adds the animation to any child component.
  • This is based on the example in the React documentation using the CSS transition group extension to apply fade-in, fade-out animations based on the lifecycle of the child component(s).
  • The former is actual animation time and the latter is how long temporary classes will stay in existence.Here’s an example of how to use the OpacityAnimation:You can also pass an array of children as well, but it’s important to carefully manage the key properties on each child — even for just one child.
  • For example, a tooltip component would display the children as is, but then attach event handlers to display the tooltip on the right conditions.

Another great thing about React is how easy it is to add behavior to components through composition. Typically new people only think of composition in terms of layout. But because of how flexible…
Continue reading “React Behavioral Wrapper Components – Ian Carlson – Medium”

Congratulations on 🌟50,000🌟 stars, @reactnative! Here’s to the next 50,000 🥂

  • Another great way to learn more about the components and APIs included with React Native is to read their source.
  • The React Native documentation only discusses the components, APIs and topics specific to React Native (React on iOS and Android).
  • For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.
  • If you encounter a bug with React Native we would like to hear about it.
  • For help and questions with using React Native please make use of the resources listed in the Getting Help section.

react-native – A framework for building native apps with React.
Continue reading “Congratulations on 🌟50,000🌟 stars, @reactnative! Here’s to the next 50,000 🥂”