What is the difference between express and http server?

Hey guys!

So I received a book list, forwarded to me by Gilton Bosco on Whatsapp. I wanted to ensure that everyone has it, because it's a great collection to have for reference. To name the books that are relevant to our workshop, you will find a book on Git, CSS , HTML5, JavaScript, Node,js and React.js.

I hope you will all dig into this delicious collection from goalkicker.com on your free time.

FYI: They are free to download.

Enjoy!

BOOK LIST
1- .NET FRAMEWORK-

https://books.goalkicker.com/DotNETFrameworkBook/

2- Algorithms-

https://books.goalkicker.com/AlgorithmsBook/

3- Android-

https://books.goalkicker.com/AndroidBook/

4- Angular 2

https://books.goalkicker.com/Angular2Book/

5- Angular JS

https://books.goalkicker.com/AngularJSBook/

6- BASH

https://books.goalkicker.com/BashBook/

7- C

https://books.goalkicker.com/CBook/

8- C++

https://books.goalkicker.com/CPlusPlusBook/

9- C#

https://books.goalkicker.com/CSharpBook/

10- CSS

https://books.goalkicker.com/CSSBook/

11- Entity Framework-

https://books.goalkicker.com/EntityFrameworkBook/

12- Excel VBA

https://books.goalkicker.com/ExcelVBABook/

13- GIT

https://books.goalkicker.com/GitBook/

14- Haskell

https://books.goalkicker.com/HaskellBook/

15- Hibernate

https://books.goalkicker.com/HibernateBook/

16- HTML 5

https://books.goalkicker.com/HTML5Book/

17- HTML5 CANVAS

https://books.goalkicker.com/HTML5CanvasBook/

18- iOS

https://books.goalkicker.com/iOSBook/

19- JAVA

https://books.goalkicker.com/JavaBook/

20- JAVA SCRIPT

https://books.goalkicker.com/JavaScriptBook/

21- jQuery

https://books.goalkicker.com/jQueryBook/

22- KOTLIN

https://books.goalkicker.com/KotlinBook/

23- LaTex

https://books.goalkicker.com/LaTeXBook/

24- Linux

https://books.goalkicker.com/LinuxBook/

25- MATLAB

https://books.goalkicker.com/MATLABBook/

26- Microsoft SQL Server

https://books.goalkicker.com/MicrosoftSQLServerBook/

27- MongoDB

https://books.goalkicker.com/MongoDBBook/

28- MySQL

https://books.goalkicker.com/MySQLBook/

29- NodeJS

https://books.goalkicker.com/NodeJSBook/

30- Objective-C

https://books.goalkicker.com/ObjectiveCBook/

31- Oracle DB

https://books.goalkicker.com/OracleDatabaseBook/

32- Perl

https://books.goalkicker.com/PerlBook/

33- PHP

https://books.goalkicker.com/PHPBook/

34- PostgreSQL

https://books.goalkicker.com/PostgreSQLBook/

35- PowerShell

https://books.goalkicker.com/PowerShellBook/

36- Python

https://books.goalkicker.com/PythonBook/

37- R

https://books.goalkicker.com/RBook/

38- React JS

https://books.goalkicker.com/ReactJSBook/

39- React Native

https://books.goalkicker.com/ReactNativeBook/

40- Ruby

https://books.goalkicker.com/RubyBook/

41- Ruby on Rails

https://books.goalkicker.com/RubyOnRailsBook/

42- Spring Framework

https://books.goalkicker.com/SpringFrameworkBook/

43- SQL

https://books.goalkicker.com/SQLBook/

44- Swift

https://books.goalkicker.com/SwiftBook/

45- Type Script

https://books.goalkicker.com/TypeScriptBook2/

46- VBA

https://books.goalkicker.com/VBABook/

Hash links are the links that show the respective section or division tags of a single one webpage when those respective links are clicked. Hash links are done as follows:
<a href="#home">Link</a>, when this link "Link" is clicked then the section or division having id called "home" is shown at that same time.

