DEV Community: Melissa Longenberger

A visual guide to help Developers

Melissa Longenberger — Fri, 17 Sep 2021 04:35:57 +0000

I love helping people. I love teaching Web Development. In my lecture I use a lot of analogies to help explain some of the basic concepts. One of the most common things I find that many students struggle with is understanding when and how to use padding and margin. What if I told you that the element you are trying to style is a couch in your living room? Using HTML and CSS you state where in the living room you would like to place the couch in reference to other items you have in there. Using CSS you also move this couch around. So what in the world am I getting at?

Easy. Margin is the space around the couch. It is what keeps your couch a certain distance away from the chair and the TV stand. Now padding. See that is the fluffiness of the couch. That's all internal to the element that is the couch. In this case the border would be the fabric on the outside of the couch. It's what holds the padding in.

For some of my students picturing things this way helps give them a visual way to understand how things are behaving. Granted not every student needs these visuals, but that doesn't mean that they can't still help.

So as I can't help every new or experienced developer this past weekend I wanted to try and take my analogies and give them some visuals and publish them for the whole world to see.

BeeDev's Helper's is the site that I have started to do just this. I am sure that this will always be a work in progress. I mean why wouldn't it be. There is always another way to describe things or picture things. Right now there isn't much to the site, just a few pages but they are good pages.

It isn't mobile friendly yet either, but I will get it there. What matters is I am proud of what I have done so far, and that I won't stop adding to it.

Feel free to share the link, give suggestions on what to add or make better. I welcome the advice.

A Web Developers Journey

Melissa Longenberger — Tue, 02 Feb 2021 07:21:14 +0000

I started a blog at the end of 2020 to create a place to log my journey as a Web Developer. Even if I am the only one that will ever read it, I think it will be interesting to see the posts years from now and how I felt when new challenges came up or something good happened.

Background

For my post here today I want to talk about the Project that I have been working on for the last 4 weeks at Lambda, our Labs project. Even though I have been hired already and I am teaching Web Development that doesn't mean I don't deserve to get my endorsement through Lambda.

The project that we are working on is for Human Rights First, but more specifically it is about asylum cases. When someone seeks asylum in the US there is a process that they must go through to be granted or denied asylum.

The idea behind our project is to have a searchable database of uploaded (redacted) case files for representatives to go through. How often has Judge A granted asylum for Group type X.

When I was assigned the project I honestly had no clue what it was about and was kinda worried about it. Can I do this project justice not knowing anything about it? I don't know anyone that has asked for asylum, or at least I don't believe I do, so how could I possibly work on a project like this?

Well my team is amazing. From the Web Developers to the Data Scientists we have all been putting in our 100% best. Turns out knowing what the project is about isn't as important as understanding what the stakeholder is looking for and turning their wishes into functions....so to speak.

Groups, the good bad and....

Working in a group isn't always a good experience. However it should always be a learning experience. I got lucky during my labs experience and was paired up with some amazing folks. Both the fellow Web Developers and the Data Scientists we all amazing to work with.

On the Web Developer side we had quite a few challenges to over come. The biggest one that we chose to take on for the front end team was the upload button. We realized that with the project ahead of us having the ability to upload the case files for others to search through was important. Working on the display of things was equally important as well so we split our time between everything.

In working on the upload button and functionality we realized that it was going to be a bit more complicated that we first thought. The Stakeholder wanted to have the ability to add tags to the form that would add the file and parameters to the database. Not generally a problem until we realized the complexity of the tags. What we ended up needing was going to be a kinda hierarchy of sorts where we would need to pick a main category, which will then show its sub categories. Once that is chosen a list of tags would be shown as well as an option to add a new one. We understood the reasons for having this but that didn't mean it was a function that would be easy to replicate.

We didn't fully solve it only due to some bugs in the backend, however we did leave some good detailed notes so that the next team that works on it know what we did and what needs to be done.

The end has come .... now what?

Well now that our time to work on the project has come to a close, it's time to present the project to the Stakeholder. What works, what doesn't, things like that.

What works is that the visual aspect of the site looks much better. We went from this:

To this:

Makes it look much more inviting but also is more responsive.
Before we started working on the project the upload button was shown on the page, but it wasn't connected to anything. Now we have this:

Although not connected to the backend to be able to save the files or submit the form, but it has functionality and that is important.

For the next team we have set them up so that they can connect the backend to the upload button as we set it all up it just needs to be wired. Other features that will need to be worked on will be a download button, as well as a way to save searches. The biggest issue I can see that the next team encountering would be in the download. Will it download just the file or will there be other material downloaded as well?

Not my project so how can it help me?

Now here is something that I asked myself when I first started labs. This project wasn't something that I would have worked on or came up with but the experience that I gained both in working with a diverse team and with a code base that was already started and had some bugs is more than worth it. I can not describe how beneficial working on a project can be.

