DEV Community: Monica

Saving Session Data with Connect-Mongo

Monica — Sun, 05 Jul 2020 18:31:31 +0000

I recently completed a full-stack application using Express-Session to store user sessions, PassportJS authentication with a local strategy, and deployed it to Heroku. However, after a successful deployment I saw the following error:

Warning: connect.session() MemoryStore is not designed for a production environment, as it will leak memory, and will not scale past a single process.

Luckily, I was able to find a helpful github link instructing me how to fix the issue. Instead of using the default MemoryStore to store session data, I needed to find a way to store the data. There are many available session stores listed, and you can choose whatever you like. Since I was already using a Mongo database, I wanted to take advantage and use that to store session data too.

I decided to use the more popular connect-mongo package to connect to my database. After installing the package, I used the existing connection to my database.

My code changes

I was able to connect via mongoose using only a few new lines of code! This is assuming the app is already configured with express-session.

const MongoStore = require('connect-mongo')(session) to add the package in to my app
Add this line to modify my existing app.use to add a store option as follows:

app.use(session({
  secret: process.env.SECRET,
  resave: false,
  saveUninitialized: false,
  store: new MongoStore({ mongooseConnection: mongoose.connection })
}))

That's it! There are additional parameters you can pass in, but that's all you need to get it working.

Now, when I login to Mongo Atlas and view my project's database, I can see the session data is stored here too!

For a simple app, this is great for me. In a larger production environment you might want to have a separate database connection for the session data, you can learn to do that in the docs.

Yelpcamp - My first fullstack project

Monica — Sat, 13 Jun 2020 23:54:20 +0000

I originally bought the Udemy course "Web Developer Bootcamp" back in 2017, but life got in the way. I have made it through the first half three times, but I was already quite comfortable with front-end and JavaScript basics, so it was just a comfortable place for me to be stuck in "tutorial hell". I had always wavered about pushing into the unknown of backend development with NodeJS. I'm so happy I finally made it through.

If you're not familiar with the course, the capstone project is a fullstack application called "YelpCamp" where you can add, view and review campsites. Besides the final project of CS50, this is my first foray into fullstack web apps.

Cons:

Semi-outdated material: If you're looking for a course on ES6 and React this is not it. The course uses Bootstrap (both 3 + 4), callbacks, and jQuery. There are 1 or 2 additional/new modules on newer tech, but it is not at the forefront.
Accelerates in pace after the backend section. I discuss this more below, but you're not going to get a lot of detail on the inner workings of passportJS, express, or MongoDB. I have been taking the time to read the docs on the side for better understanding.

Pros:

Takes you from zero to a full-stack web app in a methodical and easy-to-follow manner. Actually, there are loads of positive reviews all over the web so I am not going to go crazy here. If the course is on sale, and you are a beginner/early-intermediate in web development, it's a good one.
Friendly and helpful community: the course has its own Discord chat which is quite active and quick to respond, even though the course is several years old! A mix of experienced developers and TAs are there to help you with questions in and out of the course's scope.

??:

It teaches you how to use technology in a practical "bootcamp-style" manner. You don't spend much time on the docs for express, mongodb, mongoose, passport - but you are still able to implement them. I think it's a good taster, but you will not have a rich understanding by completing the course.

What's next?

Well, in response to a previous post I have made a helluva Trello board. I took inspiration from many who came before me, trying to organize my learning and process. However, it is NOT perfect and I would really appreciate any feedback. I'm going to learn deeper into some of the topics introduced in the course, and finally fix up my portfolio.

Find the course here: https://www.udemy.com/course/the-web-developer-bootcamp
I am not affiliated in any way with Udemy or this course

//todo

Monica — Sat, 06 Jun 2020 19:58:41 +0000

As a self-teaching developer, I find the list of todo (to learn, to create, to improve) is growing faster than I can check things off the list! I first starting using a simple chrome extension to keep track of everything. As the list grew and grew, it's time to move to something more robust.

I've started a Trello board to keep things organized. So far I have three main lists:

Front End
Full Stack
Portfolio

I expect to add things to a fourth "Job Hunt" list in the coming months, as I make progress on those three. Some of the items on the list are small ("finish clone of front-end example") and some are huge and vague ("practice algorithms"). I ask of you, dev community, what are your tips and practices for staying organized and focused in this sea of "todo"?

What I learned from The Web Developer Bootcamp

Monica — Sun, 19 Apr 2020 20:11:21 +0000

I recently finished (finally!) The Web Developer Bootcamp on Udemy. I had started the course three times since purchasing in 2018. Previously the furthest I had made it was to the very end of the Front-End section. I don't want to write a review of the course, as there are plenty already. Instead I will explain what I learned (or didn't learn)

I already had a pretty good understanding of HTML/CSS prior to beginning the course, so I breezed through those chapters. I am by no means a CSS ninja, I did learn (or refresh upon) a few key CSS properties like how to float a div to make column layouts. The course also gives a good explanation of the bootstrap grid. Though to be perfectly honest I mostly use CSS Grid or Flexbox nowadays.