Im having problems with setting up Travis CI.

• What is the best way to approach this?
• How should I construct the travis.yml file?
• Where should the travis.yml file be put?

Can someone please assist?

I was trying to call this.state.name on the function handleChange then try to call the function on Button OnClick event

state = {
     name: "Leo"
}
handleChange(){
      this.state.name;
}
render(){
    return(
        <button onClick={handleChange}> Click Me</button>
    );
}

Hello people,

I just come across this post which explains why we should not use pointless div just to close the elements in one tag. Chere it here https://www.barrymichaeldoyle.com/fragment/

Let's all be professional developers.

Cheers

CSS

The word CSS stands for Cascading Style Sheets.

• It's not a programming language.

• it's a style sheet/styling language

• It's used for website layout and design used alongside HTML, and other mark up language like XHTML.
  .

• Doesn't have any logic strictly presentational but technology such as SASS/LESS allows you to use things like variables and conditionals.

3 Methods can be used when adding CSS.

1. Inline CSS.
   This is done by adding directly into the THML elements. eg:
   <h1 style="color: red">Heading<h1>
   its strictly not advised and it looks very unprofressional.

2. _ Internal CSS_
   This done by adding style tags within a single document.
   eg;
   <style type="text/css"> h1 {color:red} </style>

3. External CSS
This is done by linking separate CSS file to an HTML file.
that is to say;

in an HTML doc it will look like this;
<link rel= "style sheet" type="text/css" href="css/style.css">
the css in the href represents the actual folder the _style.css _ is in.
if it was in the same folder it would be only href ="style.css" .

• CSS Selectors
  a { background color: yellow; }
  so
  a - is a selector
  { - is a declaration start
  back ground color - is aproperty
  : - is property/value separator
  yellow - is the value
  ; - is the declaration seperator.
  } - is the decclaration end.

Colors in CSS
colors can be represented in different types that are _

• names eg, red

• hexadecimal values eg #000000 that is black

• or RGB _
  Fonts in CSS
  so there are web safe fonts and other fonts

• websafe fonts
  these are fonts that are already there by default eg Arial, or Sans-serif
  but
  **Other fonts **
  these fonts can be imported from different sources eg google fonts, these fonts are special. eg
  Dosis or Misty rose.
  font-weight: is lightness or boldness of a font.

Difference between class and id in CSS

• id can be used the same as a class but the difference is that id is used to specify a unique element. ids do not repeat.

• Class can be used multiple times

• Margin in CSS

margin is the distance or space outside the border, top, bottom, right, left.

• Padding in CSS

the space between the element and its border. from the top, bottom, right, left.

• Border radius:
  gives radius around the edges of a box or container.

• Positionig in CSS

• static
  Element positioned in a default position. Keeps element in the order of document flow.

• Relative_
  Element is positioned relative to its normal position. Falls naturally.

• Absolute
  allow us to target whatever position we want inside a relative element.

• Fixed
  It will always leave the element on the same position on the browser, no matter how you navigate.

• Initial.
  Sets the property to its default value.

• Inherit
  Will inherit whatever property to its parent value.

Thats it to the short summary on CSS

Why are we using create-react-app instead of npm install react --save, if React itself is a node module?

Overview

You are expected to power your HTML, CSS and JavaScript with React. This challenge, strictly requires that you implement the front-end ui views and elements from the previous challenge.

Timelines

• Expected Length to Complete: 1 week
• Due Date: 18th May 2019

Important Note

1. Ensure that challenge 1 is complete and merged to develop branch before you get started.

2. You are required to make use of data structures to create fake implementation of the user interface.

Guidelines

You will be assessed based on the items below:

1. On GitHub Project create stories to build out your front-end with React.

2. On GitHub Project create stories to capture any other tasks not captured above. The tasks can be a feature, a bug or a chore.

3. Setup a linting library and ensure that the code-style is configured appropriately.

