Posts

Showing posts from March, 2018

Week 5 to 8 - Learning with MCR Codes

Image
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 5 (March 2018) - Just the end of last week, I have received feedback on my assignments with lots of pointers to becoming a better coder. One of the suggestion was to use an extension on my code editor ESLinter. In the first session, Joe helped me set this extension up and it is brilliant. Why haven't I installed this years ago? Lecture wise, we have moved on to lots of theory behind coding. This knowledge will make our employable stronger and a stronger knowledgeable programmer. Session 1 -  Object Oriented Programming &  SOLID Object Oriented Design Session 2 -  Test Doubles & jest.fn() Week 6 - Continued with last week Object-Oriented Programming exercise, finally understanding the benefits of creating a good code design. Also, I have got into a good habit
Read more

Week 8 - Session 2 - HTML Forms

Image
blog image source A web form, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product or can be used to retrieve search results from a search engine. Forms can be made up of standard graphical user interface elements: text - a simple text box that allows input of a single line of text email - a type of text that requires a partially validated email address number - a type of text that requires a number password - characters typed in are invisible or replaced by symbols such as * radio - a radio button file - a file select control for uploading a file reset - tells the browser to restore the values to their initial values submit - tells the browser to take action on the form (typically to send it to a server)
Read more

Week 8 - Session 1 - JavaScript in the Browser

Image
blog image source HTML document as a nested set of boxes. Tags such as <body> and </body> enclose other tags, which in turn contain other tags or text. There is an object, which we can interact with to find out things such as what HTML tag it represents and which boxes and text it contains. This representation is called the Document Object Model, or DOM for short. The global binding document gives us access to these objects. Its documentElement property refers to the object representing the <html> tag. Since every HTML document has a head and a body, it also has head and body properties, pointing at those elements. When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages: JavaScript can add, change, and remove all of the HTML elements and attributes in the page
Read more

An evening at Manchester Codes 

Image
 What to expect at Manchester Codes, UK's only full-stack, Part-Time Coding Bootcamp proudly based in the heart of Manchester city centre. Where students attend two evening classes on a Monday & Wednesday, as well as completing 14–20 hours of additional work remotely. Read more... Find out more -  https://mcr.codes/
Read more

Learn CSS Grid and Flexbox

Image
blog image source CSS grid/flexbox layout are a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Grid Layout gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts. Grid Layout lets us properly separate the order of elements in the source from their visual presentation. Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. Learn CSS grid and flexbox with Flexbox Froggy and Grid Garden. Flexbox Froggy -  http://flexboxfroggy.com/ Grid Garden -  http://cssgridgarden.com/
Read more

Week 7 - Session 2 - CSS (Cascading Style Sheets)

Image
blog image source CSS is a style sheet language that defines the presentation of a web page. It is used to add color, background images, and textures, and to arrange elements on the page. It is also used to enhance the usability of a website,  you'd write this CSS: p {   color : red; } The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. CSS styles the HTML elements of a web page Cascading Style Sheets are simple text files Style sheets are made up of Rules Rules are made up of selectors and declarations. Declarations are made up of properties and values. Learn CSS on Codecademy -  https://www.codecademy.com/learn/learn-css
Read more

Week 7 - Session 1 - HTML (HyperText Markup Language)

Image
HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (is it a paragraph? is it a bulleted list? is it part of a table?), structure a document into logical sections (does it have a header? three columns of content? a navigation menu?) and embed content such as images and videos into a page. Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets.  majority of tags must be opened <Tag> and closed </Tag> with the element information such as a title or text resting between the tags. tags must be closed in the order in which they were opened. blog image source <!DOCTYPE>: not an HTML tag; instruction to the web browser about the version of HTML. <html> </html>: defines the document as the web page, and identifies the beginning and end of the HTML document. All other tags must fall between the HTML tags. <head>
Read more

Week 6 - Session 2 - Group Programming Workshop - Quiz Challenge

Image
blog image source Group exercise - make our own JavaScript quiz challenge based on knowledge gain around  Object Oriented Programming in the last two weeks,  the quiz game will be created using user stories only.  Learning objectives from this exercise: Understanding of OOP (Object Oriented Programming)? Can you explain what Object-oriented Programming is? Can you effectively break down a user story into a domain model? Can you use dependency injection to get objects to talk to each other? Can you use mocks to emulate dependencies in tests? Can you use spies to override behaviour of other objects? GitHub Quiz Challenge exercise -  https://github.com/SharifCoding/quiz-challenge
Read more

