Late Night Tech

In this blog, I want to talk a little bit about testing different fully connected neural networks to see how each performs on this dataset: https://www.kaggle.com/c/digit-recognizer this is a very famous and one of the first classical data sets in the computer vision field. we have images like this: and we want to be able to identify each image with least amount of errors.  we have 42,000 labeled images for training we have 28,000 non-labeled for kaggle evaluation. In this blog I'll use few deep neural networks using Keras to build different models and evaluate them. each model will be different in either number of layers, nodes per layer to get a sense of what increases the accuracy of a neural network in this kind of problems and whether more layer & units and larger models mean better performance. I'll assume you are familiar with python, basics of neural network. as for Keras basics if you are not familiar with it, I recommend googling things along t

In the previous part we finished the dashboard read functionality, now we want to add the skeleton for other pages: - Login   In this page the user will be able to login to their account and the dashboard won't show unless the user is logged in. - Profile In this page the user will be able to update their daily nutrition goals that they can track in the dashboard. to be able to have multiple 'pages' in react and navigate from one to one, we need something that can switch the rendered content based on what we want, we can do that with if statements in the App components and store some location state, but why invent the wheel. React Router every major single page app web framework has the routing concept and functionality to interact with the usual browser urls and switch the content based what user should see. for example on the profile page I want the url path to be /profile, and for login to be /login and so on. in more advanced cases you want the users

In the previous part we added the first call to the async api to do search, now we will build on that to call more apis, and to add more components on the page to finish up the Display flows (i.e. what doesn't require writes / forms) : search this allows the user to find a specific food and choose to add an entry for it to their day to record that they consumed a specific portion of that food. show entries This feature is to allow users to see what they recorded as a list of entries, each entry represents a food the user added on a specific date. show progress bars The user will be able to set goals like how many calories, proteins, fats they want to consume daily and these bars will calculate from the entries they added how close they are to their daily goals reload entries & progress metrics when date change  This is to provide the ability for the users to go back in history and see their entries. all this is in general similar to the steps I did before:

Using Windows 10 built in bash to ssh to ec2 instance detailed steps to install bash on windows here: https://www.thewindowsclub.com/run-bash-on-windows-10 Summary: 0- enable windows subsytem for linux 1- open cmd 2- type bash 3- accept and create a unix user account 4- wait to finish 6- you may need to reboot reopen cmd and type bash, you should see your cmd prompt changed. 5- to ssh to ec2 you need .pem key file that you download when you create the instance 6- copy that file under /home or something else but not under /mnt/* (windows files) because the next step will not work, the file has to be in a linux directory (bash in windows can't change windows files permissions) 7- we have to run this command : $ chmod 400 pem_file.pem because otherwise you will get an error that this key permissions are too open (not secure enough). 8- the command is ssh -i "pem_file.pem" ec2-user@123.456.897  (replace the pem file name and ip with your values). now yo

I stumbled upon this neat online IDE , where you can : - instantly start, share and run code - use npm dependencies and install what you need quickly - you can drag drop files from your computer I'm yet to explore it but seems very promising it also has a neat feature to embed itself in blogs like this one so that's awesome because now I can show live examples of running code and share them with my readers ! all I had to do is include an iframe with url to my test project on their website this is an example of a react project   :) Kudos to the people who create this cool stuff and share with us !

In this blog I'll try to use an NLP (Natural language processing) library to get to: - know some basic concepts and - try to search a data set of books metadata (author, title, summary) to respond to user query Setup  you need: - Anaconda (python environment management tool), get it here Anaconda works by creating an isolated installation of python with the packages needed and it won't affect other environments so you can run different versions of python and other python libraries without conflicts - code: https://github.com/blabadi/gensim-books - setup the environment (in shell window or in anaconda prompt) run: conda create gensim_env python=3.5 gensim nltk jupyter this will install the packages needed - navigate to the code directory, run: jupyter notebook this will open the server web page and you can select the notebook that we need now : gensimWord2Vec Code https://github.com/blabadi/gensim-books/blob/master/gensimTFIDF.ipynb

Previous Part (adding redux): http://dev.basharallabadi.com/2018/09/part-2-nutracker-reactjs-application.html By default the store only understands object dispatched actions, i.e. it won't support async calls out of the box neither functions, which conflicts with our need to call an api asynchronously and get the results and returns those results to our reducers to update the state. Redux Thunk The simplest approach to achieve what we need is to use something called middleware in redux that can pre process our actions and then proceed to the store when it's done. Redux thunk is a middleware library that knows how to handle a function received as a dispatched action from a component then based on the result it can dispatch more actions to the store to notify our reducers with the results. mainly we use it to process async calls and based on the result (success/fail) we ask it to dispatch the proper actions when. First lets update our foodRepo to actually call an a

In the first part we covered how to create components and how to interact with a mock api to get data for our application. all of that can be enough to build a react app but it won't scale well for the following reasons: 1- state will be all over the place  in different container components which means we have to add more layers of components to share common parts of states. 2- the propagation of events can be hard to deal with when the components tree gets deeper and other components (siblings and their children) will probably need to be notified of state changes. Redux data flow so there is a library called redux , and redux-react. this library in simple terms facilitates dispatching application wide events to specific handlers (reducers) that modify the state based on the actions they receive, it then store the whole state after those handlers change it and pass the new state to react framework to rerender our components. In short: it's an event publ

Part 1: from scratch Read the introduction in this part I'll be explaining the first commit, source code for that can be found here: https://github.com/blabadi/react-nutracker/tree/f3b998b6e4ba9d2cdeed15ce637066fac0647c1f Creating the project: run this command (this is using nodeJS binary) : npx create-react-app react-nutracker this will initialize the directories and we are ready to start adding our code. this is a command line tool created by react team to make initializing as easy as possible because it can be overwhelming for people to configure everything, let's focus on react for now and not the details that can be done later. see: https://github.com/facebook/create-react-app you can also start the application and it will work: npm start Install bootstrap npm install --save bootstrap import bootstrap in the index.js file. import 'bootstrap/dist/css/bootstrap.min.css'; The First NUtracker Component: Search box 1-  I added the follo

I worked before on learning angular 2+, and made a sample functioning app that tracks calories &  macros, called it NUtracker. For live running version (angular) : here . (buggy as it's just prototype, after registration set your profile goals first otherwise it will look broken). Main functionalities: - search for foods from a db - add new food to the db - add them as daily entries - calculate the total daily intake of calories, carbs, fats & protein with respect to the daily goals - users can set the goals in their profile screen. - login/registration screen. - move back and to see other days entries. - edit/remove entries Why? in this series of blogs I'll try to replicate this angular project in react, for two reasons: 1- get a sense of both framework and compare them to each other apple to apple. 2- apply what I learn about react & it's eco-system in a project and solve the problems I face. The main goal of this blo