4. Implement your front-end

5. Deploy your front-end to Heroku or GitHub-Pages.

ALCwithforLoop - FAQs & Help

I know about the DOM i.e. Document Object Model.

Really, the DOM helps to represent all elements in a web page, in a tree manner. This way, we can easily visualize how to access them programmatically.

Now, I hear React uses the Virtual DOM. Why is it Virtual? Why do we need it?

I am confused. 😢

In our ALCwithForLoop - Challenge 3, one of the tools that we were required to use in the challenge was a Linting library called ES6 with an Airbnb style guide. Being a less experienced programmer, it didn’t make much sense why I should use such a tool that I hardly knew anything about and why was it really necessary using it when developing my project.

As curious as I am, I had to dive deep into google search to find out why was ES6 Linting library recommended and a few seconds later, I was very impressed with the search results, realizing its importance and why it was a necessity in my development environment.

What is Linting?
Linting is the process of running a program that will analyze code for potential programmatic as well as stylistic errors before compilation has been done.
A program that supports linting is called a Lint or Linter. These programs are available for most languages like Javascript, HTML, PHP, Python, CSS, etc. These tools allow developers to discover problems with their code without executing it.

Why do we use Linters?
We use linters because they help to ensure that our source code is legible, readable, adhering to language-specific best practices and also easier to maintain. When using them, they often give out warnings about syntax errors, undeclared variables, deprecated functions, spacing and formatting conventions, misuse of scope, etc.

Linters help to avoid errors before we even start compiling our source codes by detecting errors whilst writing code and not when the app is running thus saving a lot of time. If the app is running in production, we could literally spend hours debugging in the worst case, but with a linter, we get immediate feedback.

I know you must be amazed by what Linters can do, you are not alone! Even this cat is amazed as well!

How to integrate a linter
First, we must have Node.js and npm installed in our system for the installation to take place. Thereafter we can install ES6 locally or globally. ESLint works on both Windows, Mac and Linux.

In your Command Line Interface(CLI), write the following command when you want to install it locally: npm install --save ESLint
Then you may run it using the command: npx eslint

When you want to install it globally to make it available to tools that run across all of your projects, in your CLI, just type: npm install -g eslint
You should then set up a configuration file: eslint --init
After that, you can run ESLint on any file or directory like this: eslint yourfile.js

You can find more about the ES6 Linting library from its documentation:

Overview

See the Project Overview.

Timelines

• Expected Length to Complete: 1 week
• Due Date: 11th May 2019

Challenge Summary

You are required to create a UI template using HTML, CSS, and JavaScript.

Important Note

• To be eligible for this challenge, you must have completed the initial assessment.
• You are not implementing the core functionality yet, you are only building the User interface elements, pages and views!
• You are to create a pull request to elicit review and feedback for the UI templates when you are done working on them.
• DO NOT download or use an already built website template.
• DO NOT use any CSS frameworks like: Bootstrap, Materialize, Bulma e.t.c.
• DO NOT use any JavaScript framework or library like React, Angular, and Vue.
  
  Guidelines

On Github Project Board, create user stories to setup the User interface elements:

1. User sign up and sign in pages

2. A page/pages where the User can do the following:

   a. View all available ride offers.
   b. See the details of a ride and respond to it
   c. Offer a ride
   d. View and accept requests for the ride offer he/she created

3. A page or pages for a user’s profile which, at minimum, displays:

   a. The number of rides the user has given
   b. The number of rides the user has taken
   c. List of rides taken and given

4. On GitHub Project Board, create user stories to capture any other tasks not captured above. For this challenge, a task can be a feature, a bug or a chore.

5. On a feature branch, create a directory called ui in your local Git repo and build out all the necessary pages specified above and UI elements that will allow the application function into the UI directory.

6. Host your UI templates on GitHub pages.

Helpful Links

• For a complete beginner, Get started with the Web here.

