As sort of an extra supplemental course, I am taking a JavaScript Algorithms and Data Structures Class by Colt Steele on Udemy. I am still in the early stages of the course but we have been learning about Big O Notation and what his means for the speed and complexity of functions.
We can categroize the complexity of a functions runtime by giving it a “Big O Notation.” For example:
function logAtLeast5(n) {
for (let i = 1; i <= Math.max(5, n); i++) {
console.log(i)
}
}
Today I will be continuing with a couple of hours with the React course, followed by more learning of MongoDB, as well as some supplemental learning of Javascript algorithms.
The following code illustrates how you can bind a function with arguments passed to it inside of the render function. This would make it easier to pass arguments into something like a handleClick
function without having to dive into the event to get data about the object that was clicked. This method isn’t perfect, but it does work for simple applications. The reason is that, it creates a new function each time a component or piece of a component is rendered.
class myComponent extends Component {
static defaultProps = {
color: ['blue','green','red','yellow','orange']
}
constructor(props) {
super(props)
this.state = {color: 'blue'}
}
changeColor(newColor) {
console.log(`newColor is: ${newColor}`)
this.setState({ color: newColor})
}
render() {
return (
<div className="ButtonList" style=>
{this.props.colors.map(color => {
const colorObj = {backgroundColor: color};
return (
// this will pass the changeColor function to the onClick method, giving it the argument of the current color
<button style={colorObj} onClick={this.changeColor.bind(this, color)}>
Click me!
</button>
);
})}
</div>
);
}
}
Today I will continue going through the React course I am taking on Udemy. So far, the class has just reinforced what I already understood about React, but today we are getting into some of the more complex uses of React and using state.
For instance, I have always updated state values like so:
this.setState({
value: this.state.value + 1
})
This works, but is not the best way because it depends on the state being specifically what you think it should be at the time of the function call. Some other async state updating operations may or may not have finished if your app us more complex.
Read More...I started the week off with a phone call with a potential employer. The conversation went well and I ended up being given a coding assessment to see how my skills lined up with the job requirements. So this week for my coding time, instead of going through any course work, I created the app required by the assessment using React. The following is a general break down of the app and assessment requirements.
Click Here To View the live site. You can view the code here.
I spent the day adding Pagination functionality to my Ingen static site generator. Through trying to implement this, I realized the need to switch to Handlebars rather than Mustache for the ability to add custom helper functions. Mustache prides itself on being logic-less but I did need a small amount of logic involved in order to implement pagination on the blog section of my site builder.
The code is a bit obtuse at the moment, but I will refactor it when I get some time to make it more easy to read. The code below is the gist of what I added as a Handlebars.registerHelper
to give pagination functionality to the program.
Today I spent the first half of the day going through exercises in the Udemy React course I am going through. The course is still in the refresher stage for me as I know most of what the instructor is talking about.
For the second half of the day I job shadowed a developer friend of mine. He is a remote programmer and it was really great to see his process for working remotely. After seeing his workflow and speaking to him about how he feels about remote work, I believe the desire to work remotely has been even more solidified in me.
He gave me a great book called ‘A Philosophy of Software Design’ by John Ousterhout. I read through the first two chapters and am very intrigued. The main point of the book is to highlight the necessity of simplifying code and making your programs as modular as possible while it lends to being less hard to understand.
I have a fairly decent understanding of React (in my humble opinion ;) ). I do however want to get deeper with it and learn more about it. So I am continuing my self paced learning with a Udemy Course on React by Colt Steele. He was one of the instructors on the first dev course I took and I liked his teaching style a lot.
Goals
Last week I left off with one hour left of the Udemy Node course I have been working through. We are currently learning how to use socket.io to implement into a chat room, and tracking the users, and rooms of the app.
We’ll start today by creating users.js
file to store users. In the code we will create the ability to add users, check users in rooms, and perform other validation.
const users = []
// addUser, removeUser, getUser, getUsersInRoom
const addUser = ({id, username, room}) => {
// Clean the data
username = username.trim().toLowerCase()
room = room.trim().toLowerCase()
// Validate the data
if (!username || !room) {
return {
error: 'Username and room are required.'
}
}
// Check for existing user
const existingUser = users.find((user) => {
return user.room === room && user.username === username
})
// Validate username
if (existingUser) {
return {
error: 'Username is in use!'
}
}
// Store user
const user = { id, username, room }
users.push(user)
return { user }
}
const removeUser = (id) => {
const index = users.findIndex((user) => user.id === id)
if (index !== -1) {
return users.splice(index,1)[0]
}
}
const getUser = (id) => {
const index = users.findIndex((user) => user.id === id)
if (index !== -1) {
return users[index]
}
return undefined
}
const getUsersInRoom = (room) => {
const usersInRoom = users.filter((user) => user.room === room)
if (usersInRoom) {
return usersInRoom
}
return []
}
module.exports = {
addUser,
removeUser,
getUser,
getUsersInRoom
}
Spent the first half of the day completing my InGen static site generator. The app is now fully functional and I was able to fix all of the bugs/issues by switching over to fs-extra
instead of using the provided fs
system with node.
I also switched all of my for
loops inside of sync functions to for..of
loops and that also cleared up a few inconsistencies.
The site is now capable of building a blog using all of the posts saved in the content/posts directory. It then dynamically saves the files into custom dated folders in the _site/blog
directory after it is built.
I am pretty proud of the way it all came out and in the next couple of days will work on setting it up as an NPM package for others to use just for fun.
Read More...Spent the morning working through one of the last Eloquent Javascript Chapters. This one dealt with node specifically, and finally, I understood everything going on in the chapter.
The book covered the very basics of Node, which by now has been solidified for me while working through the Udemy course. At the end of the chapter there was an exercise suggestion that I may take up once I am finished with my static website generator.
The exercise is to create a directory that will be served to the web via node. This directory should have read/write privileges and should be made editable from a browser interface. The suggestion seems fun, seeing that this app would allow anyone who visits the site to create, delete, and edit files to be served to the user.
Read More...I am in the last section of the node course I have been working through for the past two months. This section deals with using socket.io and a building simple chat messaging app.
What is neat about socket.io is that it allows users to send messages to the server, and for the server to send messages back to the user. With this implemented, users are able to chat with each other in real time, as messages are related to and from the server to all of the users (or to whichever users you specify)
In today’s lesson we will be implementing using handlebars to render chat messages from users to the browser.
In my index.html
I have added the following (the location button is from a previous lesson):
<body>
<h1>Chat App</h1>
<div id='messages'>
</div>
<form id='message'>
<input type="text" id="messageText"></input>
<button type="submit">Send</button>
</form>
<button id="send-location">Send Location</button>
<script id="message-template" type="text/html">
<div>
<p></p>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/chat.js"></script>
</body>
Last week and today I continued to work on the static site generator (InGen). Today I added the ability to add blog posts by saving markdown files inside of a /post
directory inside of /content
. It’s been nice to take a break from tutorials and focus on getting this project to work in the ways that I want it to.
Awhile back, a friend of mine suggested that to get deeper with my learning, I should attempt to build my own static site generator. I had this in the back of my head for the past couple of months and decided to take a break from my course work to dive into this project.
I was able to create the code to get the basic version of this site working properly. I dove into some new concepts getting this project to work, working mainly with how NodeJs’ fs
module works and using that to parse, create, and delete files was challenging but highly enjoyable. After this project, I would like to go deeper with the fs
module and create more programs that can work with the users file system directly.
The code can be viewed in its current state at my repository here: https://github.com/jordanvidrine/InGen
Read More...This morning I am going through chapter 18 of Eloquent Javascript. (almost done with this book!) The chapter focuses on HTTP requests, html forms, as well as javascript’s fetch function.
I’ve worked with fetch in a couple of my own projects, to make calls to me own API on routes being served up by Express. Let’s dive in.
Calling fetch
returns a promise that resolves to a response object containing information about the server’s response.
fetch("example/data.txt").then(response => {
console.log(response.status);
// → 200
console.log(response.headers.get("Content-Type"));
// → text/plain
});
For the last part of the day yesterday I began going through the testing part of the node course I am taking. I love the idea of testing and am eager to continue to learn how to use Jest in reference to node, express, and a working database.
Yesterday we walked through setting up a test environment, a test database, and refactoring our call to express for us to be able to use it in a testing suite. We installed Jest, as well as Supertest (helps testing with express routes without creating a server) from the NPM library.
A jest test looks like this:
const calculateTip = (total, tipPercent = .25) => total + (total * tipPercent);
// Jest gives us the global variable of test, so no need to require anything
test('Should calculate total with tip', () => {
const total = calculateTip(10,.3)
expect(total).toBe(13)
})