My final thoughts

I am grateful for everything that both Labs and Lambda has shown me and taught me.

If you want to follow my blog here is the link:
https://blog.melissa-longenberger.com

HoneyBees Game of Life

Melissa Longenberger — Sun, 25 Oct 2020 02:47:22 +0000

So I am a student of Lambda School and have finished the Core Web Developers part of the course and have been working with Computer Science or more specifically Python for the last unit. I can tell you I am NOT a fan of python.

For the end of the 1st Computer Science Unit we have our usual end of unit Build Week (or in the part time program build weeks) and our project was to create our own version of Conway's Game of Life.

My name Melissa in Greek means Honeybee, so I wanted to change up the grid from boring 'ol square cells to hexagonal cells. Well building a hexagonal grid in react wasn't too hard since there was a cool npm package I could use. Being able to to click single hexagon cells proved to be a bit interesting. I was able to click the grid and change the whole grids color but that wasn't what I wanted to do. With some help from fellow students, and even my instructor, I was finally able to get just the single hexagon cells to click on their own.

Building the logic for the actual Game of Life however certainly proved to be more difficult that I realized and currently as of this post still not done. Since I needed to have a working application by the end of the Build Week I chose to add the boring square grid. Now don't panic I am not giving up on the hexagonal grid just yet. Like I said though I needed to turn in a working application. And I did.

So what I did was create pages in my application the boring square ones and then the hexagonal one. Check out the project here:
http://game-of-life-by-melissa.vercel.app/

Now by now you are wondering what this has to do with Hacktoberfest. Well https://thecodingtrain.com has a game of life challenge on their site so although I had to do this for my school that doesn't mean I can't submit my version to their git repository and with luck eventually their site as well. So I did.

I am very proud of this project even as it stands as it is as of this post. I refuse to give up on that Hexagonal Grid. I may even add more pages for other versions. Who knows.

React Style May the 4th Challenge

Melissa Longenberger — Sun, 11 Oct 2020 20:31:53 +0000

What I Learned From Hacktoberfest

My first real contribution to someone else's project was through Coding Train's Repository. I took on Coding Challenge #101 - Called May the 4th. I put a spin on it of course. I didn't use the programs that the website uses, instead I used React. It took me a bit to get the basics done, but I did it. I might make tweaks here and there but the official PR was accepted and published to their site here https://thecodingtrain.com/CodingChallenges/101-may-the-4th.html.

Here is my live link that they published https://coding-train-may-the-4th.vercel.app/

I even went on and made a few changes here and there and published a new version through a different branch on my own repository here https://coding-train-may-the-4th-pages.vercel.app/.

I would love some feedback on what you think on either live version.

1st Hacktoberfest

Melissa Longenberger — Thu, 08 Oct 2020 02:58:46 +0000

What I learned so far!

In January I joined the ranks of Lambdalorians, and started the Full Stack Web Development Track at Lambda School. Best decision I have made in some time. For a Part Time student like myself the school takes over 1 year to go through 4 intense Units of Web Development, 2 Units of Computer Science, and then a few Units of Career and other team building projects. As of this post I am about halfway through the Computer Science portion.

Man have I learned a lot. Front End, Back End, and now Python. But thats not all this school teaches. Nope. At the end of July I also gained the title of Team Lead (TL). A unique position in the school where I get to go back through the core units but not as a student, or not just as a student, but as a Mentor to 6-10 students.

It was through fellow TL's that I learned about Hacktoberfest. Where I quickly decided that this was something I not only wanted to participate in as a Web Developer but as a maintainer. Well those same TL's wanted to gather some good projects for Dev's of all levels and present them to fellow students to help them delve into the world of Open source. So having 2 big projects that I have been working on in my github organization BeeDev Services I offered up the 4 repositories. 2 Front End React apps and their corresponding Backends.

But just passing on those links wasn't enough I soon learned. I also needed to have a solid README.md file. Having seen tons of these files from repositories that the school has us work in I did know that mine had to be good.

Hopefully I did a good job. Here is a list of the ones that I added and welcome extra help on.
Front End = https://github.com/beedev-services/new-help-guide
Back End = https://github.com/beedev-services/help-guide-database-api

Front End = https://github.com/beedev-services/web-dev-journey
Back End = https://github.com/beedev-services/blog-api

I can't wait to see what others can contribute to these and what else I can contribute to others.

Melissa

Adding js to react app

Melissa Longenberger — Fri, 24 Apr 2020 05:07:54 +0000

I have a js function for a chat service. Typically when building a site and using this I simply add the function to the .js file that is linked to the page that I want this chat service to show. I am unsure how I can still accomplish this when using react. Is is simply just like linking another .js file?