• For specific questions on Web development, check out these common questions on web development.

• If you need to go beyond the basics, step into HTML & CSS with the Introduction to HTML and the Introduction to CSS guide.

• Scripting is fun. Scripting can also be intimidating. Let's make our first steps into JavaScript with some fundamentals then solidify our understanding with its building blocks.

• Understanding the GitHub Flow - Learn how to use GitHub's power feature, branches in a pragmatic & stress-free way. The GitHub Flow holds together strong opinions that will ease your development workflow.

It is okay if it works but not recommended because its difficult to maintain it. Imagine passing through many lines of code, find one line and trying to make some changes its difficult. So you could make the code more readable by arranging properly your APIs like implementing it in different file.

In React, the component(s) always follow a cycle from the time of creation, when it is mounted on the DOM up to when it is unmounted and destroyed.

React provides hooks(methods) which are naturally called at each point in the lifecycle, these methods give us good control of what happens at the point it is invoked.

So simply a react hook is a method which is called automatically when a component is either rendered in the DOM, Updating the DOM or unmounting itself from the DOM. A good example of React lifecycle hook is componentDidMount, this method will be triggered when a Component's output is first inserted into DOM.

For anyone problems with setting up Postgres for, you can try to use the interactive installer however it is only supported for Postgres 10 and earlier.

Download the installer certified by EnterpriseDB for PostgreSQL 10.x and earlier.

Note: Installers for Linux are no longer being product for PostgreSQL 11 and later. Users are advised to use platform native packages instead.

This installer includes the PostgreSQL server, pgAdmin; a graphical tool for managing and developing your databases, and StackBuilder; a package manager that can be used to download and install additional PostgreSQL tools and drivers. Stackbuilder includes management, integration, migration, replication, geospatial, connectors and other tools.

This installer can run in graphical, command line, or silent install modes.

The installer is designed to be a straightforward, fast way to get up and running with PostgreSQL on Linux (Red Hat family Linux including CentOS/Fedora/Scientific/Oracle variants), Debian GNU/Linux and derivatives, Ubuntu Linux and derivatives, SuSE and OpenSuSE.

Advanced users can also download a tar.gz archive of the binaries, without the installer. This download is intended for users who wish to include PostgreSQL as part of another application installer.

Note: The installers do not integrate with platform-specific packaging systems.

HTML

So the long form of HTML is a hypertext markup language. It's not a programming language.
It's a markup language for creating webpages and HTML documents.
It's a building block of a webpage.
Tag Syntax
<tagname>content</tagname>
these are building blocks of the HTML page.
example;
<p></p>

• the tags are usually in pairs (opening and closing tags)
• The closing tag is usually with a forward slash after the angle opening bracket.
• but some are self-closing tags, they usually do not have any content with them eg;
  <br/> or <br> line break,

HTML page structure
<!DOCTYPEhtml>

<html>
<head>
<title> page </title>

<body>
<h1,h2....h6> heading
</h1,/h2..../h6>
<p> paragraph </p>
</body>

</html>

The!DOCTYPE
tells the browser what type of HTML the document is actually written in.

the inline tags and block level element tags

• Inline elements;
  they do not start on a newline .
  they only take necessar width in the line level . examples can be ,
  <span></span>,<img></img>,<a></a>
• Block elements;
  they start on a newline,
  and they take a full width available.
  example;
  <div></div>,<h1-h6></h1-/h6>

Tag attributes
<tagname atributename="atributevalue">content</tagname>

• Attributes provide info about an element.
• All tags can have an attribute.
• always placed within the start tag.

list tags

• for unordered list
  <ul></ul> this list in a document will appear with bullets

• ordered list
  <ol></ol> this list will have number.

Table tags

<table></table>
<th></th> for table head
<tr></tr>for table rows
<td><td> for adding data in the table.
<tb></tb> table body

Form tags

<form action="" method"POST/GET"></form>
<label></label>

so that's some of the summaries on HTML.