The basics of Javascript were also pretty familiar to me. However it had been a while since I was consistently coding so this was a great time to remember all the syntax and gotchas. Similarly with DOM Manipulation, the course gave me a good opportunity to re-read some MDN documentation. I enjoyed the project "Color Game" as well, I was able to do most of the project without watching the code-along so that was motivating.

Next was jQuery, which I had used on several of my FreeCodeCamp projects in the past. I feel pretty comfortable using it, though the course mainly covered how to do styling etc, and not the fun stuff like AJAX. I guess if and when I need to use it I will just look up the documentation

The Good Stuff

I learned a nice lesson during the "Patatap Clone" project. While I was feeling pretty confident, I dove right in without watching the videos...or reading the documentation. Then I spent a good while troubleshooting why I couldn't use the external library paper.js. Turns out I should have read the DOCUMENTATION first and would have saved myself a lot of headache. You need to write your paperscript code in the HTML body to avoid CORS errors in the browser. I broke the problem down into smaller steps which always helps me organize and feel more confident:

Draw a circle
Draw a circle on keypress (get random x/y coordinates from html body)
Draw a circle on keypress and fill with a random color
Make each circle grow over time (this one took a while, I ended up adding each circle to an array, then using the onFrame handler to make them grow by looping through the array on each Frame. I also had to look deep in the docs for the "scale" method on the Circle object)
Remove the circle after some condition... I chose "length > 2500" after some playing in the console

I think this project was really good. I was humbled having to read and re-read the documentation but it's a great practice to get into. I applied the principles learned in the beginning of the course (and from my overall studies) to complete the project without having to watch the code-along. It definitely improved my confidence that I can continue making projects instead of just staying in tutorial-hell.

I'm gonna wrap up this post here, it's getting a bit long. I will have a separate post on how I felt going through the backend portion of the course - which is my second time ever doing backend programming.

Thanks for reading!

Never stop trying

Monica — Sat, 11 Apr 2020 22:06:26 +0000

For the fourth (fifth?) time I am re-starting my coding journey. Well, maybe not starting again, but picking up steam.
Sometimes I am frustrated that I make so much progress only to "fall off the wagon" but I think it's equally important that I keep coming back. That must count for something! So here I am, logging into FreeCodeCamp and Github, seeing how much I remember.

Thanks for reading and watch this space for good things to come :)

How To Code: Simple Data

Monica — Sat, 30 Sep 2017 19:01:22 +0000

Well I’ve been a bit lazy with the updates, but in the last two weeks I have finished the entirety of HtC: SD on edx.

Invasion!

I’ll continue where I left off in my last post: Week 4 focused on self-reference and reference. Self-reference means when a data definition refers to itself, then the template for that function must include a “natural recursion.” The primary type of self-referential data we work with is Lists (remember car and cdr), where an list can either be empty or a pair of items, where the second item is another list. Therefore, naturally, to work on this type of data we need some recursive function. I have worked with recursion a bit (a very tiny bit) but I enjoyed this approach to teaching it. Solving problems with recursion can be a bit tricky, which is why “well formed” tests will help your development.

Reference (as opposed to self-reference) means when a data type contains another type of data that is non-primitive. For example, a List of Bears, each item can be a Bear (which would be some other structure). The point is, if we refer to a non-primitive data type, we need to include reference to that data type’s template into the new template. It’s a bit less confusing than it sounds. If you have a list of x,y pairs, and you want to adjust every point in the list, you’ll need a function that operates on a single point itself. This lends itself to the Helpers module.

A helper function, simply, does a small part of a function. You can use helpers for function composition (remember JS Allonge?) or when the “knowledge domain” changes. Many many helpers might be needed for large or complex problems. Helper functions make debugging and keeping track of the flow of information much easier.

The course also touched on Binary Search Trees, which is vaguely familiar form CS50 (though I believe that was just binary search, and search trees/tries were separate). To be honest I struggled a bit with these, a few problems in the problem set tricked me up (partially due to misunderstanding the problem statement)

The final project of the course Space Invaders was a fun opportunity to combine everything I’d learned. A lot LOT of helper functions, test-driven design, breaking down a problem into sub-problems. I am quite proud of my little result. The code is somewhere on github but I’m not going to post it as maybe you haven’t finished the course yet!

I super recommend this course, it is not the most challenging (like CS50 was for me) but it teaches a lot of broadly applicable lessons in CS. The followup, HtC: Complex Data, is supposed to be much tougher! Let’s go!

HtC: SD — Week 3: Designing Worlds and Compound Data

Monica — Wed, 20 Sep 2017 17:18:17 +0000

