Learning to code with JavaScript and building UI with React

My experience with  @MCRcodes   as a Quality Assurance Tester.  This is an evening part-time coding boot camp based in central Manchester which runs for 24 weeks, from February 2018 to July 2018. Week 22 (July 2018) - Halfway through our project and still a long way to go . Still working out how the project's core function will work. With support from lecturers, we were able to visualise how the function will work with some awesome whiteboard drawing and realised the best way to approach this is to divide the core function and figure out each section one at a time. Session 1 -  Class Project (Week 3) - Material-UI Session 2 -  Class Project (Week 3) - Monzo Reward Web App Week 23 - Made it, the final week of our project and we have covered our MVP which was set at the beginning of the project week. The presentation went very well, met up with the project team prior to the presentation and did preparation. I never was c...

My experience with  @MCRcodes   as a Quality Assurance Tester.  This is an evening part-time coding boot camp based in central Manchester which runs for 24 weeks, from February 2018 to July 2018. Week 18 (June 2018) -  Two more weeks of curriculum left to go through, this week we have just finished off  authorisation , and I am really looking forward to starting a group project from week 20, still haven't got any specific ideas but would love to work with React Native. Actually this weekend I went slightly off topic and looked into React Native and got the iOS simulator working via Xcode. My weekend work can be found here,  GitHub . Session 1 -  User Authentication - OAuth 2.0  Session 2 -  Group Programming Workshop - User Authentication GitHub OAuth Week 19 -  Now we have covered all the curriculum for this course, time to use everything we have learned in the class project. Each team consists of 3/4 members and I...

blog image source You may come across some  tech tests when applying for roles, where many employers give around a week to come up with a solution. It is likely that you will need to revisit concepts, but also that you will need to utilise Google and StackOverflow to find additional answers where necessary. The employer will assess you on the completeness of your solution and the quality of the code that you produce. They are trying to find out if you can write high-quality code, which is well-tested and has a good README. Real-world example  -  https://jsainsburyplc.github.io/front-end-test/ Brief In this exercise, you will develop a web application that integrates with the NASA Image and Video Library API. It should allow users to search for assets and then select and view an asset. Assessment We will assess the task based on the following criteria: How clean, modular and extensible the code is. Suitability of tools, libraries, and frameworks used ...

blog image source You can start applying for positions as a junior web developer with a working knowledge of the programming languages HTML, CSS, and JavaScript. There’s also plenty you can do to prepare for the interview and application process itself. For example: Build a Portfolio Site Full of Relevant Work:  Your portfolio is the first thing potential employers will look at when considering you for a junior web developer position, so your site needs to be a real reflection of your skills and personal brand. But, before you can load up your portfolio, you need to code it, launch it, and make sure it stands out from other websites. Put Your Code on Github:  Github is the industry-standard for version control, and many companies want to know that you have hands-on experience before extending an offer. You can prove that and show off your best code by creating your own Github account and using it as a repository for your projects. Contribute to an Open Source Project:...

Following on from the previous week; -  Class Project (Week 1) - Monzo Reward Web App -  Class Project (Week 2) - Monzo Reward Web App -  Class Project (Week 3) - Monzo Reward Web App Using Monzo API, we have built a web app using React called Inde$pendent. Inde$ pendent is a digital reward card that doesn’t require you to use apple or google pay at the checkout or scan some other type of card at the checkout. You don’t need to download a new app or change your preferred payment method at all. And through the utilization of Open Banking, all your transactions can be collated and count towards your reward goal. Weekly progress on GitHub -  https://github.com/SharifCoding/digi-reward-monzo

Prezi.com is a zooming presentation tool which offers an alternative to PowerPoint. Prezi is a presentation software company founded in 2009, the word Prezi is the short form of "presentation" in Hungarian. You begin with a blank canvas, and then position objects such as text, images, embedded videos or graphics, anywhere you like on the canvas. You then plot a path between them in the order you specify, so Prezi zooms in on each object in turn, allowing you to deliver the presentation to the audience. Prezi.com - https://prezi.com/

blog image source Following on from the previous week; -  Class Project (Week 1) - Monzo Reward Web App -  Class Project (Week 2) - Monzo Reward Web App Using rc-progress component, created mockup of reward progression and displaying Monzo username forwarded from the Monzo API.   Two elements are required to make up a progress bar, these elements are: A parent div that holds another div inside of it. A div that acts as the filler inside of the parent div. This div will be styled with color and will fill up an x percentage of the container horizontally and vertically. rc-progress - http://react-component.github.io/progress/ rc-progress examples -  https://react-component.github.io/progress/examples/simple.html Weekly progress on GitHub -  https://github.com/SharifCoding/digi-reward-monzo