Given the example below:

onSubmitTask = event => {
  event.preventDefault(); // Why this?

  const task = {
    description: event.target[0].value,
    time: event.target[1].value,
    isComplete: false
  };
}

Questions:

• How bad is the default behavior?
• What if we leave it there?

See: #10

Behavior of "this" keyword
this is a weird keyword that behaves a little differently in JavaScript compared to other languages. this serves as an identity function, providing our neighborhoods a way of referring to themselves. this can be used to refer to the object being created by a constructor.

Lambda functions
Lambda expressions simply are expressions that create functions. In JavaScript pre-ES6 we have function expressions that give us an anonymous function (a function without a name).
var anon = function (a, b) { return a + b };
One of the major advantages of arrow functions is that it does not have it's own this value. It's this is lexically bound to the enclosing scope.

Hi all!

Kindly drop in any question around the topics below:

1. Git & GitHub
2. Implementing the Front-End using HTML, CSS, and JavaScript.
3. Implementing the Front-End using React.js

We will be joining a Q & A session with @BenMaruchu at 17:00hrs EAT. Please attend without fail to be able to unlock and unblock your world-class developer potential.

Join Zoom Meeting using https://andela.zoom.us/j/668566256

Timelines

• Expected Length to Complete: 1 week
• Due Date: 25th May 2019

Challenge Summary

You are required to create a set of API endpoints already defined below and use data structures to store data in memory (don’t use a database).

Important Note

• You are to create a pull-request to elicit review and feedback when you are done working on this challenge.
• All JavaScript MUST be written in ES6 or higher and should use Babel to transpile down to ES5.
• Classes / modules MUST respect SRP (Single Responsibility Principle) and MUST use the ES6 methods of module imports and exports

Tools

• Server-side Framework: Node / Express

• Linting library: ESLint

• Styleguide: AirBnB

• Testing framework: jest

• Continuous integration: Travis CI

Guidelines

1. On GitHub Projects Board, create user stories to setup and test API endpoints that do the following using data structures

   1. Get all ride offers
   2. Get a specific ride order
   3. Create a ride offer
   4. Make a request to join a ride

2. On GitHub Projects Board, create user stories to capture any other tasks not captured above. The tasks can be a feature, bug or chore for this challenge.

3. Setup the server side of the application using the specified framework

4. Setup linting library and ensure that your work follows the specified style guide requirements.

5. Setup a test framework

6. Version your API using url versioning starting, with the letter “v”. A simple ordinal number would be appropriate and avoid dot notation such as 2.5. An example of this would be: https://www.yourappname.com/api/v1/users

7. Using separate branches for each feature, create version 1 (v1) of your RESTful API to power front-end pages.

8. At minimum, you should have implement API endpoints describe below.

9. Write tests for the API endpoints

10. Ensure to test all endpoints and see that they work with Postman.

11. Integrate Travis CI for Continuous Integration in your repository with readme.md badge.

12. Integrate test coverage reporting (e.g. Coveralls) with badge in the readme.md.

13. Obtain CI badges (e.g. from Code Climate and Coveralls) and add to readme.md.

14. Ensure that app gets hosted on Heroku.

How can I get better at using the terminal?

Guys if you want to be good in Data Structures and Algorithms in JavaScript visit the freecodecamp website https://learn.freecodecamp.org/ register then go to 'JavaScript Data Strucures and Algorithms Certifications' part.

#hope everyone will enjoy it.

Hi there,

Hope you are just as excited about our next meetup as we are. Hurrah!

To shake things up, and further cultivate the Git, GitHub and GitHub Flow knowledge we have amassed, thus far, we come up with a fun way to confirm your attendance, this time.

The steps are simple:

• Fork this repository
• Clone your repository
• Edit the RSVP-MAY-18-2019 file. Use the template below.

## Full Name (Female or Male)

Fun fact: The quick brown fox jumps over the lazy dog.