I learned a lot this week, no surprise there. The first half of the week focuses on designing worlds via the big-bang function in Racket. Think of the big-bang as a sort of event loop (but it’s much different in implementation due to Racket being a functional language). So as big-bang runs, you need to tell it what to do by writing different functions. But well before that, you need to address your data! The most important thing is always the data definition, and with compound data even moreso.

Compound data is data that is “naturally” linked together. Think x,y coordinates, speed and position, or name and age. If you want to track more than one piece of data, then you’ll need compound data. It’s fairly simple to initialize via define-struct your-struct . Luckily this course has a language reference because I keep forgetting where parens should go.

OK next I learned to design worlds with this compound data, the lecture topic was a cow that walked back and forth across a screen and changed directions when it hit a wall or the user pressed the space bar. Again, we have these recipes to guide our design. The most difficult part for me is writing the check-expect which is the test you write before even coding the function to compare inputs with expected outputs. Usually a good check-expect will write your function for you. To give an example if I write (check-expect (double 2) (* 2 2)) I mean to say that when I run double on 2 I expect to get out 2*2 or 4. Writing 2*2 instead of 4 actually illuminates what the function should do, which helps you and any future user.

I also worked through all the practice problems this week before attempting the “Design Quiz” I’ll tell you nothing gave me more grief than rolling this little bastard back + forth across the screen.

I hate you lambda man!

The first part of the problems was just to slide back and forth, which was relatively simple because we had worked through a similar problem in class. The second part was to make it rotate while spinning. This was harder as I had to modify my data structures to account for rotation, luckily the rotate function can accept negative numbers, so it can change directions of rotation.

Finally we had to adjust rotational speed based on radius to actually “roll” it back and forth. Man this was a nightmare, the formula was given to change degrees rotation to distance required to travel, but I only had a velocity component. After some time I realized that a velocity dx scaled by rotational speed (2pi*r/360) would give the required change in angle dr. Anyway that guy rolls! These recipes make the design process more straightforward, and if you force yourself to stick with them you won’t get sidetracked or forget edge cases.

HtC: SD Weeks 1b and 2

Monica — Mon, 18 Sep 2017 14:06:35 +0000

Week 1b introduced our first Design Recipe for how to design functions. The design recipe has five parts which should be completed more or less in order. While they may seem like overkill for a small function, I am certain they will help writing large and complicated programs. I went through all of the week’s practice problems before attempting the Module Assessment, this helped solidify the steps, syntax, and style required to succeed in the course.

The language itself, Racket, has many many things we will need to look up in HelpDesk. For example, while it has the type Number, there is also type Natural which is a subset of Number and should be used if it is suitable to the program. It makes no sense for the instructor to go over every little bit of the language. First of all it would be impossible, and secondly this way we are forced to teach ourselves and explore the documentation.

Not quite

Week 2 moves on from functions to data. If we can define and therefore restrict the type of data our functions receive, it would be easier to design the functions. The first half of the week introduced three new data structures: intervals, enumerations, and itemizations. One example of each was given and we designed a formal data definition (according to the recipe). At first it was a bit overwhelming to read through the recipe, but after a bit of practice it is fairly intuitive.

The second half of the week shows how to design functions based on these new data types. There are a lot of things to keep track of, which is why following the recipes is key. I am slightly terrified of what’s to come, it seems this course is ramping up quite rapidly!

How To Code Simple Data — Week 1a

Monica — Thu, 14 Sep 2017 17:44:44 +0000

A recap of what I learned in the first part of the edX/UBCx course HtC: Simple Data

Moving far far away from the “familiar” land of JavaScript, we take a step aside to learn a new language, Racket. The first part of Week 1 for this course teaches the fundamentals of “Beginning Student Language” a subset of Racket Language. Racket is a run-time compiled language (like JS) that is most easily written and run in the Dr Racket open source software. It is a whole lot different than JS.

Racket has different types from JS, and seems to be strongly typed. We have strings, booleans, images, numbers. We start all our calls with a paren, and the notation is a bit funny. To add two numbers we write (+ 2 2). With more math we can write (+ 2 (* 3 2)) which gives 8. To compare if six is more than two we write (> 6 2) and that would give a boolean true. We can define constants: (define image1 (circle 10 "solid" "red)). The IDE is a bit tough, as it doesn’t close parens automatically.

However when you make a mistake, the error reports are generally quite helpful about what you did wrong, usually a forgotten or misplaced paren. The software also has a great stepper tool for debugging! It also has (so far) thorough and helpful docs.

This course is aimed at those who have never programmed much, but it steps up the game pretty quickly. So far I am enjoying it, even if it’s another white male teaching :)

I will close with this bit of positivity from Professor Kiczales:

One of the great things about computer programming is these machines are not fragile. If you make a mistake, you get an error message, not quite the right thing happens, you just fix it.

I’m not saying we shouldn’t worry about errors in our programs. The design method we’re going to learn is going to help us prevent and find such errors.

All I’m saying is, if you get an error while you are working, don’t worry about it.