blog image source Material-UI is an open-source project that features React components that implement Google’s Material Design. Very popular for web and mobile applications, inspired by the physical world and its textures, including how they reflect light and cast shadows. With the components from the Material-UI library, it’s very easy to make use of Material Design elements in your React web or mobile application. Features include: It allowed us to remove the dependency on the LESS toolchain for our users. We removed one important friction in the installation process. (simpler) We were able to change the theme at runtime, nest different themes, and have dynamic styles. (more powerful) We reduced the loading time by breaking the big monolithic CSS file in order to enable code splitting. (faster) The style override story became more intuitive, as we were free of CSS specificity issues. (simpler) Material-UI - https://material-ui.com/ Material-UI v1 is out - https://medium.c...

blog image source Following on from the previous week; - Class Project (Week 1) - Monzo Reward Web App Using BCrypt and JWT encryptions, creating an option to sign-in with Monza via OAuth. Contain two repositories; an API  repository which consists of  Express for routing, Mongoose for managing the database, and  BCrypt/JWT for encryptions .  The second APP  repository (frontend) contain the  React for building the user interface, React Router which consist of a  collection of navigational components, and Axios to communicate with the API  repository. Monzo Authentication -  https://docs.monzo.com/#authentication auth0 -  https://auth0.com/ Weekly progress on GitHub -  https://github.com/SharifCoding/digi-reward-monzo

blog image source Mongo Aggregations Pipeline; to perform aggregations operations, MongoDB group values from multiple documents together and then perform a variety of operations on grouped data to return a single result. MongoDB has three ways to perform aggregation: the aggregation pipeline, the map-reduce function, and the single purpose aggregation methods, we will focus on aggregation pipeline. The MongoDB aggregation pipeline consists of stages. Each stage transforms the documents as they pass through the pipeline: `$project` – select, reshape data `$match` – filter data `$group` – aggregate data `$sort` – sorts data `$skip` – skips data `$limit` – limit data `$unwind` – normalizes data Aggregation Pipeline - https://docs.mongodb.com/manual/core/aggregation-pipeline/ Aggregations in MongoDB by Example - https://www.compose.com/articles/aggregations-in-mongodb-by-example/

blog image source Using Monzo API, build a web app using React called Inde$pendent. Inde$pendent will be a digital reward card that doesn’t require you to use apple or google pay at the checkout or scan some other type of card at the checkout. You don’t need to download a new app or change your preferred payment method at all. And through the utilization of Open Banking, all your transactions can be collated and count towards your reward goal. What is Open Banking Open Banking is an initiative designed to improve and enhance everyone’s banking experience. The core idea of Open Banking is that you can provide banks and other online providers with secure access to your account(s) so that you can manage your current accounts in a way that is better suited to your needs. If customers have multiple current accounts they will be able to see those accounts all in one place. Why Monzo Monzo is a digital bank built and run by a team of around 40 developers. We decided to use their API over ...

blog image source Branches are most powerful when you're working on a team. You can work on your own part of a project from your own branch, pull updates, and then merge all your work into the main branch when it's ready. Working with branches: git branch - to see what branches you have, and to check which one you’re currently on. git branch <branch_name> - to create a new branch off of the current branch. git branch -d <branch_name> - to delete a branch. git checkout <branch_name> - to change onto a branch. Merging is Git's way of putting a forked history back together again. The git merge command lets you take the independent lines of development created by git branch and integrate them into a single branch. Git Branch - https://www.atlassian.com/git/tutorials/using-branches Git Branching - https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging git - the simple guide - http://rogerdudler.github.io/git-guide/

blog image source Trello ; a web-based Kanban project management application. A Trello board has four key components: Boards - a board represents a project or a place to keep track of information. Whether you are launching a new website or planning a vacation, a Trello board is the place to organize your tasks and collaborate with your colleagues, family, or friends. Lists - lists keep cards organized in their various stages of progress. They can be used to create a workflow where cards are moved across lists from start to finish, or simply act as a place to keep track of ideas and information. Cards - the fundamental unit of a board is a card. Cards are used to represent tasks and ideas. A card can be something that needs to get done, like a blog post to be written or something that needs to be remembered, like company vacation policies. Menu - the menu is where you manage members, control settings, filter cards, and enable Power-Ups. You can also see all of the activity tha...