Week 6 - Session 1 - Getting Unstuck

Image
blog image source The experience of encountering annoying and unexpected problems is a daily occurrence for software developers. Without the right mentality, a regular barrage of difficult and surprising problems can make learning how to code frustrating. Read the error message; e rror messages are used when user intervention is required, to indicate that the desired operation has failed, or to relay important warnings. Remember, an error message is a good thing since you find it during development and not on a live release by a user. Challenge your assumption; w hat do you think is going on? If you make too many assumptions, you are bound to build an application where the requirements are off, or the user experience is bad. Always take the time to review the requirements and make sure you fully understand them. Create and test the hypothesis; a  hypothesis is a prediction you create prior to running an experiment. It states clearly what is being changed, what you believe th
Read more

Better Code Quality with ESLint

Image
Linters go through your code and look for mistakes such as undefined variables or reassigned constants. They are more powerful though when combined with a style guide - a preset which dictates how code should be written (spacing, use of semicolons etc.). ESLint is a linter which uses the JavaScript standard style guide. Setting up ESLint with Visual Studio Code: open a Terminal and enter the following: npm install -g eslint open VS Code, click the Extensions icon in the search box, enter ESLint and click Install and then click Reload add an .eslintrc file to the project root with the following contents: { "extends": "airbnb-base" } in the terminal for JavaScript without React: (export PKG=eslint-config-airbnb-base;npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest") JavaScript with React: (export PKG=eslint-config-airbnb;npm info "$PKG@
Read more

Week 1 to 4 - Learning with MCR Codes

Image
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 1 - Meet up with Michael (Coach) and class. Everyone is very friendly and it feels like we all already know each other very well. Started off with setting up our laptop with typical software used by mainstream developers. Got comfortable using GIT and CLI. Session 1 - Getting Set Up Session 2 - Command Line Interface Week 2   - Weekly standup and retrospective have been carried out just like in the working environment. Started learning the fundamentals of JavaScript, and using npm and Jest. Additionally worked in pairs on practical tasks which also included committing work simultaneously to GitHub. This  week assignment was on basic fundamentals of JavaScript which consists of numbers, strings, booleans, arrays, and objects. Session 1 - JavaScript Fundamentals Session 2
Read more

Week 5 - Session 2 - Test Doubles & jest.fn()

Image
blog image source A unit test should test one piece of functionality only, where the code will almost always interact with other objects and functions, we need to isolate our System Under Test (SUT) from external code. Isolation is important because; don’t want to indirectly test dependencies, broken dependencies could lead to false negatives in tests, dependencies may have side-effects, and helps us write SOLID code. This is where test double comes in. A test double is an object that can stand in for a real object in a test (think stunt doubles), or where you replace a production object for testing purposes. Common types of Test Doubles: Stubs: mock with some pre-programmed behaviour, object with given properties, function with given return value. Mocks: passed into a function and used to make an assertion in the test. Spies: record interactions with other objects, test if a function has been called (how many times and with what parameters), useful for testing functions wi
Read more

Week 5 - Session 1 - SOLID Object Oriented Design

Image
In object-oriented computer programming, the term SOLID is an acronym for five design principles intended to make software designs more understandable, flexible and maintainable. S ingle responsibility principle  O pen/closed principle  L iskov substitution principle  I nterface segregation principle  D ependency inversion principle The first five principles of Object Oriented Design with JavaScript -  https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa SOLID cheatsheet -  https://www.monterail.com/hubfs/PDF%20content/SOLID_cheatsheet.pdf
Read more

Week 5 - Session 1 - Object Oriented Programming

Image
blog image source OOP (Object Oriented Programming), can be defined as a programming technique based on objects, instead of just functions and procedures. Object Oriented Programming binds data and instructions for processing the data together into an object that can be used within a program or in other programs. Examples of  Object Oriented  languages include Java, Ruby, Python, PHP. JavaScript is a multi-paradigm language, most  Object Oriented  languages are class-based where  JavaScript  is prototype-based.  Advantages of OOP can be from various aspects: Code Reuse: Object Oriented Programming enables the reuse of code from one program into another program through objects. Data Integrity: Through encapsulation, it becomes easier to achieve data integrity and consistency by validating data and restricting the user from directly accessing the data/data members. Simple-Complex Design: Object Oriented Programming allows a designer to model large complex systems into simple a
Read more