- Email [[email protected]](mailto:[email protected])
- GitHub [fullname](https://github.com/fullname)
- Twitter [@fullname](https://twitter.com/fullname)

• Make a commit using the style below:

docs: update RSVPs

Added Full Name

See #12 

• Push to your own repository e.g. fullname/ride-my-way
• Make a pull request against forlooptanzania/ride-my-way

Helpful links:

• Fork a repo
• How to write a Git commit message
• About pull requests
• Mastering markdown
• Conventional Commits

What is code review?

It is an important ongoing process during the software development phase, where pieces of source code are made available to the peers for inspection with an aim to catch bugs, highlighting mistakes, remove vulnerabilities before they form a part of the product.

It also involves sharing knowledge between author and reviewer...So that means @BenMaruchu was learning also from us.

Why do we review code?

1. Keeping the team up to date with a changing codebase

2. Improving the quality of the project

3. Mentoring new developers

Keeping the team up to date with a changing codebase

Giving code reviews helps developers to read parts of the codes they didn’t work on, which improve overall knowledge of the codebase among developers.

This can only be done if we are all on the same plate so, take your time to understand the change

Most of us review code without understanding what and why changes were made, Its always best practice to understand why the developer made a particular change so as you can bring your insights, and one of the way to know the changes is through the description of the pull request. Make sure you read the code and understand the changes.

Note: The rule of thumb is, you always want to understand the reason for the code change so you can give a great code review.

Improving the quality of the project

I hope we are all on the same page in this, it's always easy for a second eye to spot a bug that yourself. It helps intensely to develop quality software by early catching of mistakes and avoiding bad problems in the product. Software’s are developed by human and to err is human. Hence quite obvious reasons to have reviews.

Mentoring new developers

We all know how difficult it is to do peer programming with Senior developers, be it in your current office or that dream developer you wish to meet. One effective way you can use is to make him/her be your code reviewer, he will make suggestions on the areas to improve in your code. Hence your mentor.

Is their a room to say thanks here? I am gonna say it anyway, Thanks to alcwithforloop for giving us amazing mentors they really shaped my carrier I fill am better Profesional coder now.

OK...Let's continue

Best practice in code review.
Here is what we should consider in code reviewing

1. Review a small number of codes

2. Use code review tools

3. Run the code

4. Use the checklist so they don’t repeat the same mistake

5. No Blame to that coder

Let's check

Review a small number of codes

It is advised to review not more than 400 lines of code. Human brains capability to find defects beyond 400 lines might diminish.

Use code review tools

To optimize the time and efforts your team on code review it is highly recommended to use some automated code review tools.

Run the code

One-line change? Run the code. Some CSS changes? Run the code. Just translations? RUN. THE. CODE.
Do not think every developer issues their code runs before they submit a PR. We all had those moments when we were required to submit the code before 00:00 pm in alcwithforloop challenges...am pretty sure not all developers run the code before PR.

Rule: Run the code don't trust the developer.

Use the checklist so they don’t repeat the same mistake

It is commonly found that your team repeats the same mistakes over and over. Checklist proves to be an effective way to frequently made mistakes. The checklist reminds the author and the reviewers to look over something that might miss out during the code review and ultimately improve their coding skills.

No Blame to that coder

It's really not a blame game here when I was given my task in code reviewing I used some hush word like…Your code looks nasty please use find something else to do[hahahaha]…This kind of words is bad because it always hurts developers ego, hence underperformance.

Remember code reviewers aims at finding defects in code, not people. so keep it professional.

Wrap Up

So I finally come to an end of code review explanation. I would like to really say thank you to all the team behind alcwithforloop. It was an honor attending this program since I have learned a lot. THANKS, THANKS, THANKS.....

Also, I wanna thanks our mentors @joshuamabina, @issyzac, @BenMaruchu for all the efforts they put, it was really special to have some moments with these legendaries.

Last, to all learners. Are they leaners? probably, but to me they are kickass developers. Thanks for their support throughout the program. Just reminding you the only way is up

Cheers

For the guys that have reached to this level, here below are the items that you can select to document on how you went about it once you go through it in this challenge.

1. Linting
   What, Why, Why, Why

2. Database

3. Travis CI & CD ( #27 )
   What, Why, Why, Why

4. Test Driven Development
   What, Why, Why, Why

5. Pro-Tips - VsCode like a Ninja

Note.
Try to make it as clear as possible for someone to understand your approach.

Books are always great so be sure to checkout #16.

But! Please do try Github's Learning Lab if your still having issues and you always learn by doing.

Try, you will see a big difference/boost on your learning. I can testify to this.

• Learn GitHub Pages here.

• Learn how to upload your project to GitHub

• You can also learn how to HTML from scratch here.

• Maybe, you don't even know what kind of magic GitHub is; behold, an introductory course.

Goodluck learning
#LearnByDoing

cc @joshuamabina

Hi all!

Kindly drop in any question around the topics below:

1. Implementing the API using Node.js
2. Test-Driven Development - What & Why?

We will be joining a Q & A session with 17:00hrs EAT. Please attend without fail to be able to unlock and unblock your world-class developer potential.

Join Zoom Meeting using https://andela.zoom.us/j/668566256

Before You Start

Add our awesome code reviewers as collaborators to your repository. To do this:

1. Go to Settings tab,
2. Then, select, Collaborators and teams.
3. Click, Add a collaborator. and input the usernames of our awesome code reviewers.

Code review or Pull-request Steps

1. Create feature branch. It must originate from the develop branch and not the master branch.

2. Do all your work on the feature branch.

3. Do commit early and often, aim to make the first commit of your feature as soon as possible. Make them small and focused on completing a specific task. This way, it is easier to pick up on bugs very fast and will also help our code reviewers can give us much more insights and help about our code.

4. Publish then perfect later. Once you are done with the feature (or some aspects of it), create a pull request and request for review. Remember to add all listed collaborators so that anyone available can begin reviewing your pull request as soon as possible.

In case of any question, please, feel free to drop in a comment or shoot all your mails to [email protected]

Hello guys, I installed react router in my project and everything went south, been trying to google for hours now and the solutions provided haven't worked for me. I hope I can get a solution from you guys. Thank you.

Hi there!

We will be joining a facilitation session with our awesome mentors at 17:00hrs EAT to tackle and unblock every single doubt and query about building APIs using Node.js.

Don't miss this opportunity to unlock your world-class developer potential. Quickly, react to this issue with an emoji to declare and express your excitement. Hurrah!

As usual, feel free to drop your questions as comments to this issue.

Meeting room:

https://andela.zoom.us/j/668566256

Slides:

https://docs.google.com/presentation/d/1siryq5gVdeg5A9aQR1bvWWa-K-LrUU1It3ApcaTqEOY/edit?usp=sharing

Social Media & Latest Updates:

• #ALCwithforLoop
• @forLoopTanzania
• @Andela_Kigali
• @Seedstars

With Lots of Love and Appreciations from ALCwithForLoop Team.

Getting started with Travis

What / Who Is Travis? Why do I need it?

Have you ever written code for an app, It works. Then you added more code to do more things. The app gets more complex and bigger as time goes. Imagine you have like 100 functionalities in your app. You want to check them all. How are you gonna do it.?

Meet travis

Your own personal butler to test your code for you. hehehehe But seriously what is travis ?
Well travis is a service that deals with two things continuous integration (CI) and continuous deployment (CD).

We will focus on CI, for now
The idea behind continuous integration is that CI will automatically run your tests ( unit tests, etc ) and other checks for you.

Why should you care?

You are not a caveman. If you have the time and patience to go through all 100 functionalities, knock yourself out.
If you are lazy, smart and a bad ass, you will use CI.

Travis CI to the rescue

As the name suggests,CI stands for Continuous Integration which is an integrated tests that runs continuously on every time when someone pushes a commit (or mostly when opening a Pull Request).
It helps us to automate the testing process. But this doesn't stop you from doing your tests localy.

Setup

The warmup

By now you have noticed that I have mentioned tests a couple of times. Yes tests are a pre requisite to this. You need to have atleast a few tests setup to proceed.

• First, sign up at their website
• Link your GitHub account and enable it for the repository you would like to implement this.

Ready set go!

Travis requires instruction to be told what to do. We achieve this using a travis.yml file.

• On the root folder of your repo create a .travis.yml file.
• This is very important if you put it anywhere else it will not work

This is where it gets interesting

The .travis.yml file is a configuration file. it contains key and value pairs that have a certain meaning. Here is how it looks like but not limited to.

language: node_js
node_js:
  - "version number"
script:
  - "do something"

This is like the bare minimum you need. More config can be found here

So what does this mean?

• First you specify the language you are using for your project
• You can also specify the version (optional)
• script step this is how you tell travis to do something. Essentially this is where you tell travis to run the test script as specified in you package.json file. eg. npm run test.

How i did it

language: node_js
node_js:
  - "8"
script:
  - cd backend && yarn install && yarn test

What is happening here?

• Im telling travis that im using nodejs
• Im specifying node version in my case version 8
• Im telling travis to navigate to the backend folder, install my project dependencies and then run the tests.

Moment of truth

• Save the travis.yml file, commit and push.
• If you have tests setup and have setup travis correctly you should notice that builds are triggerd once you push to your repo or do a PR .
• Alternatively if you visit https://travis-ci.com/yourname/Reponame you will see details of your build.
  

See travis docs

Hi all!

Kindly drop in any question on the topic: Building Web Services using Node.js.

We will be joining a Q & A session with 17:00 HRS EAT. Please attend without fail to be able to unlock and unblock your world-class developer potential.

Join Zoom Meeting using https://andela.zoom.us/j/668566256

I have currently added @BenMaruchu as a collaborator, now, how do I make him an Admin?

Routing is the ability to move between different parts of an application when a user enters a URL or clicks an element (link, button, icon, image etc) within the application.

Why do we need Routing
It allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information.

How to install its package

npm install --save react-router-dom

Below is the step by step turtorial to implement routing in Navigation bar
https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm

$ npm start

[email protected] start C:\Users\nayma\Desktop\alcwithforloop\ride-my-way\frontend
react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.0.5"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

C:\Users\nayma\node_modules\babel-loader (version: 8.0.6)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if C:\Users\nayma\node_modules\babel-loader is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-loader in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nayma\AppData\Roaming\npm-cache_logs\2019-05-18T10_20_57_468Z-debug.log

Git Flow

so its the light weight , branch basedworkflow, that supports/help /guide/ teams and projects where deployments are regularly made.
the flow starts with;

1. Creating Branch

   Why create Branch?

• Easy to make an environment where you can try out new ideas.
• You can experiment and commit changes.
  -Changes do affect the master branch.
  One thing to always remember
  The MASTER BRANCH content is always ready to deploy. All experiments and changes should be done in the FEATURE BRANCH.

2. Add Commit
   All the huge changes that are done after branch creation they get to be commits.

What do commits do?
Its like keeping track of all your rough work when working on something till you get the results u want . This helps you to understand all the things you did to achieve your results .

Commit Awesomeness:

• Helps you keep track of all your work .

Each Commit has a message , the commit message describes why changes took place.

3. Open Pull request
   Coolest thing about PR

• you can pull request at any point of your developing process.

you can get direct feedback from a specific person or a team by simply using the GIT HUB's @mention system in your PR message.

4. Discuss and review Code
   So here your PR is being reviewed and discuss. you may receive questions about certain actions or comments .

5. Deploy
   This step its for final testing in production before merging to master branch.

6. Merge

• this is the final step after changes have been finally reviewed in production.