blog image source Heroku is a cloud platform as a service (PaaS) for Ruby, Node.js, Python, Go, PHP, and JVM-based applications, where developers manage their applications without the need for servers or administration. It features Git-based, GitHub, and API deployment strategies. Applications on Heroku are managed with Git. Simply pushing your codebase to Heroku is all it takes to deploy your application. Applications that are run on Heroku typically have a unique domain (typically ` applicationname.herokuapp.com `) used to route HTTP requests to the correct dyno. Each of the application containers, or dynos, are spread across a "dyno grid" which consists of several servers. One of the reasons Heroku is easy for people to use is that it relies on a widely used Git revision control system. In fact, you can’t deploy an app on Heroku unless you are using Git. The ` push ` command, ` Heroku push master `, is what you input on the command line to send the app from your reposi...

blog image source Group exercise - Users Sign up and Login; using BCrypt and JWT encryptions, with the option to sign-in with GitHub via OAuth. Learning objectives: Can you apply BCrypt/JWT encryption to password? Can you get validation encryption is working via Chrome dev console? Can you gather User data with password setup through MongoDB? Can you apply OAuth setup to the Signup process? Validate signup using GitHub OAuth developer application. After completing this exercise should be comfortable with the following concepts: Interacting with an API React Routing BCrypt/JWT encryptions OAuth token process OAuth setup with GitHub GitHub User Authentication OAuth 2.0 exercise -  https://github.com/SharifCoding/authentication-oauth

blog image source OAuth 2 is an authorization framework that enables applications to obtain limited access to user accounts on an HTTP service, such as Facebook, GitHub, and Google. It works by delegating user authentication to the service that hosts the user account and authorizing third-party applications to access the user account. OAuth 2 provides authorization flows for web and desktop applications, and mobile devices. OAuth2 defines 4 roles : Resource Owner: generally yourself. Resource Server: server hosting protected data (for example Google hosting your profile and personal information). Client: application requesting access to a resource server (it can be your PHP website, a Javascript application or a mobile application). Authorization Server: server issuing access token to the client. This token will be used for the client to request the resource server. There are 4 separate modes of AuthO, which are called grant types. Each mode serves a different purpose an...

My experience with  @MCRcodes   as a Quality Assurance Tester.  This is an evening part-time coding boot camp based in central Manchester which runs for 24 weeks, from February 2018 to July 2018. Week 13 (May 2018) -  A new month, and a very heavy new topic ReactJS. The plan is to focus on this technology for the next couple of months, especially since it is a highly demanding skill. I've learned a lot more about the  npm   package.json  file with better understanding, and all dependencies used by a typical React setup. Previously only had exposure to a small number of dependencies ( jest  &  eslint) , now learning about  react ,  babel ,  webpack , and more. Session 1 -  Intro to React Session 2 -  React (Class, Stateful Components, Event Handlers) Week 14 -  Single Page Applications (SPA's) is amazing!  I always thought front-end development means primarily knowing ...

blog image source JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with HMAC algorithm) or a public/private key pair using RSA. JSON Web Token (JWT) Process: Encrypted string issued by the web server Stored by the client, typically in local storage Web server signs token using a SECRET KEY When the token is sent back to the server, can verify it using the secret key If the token is tampered with, verification will fail A JWT consist of three parts: Header ; consists of two parts: the type of the token, which is JWT, and the hashing algorithm. Payload ; which contains the claims which are an entity (typically, the user) and additional metadata. Signature ; takes the encoded header, the encoded payload, a secret, the algorithm specified in the h...

Almost any application will eventually need to store a collection of passwords or another type of data that has to be stored using a hashing algorithm. Blogs, forums, issue trackers, they all need to store user data and these passwords. Hashing is the greatest way for protecting passwords and considered to be pretty safe for ensuring the integrity of data or password. There are some weaknesses in a cryptographic hash algorithm that allows an attacker to calculate the original value of a hashed password: Brute Force attack: Hashes can’t be reversed, so instead of reversing the hash of the password, an attacker can simply keep trying different inputs until he does not find the right now that generates the same hash value. Using a modern computer one can crack a 16 Character Strong password in less than an hour, thanks to GPU. Hash Collision attack: Hash functions have infinite input length and a predefined output length, so there is inevitably going to be the possibility of two diff...

blog image source Following on from the previous sessions; - Intro to React - React (Class, Stateful Components, Event Handlers) - React (Bind Methods, Render Lifecycle) - React (Fetching data from an external API) - React (Forms) React Routers: React Router is the standard routing library for React. When you need to navigate through a React application with multiple views, you’ll need a router to manage the URLs. React Router does that, keeping your application UI and the URL in sync. Here’s an example of how our routes will look: ```js <Router>   <Route exact path="/" component={Home}/>   <Route path="/category" component={Category}/>   <Route path="/login" component={Login}/>   <Route path="/products" component={Products}/> </Router> ``` You need a router component and several route components to set up a basic route as exemplified above. There are two types of routers from the React Router API: ...