teleren/devto huggingface dataset:
Formatter, Linter and more
Published: 2021-11-05 22:51:24

There are some amazing tools available for developers to make coding easier. Today I am looking at a few of those and how it was like installing and using them in my [static-dodo](https://github.com/menghif/static-dodo) repo.

### Prettier

Prettier is a code formatter that can take badly written code and make it 'prettier'. There is a nice [playground](https://prettier.io/playground/) that shows exactly what it does. I have been using Prettier since my very first Web class so I am very used to the way it formats code. Installing it is easy, I used this command after reading the [docs](https://prettier.io/docs/en/install.html):
```bash
npm install --save-dev --save-exact prettier
```

Then I created a `.prettierrc` to add some custom rules and a `.prettierignore` to specify the folders to ignore.


### ESLint

ESLint is a great tool to find problems in your Javascript code. I installed it following the [getting started guide](https://eslint.org/docs/user-guide/getting-started):
```bash
npm install eslint --save-dev
```

and then I initialized it for my project using the command:

```bash
npx eslint --init
```
This command will generate a `.eslintrc.js` file that can be configured as needed.

### VS Code integration

My favourite way to use Prettier and ESLint is by integrating them into my editor (Visual Studio Code). There are extensions available for both:
- [Prettier Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [ESLint Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Having the extensions already installed, I created a `.vscode` folder where I put settings specific to the project that will apply only to the workspace.
Inside that folder I have a `settings.json` file with a setting to run Prettier on each save:
```json
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
```

### Husky

Finally I installed [Husky](https://typicode.github.io/husky/#/?id=install) which is a tool that allows you to run any script after each commit. I set it up to run Prettier so that if someone is not using Prettier inside of VS Code, this will take care of the formatting automatically.

### Thoughts

Setting up these tools was straightforward and it was good to go through the docs to learn some new settings that I wasn't familiar with. Looking at Husky was brand new to me but now I realize that I encountered it before in past open source contributions.

I squashed all the commits together into [one](https://github.com/menghif/static-dodo/commit/f7cb85121f27a25718252e0532b15e5667eab927), including an update to the `README.md` and a new `CONTRIBUTING.md` file.
Map [1]
Tags: codenewbie, cpp, beginners
Published: 2021-11-05 22:47:22

![ImageDescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85gz1ll6bmrbroysv7ii.png)
 
I just started working on this map (just started mapping too), if there is anything that doesn't look right then let me know.

I'm just letting myself mess around with any objects and rotation messing with lights etc...
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwwchvgf2xpj4uqhcsge.png)

I don't know what this means. I feel like it has something to do with re-rendering, idfk.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvpkiog6144j866lq1p8.png)

I also have no idea why these walls wanna put a material on themselves. I checked it should be a normal white wall like the one beside it, but ig it has something to do with the lighting (or shadowing)

gonna post more...
TypeScript: my opinion
Published: 2021-10-17 13:06:19

TypeScript is the new hot trend of this year 2021, and is expected to grow even more during the next few years, along with some other technologies such as NextJS, GraphQL and others, and for good reasons too. The type safety that it offers, the IntelliSense, as well as some traditional object-oriented-programming concepts such as Interfaces, and access modifiers, has upped the game for JavaScript developers big time, and made JavaScript all the more robust and safe, while adhering to the same rules that governs it (ie: any valid TypeScript code, is a valid JavaScript code).

With that in mind, I have finally made the switch about 7 months ago. This switch has started a journey full of ups and downs, and frustrations at the beginning. But the end result was so worth it, and I can safely say now that I have no intentions to return to regular JavaScript ever again.

# What to expect?

The first few weeks, TypeScript coding felt like walking in a minefield. I had to watch out for every variable I write, and its type, lest I get bombed with humongous lines describing an error somewhere. And they are everywhere.

Before, when working with React, all I had to do was to install some dependencies, and get get going. But now, I need type definition for each one, that is, if they are not made separately in a different NPM package all together.

I also got frustrated every time I had to bypass an error that I wouldn't have got if I used JavaScript instead (if I had a coin each time I said to myself "let me just switch back JavaScript, it'll make this smooth again", I'd have a lot of coins).

But I know I had to persist, because I knew what benefits I'll gain in the end. And I did, both persisted and gained advantages. The errors don't appear that much anymore, and if they do, they are predictable, and significantly easier to deal with than before.

I now write safe, consistent code, and I get warned beforehand, at compile time, of errors, instead on seeing them on the app screen on the browsers, or the console. So peace of mind it is.

In conclusion, I do recommend trying TypeScript at least, because it's worth the relative troubles, and it'll make your coding experience far more enjoyable in the long run.

________________________________________________________________

Connect with me on: 
* [Twitter](https://twitter.com/marouane_souda)
* [Instagram](https://www.instagram.com/marouane.codes)
* [GitHub](https://github.com/marsou001)
* [LinkedIn](https://www.linkedin.com/in/marouane-souda-837512163)
* [Personal website](https://marouanesouda.com)
Fall in Love with Open Source 🍁
Tags: hacktoberfest, opensource, javascript, programming
Published: 2021-11-05 22:28:26

Last month I participated in [Hacktoberfest](https://hacktoberfest.digitalocean.com/). I made four contributions to open source projects. I learned a bunch, got more development experience, and solidified a bond with open source.

![Open source visual thanks to Giulia Forsythe on Flickr
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8voojj862e8tfsqr9zc.jpg)

2021 was the eighth year Hacktoberfest rocked and rolled. Last year there were [166,057 PR's](https://www.digitalocean.com/blog/hacktoberfest-recap2020/) merged and this year probably eclipsed that!

Open source has always intrigued me and I jumped into making contributions before Hacktoberfest. Having gone through Hacktoberfest I can say that it lit a spark under me.

I did brand new things like create a robots.txt file. Never knew about them before! I made that file for an Elm project. I had never heard of Elm before.

The magic behind Hacktoberfest and open source runs deep. Not only are there new languages, techniques, and concepts you can indulge in, there are amazing maintainers and contributors you can collaborate and learn from.

I had Zoom sessions with two project maintainers. They were both super helpful, upbeat and willing to help in any and every way. Shout out to @kirkcodes and @nickytonline 🙌.

Kirk's project was the [Elm game](https://github.com/tkshill/Quarto) I made a robots.txt for. Not only was he helpful with any questions I had, he gave me a great overview of Elm! I had done some research on it, but hearing more about it from someone using it shed even more light on Elm.

Nick's web3 starter project accounted for two of my contributions. The second of the two issues was trickier than the first. I needed to get Storybook working with webpack5.

This is a relatively new setup and Nick made updates to his code-base that helped smooth things out. After hitting roadblocks on my own I jumped on a call with Nick, pulled in recent changes, and got it running smoothly.

Pair programming is a part of working on any team and these were great examples of the power it yields. Open source can offer these important experiences for any developer at any level.

Going forward I'll do Hacktoberfest every year. It's an opportunity to work on new projects, skills and with folks you may have never worked before.

Open source doesn't just open its doors in October either. Contributions can be made all year round.

There's a special energy that emanates when everyone is diving into open source collectively. Hacktoberfest and the community at [Virtual Coffee](https://virtualcoffee.io/) made it special.

No matter what time of year it is, find [projects](https://www.codetriage.com/) you'd like to contribute to. Ask to be assigned to an issue, work and seek help as needed, and get your PR merged like a boss!
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-11-05 21:51:33

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Cleaning off your desk... or whatever else might spark joy ❤️ 

---

Congrats on your wins! I hope you all have a great day! 

![Happy Mushroom saying "It's Friday"](https://media.giphy.com/media/d8D5RoR8adbJaFF3TV/giphy.gif)
My start in Web Dev
Published: 2021-09-27 17:36:50

I am that child who LOVES to do everything and explore every opportunity he gets. There is never a no from my end when I see an opportunity. I joined engineering in 2019 after a gap year where I tried to explore multiple things and two things that struck me was that I loved storytelling in any form and I love designing and curating experiences. 

I knew I would be doing engineering post the gap and I was looking at domains where I could explore and UX and Front end dev caught my eye.  After multiple online courses, YouTube lessons, playlists, books, I didn’t enjoy the process as it felt like everything was scattered. I am a person who loves process than result and I never got a chance to assess myself, unlearn, relearn and interact with other devs.

 I came across a cohort which I found interesting and it actually focused on the process than the result and was all about implementation than just theory. I started preparing for it but there was so many ups and downs and a lot of circumstances which were not under my control

The biggest learning I had over the past 3 months was that there are 4P’s a programmer needs, Passion, Process, Persistence and Patience. I have faced over a month of procrastination, imposter syndrome and a bunch of other things. I was on the verge of quitting but there was something that still got me back to creating and I feel it goes back to my love for curating experiences.

  I really hope to build my skillsets around these domains and grow not just as a technical developer but also a creative entrepreneur moreover start my journey by getting into that cohort!
How to make an object center that doesn't have `static` position in CSS?
Tags: javascript, react
Published: 2021-11-05 21:08:26

Sometimes you may have asked yourself the question above. It's so simple which I want to explain.

Consider you have a `div` tag along with these CSS properties:
```css
width: 50px;
height: 50px;
background-color: #000;
...
```
The code above is simple and I'm sure if you've experienced CSS, you can understand it.

I add more to the code above:
```css
position: absolute;
top: 50%;
left: 50%;
...
```
The article is suitable for *non-static* position. It may consist of `relative`, `absolute` and `fixed` positions. Thus, you must specify the `position` property with the values above to be correctly worked.

`top: 50%` and `left: 50%` properties work simply and they make the object center vertically and horizontally... . But!
The aligning coordinates are start against properties you have used.

Until now, If you've checked the code above, you may have noticed the object is slightly to the *right* of its parent and if you use `right: 50%` instead of `left: 50%`, you may notice the object is slightly to the *left* of the parent and not exactly center. Even for `top` and `bottom` this phenomenon occurs.

So there should be miracle here to fix the code! Use the code below and check it again:
```css
transform: translate(-50%, -50%);
```
Boom! It works nicely and correctly. Why!?
The value of the `transform` property works based on objects' width and height and the slight movement talked before will be covered and makes the object center exactly.

Use and enjoy!
An Idea.. If I didn't have to worry about school or work.
Published: 2021-11-05 21:01:15

## The problem 
I used to be an extremely forgetful person I would constantly lose things such as my wallet, my car keys, my pants at highschool when we would have to change for gym, and so many more things over the years. 

## If only there was a tool or application that was specifically designed to help people recover their lost items.

 If I had the free time to fully develop an application the solution to this problem might be where I start.

 This application, lets call it "The Lost And Found" for now would be for people like me who would forget their head if it wasn't attached. At first I would develop it as a web application probably using nuxt js or asp .NET core as those are what I am most comfortable with. The application will be primarily database driven either using mongo db or AWS dynamo db. I would implement a login system either with AWS cognito or develop my own, but be careful not to store user passwords as raw text. The application would function as follows: 

- Users would create an account / login
- At the home screen we will use a Data Table to display entries of Lost items. Each row would have a description, a photo, last seen location, date of posting, and the user who made the post.
- If someone finds this item they can contact the original poster.
- Users with accounts will be able to make lost item posts and add to the table.

### That's it!
- This would be a really simple application that could potentially help a lot of individuals.
- If I developed this and it became popular I would probably like to implement a method of tipping users for finding their item, and take a small percentage of that for revenue. 
- In addition I would probably implement google ads so the site has some other way to make money.
- Lastly If the application was really being used often I would start development for iOS and android.

### That being said
- I'm not sure how big of a market their is for helping people find their lost items, so this would definitely help some people, but I don't see it blowing up to being anything major.


## What do you think about this Idea? Is it something worth developing?
NextJS - (v11) don't use Image components in conjunction with the `export` command.
Tags: nextjs
Published: 2021-11-05 20:58:37

So,

I'm rewriting this post. after I did some more reading and digging, and posting in my online programming community.

Gotta say, I'm pretty heart-broken over the NextJS framework.

With all it's bells an whistles, the stipulate in various places in their doc that the `Image` component is not supported in the `next export` command.

They do give some sort of inklink of a fix, by using custom loaders to solve this issue - but there is now example, no deep dive into how to implement such a solution.

I will try to implement such a solution myself, and will get back to you with some implementation.

Images on an SSR framework seem like such a fundamental thing.
100 Days of Code: React, Python and... Projects
Tags: 100daysofcode, react, python, beginners
Published: 2021-11-05 20:54:58

Recently I have been thrust into the world of webdev as a part of a course in University. It's been a bit of an eye opening experience as it has been my first real foray into Software Engineering in general and seeing my projects start as general confusion and end with an (albeit simple) app with real function has been invigorating. 

I want to *use* this burst of interest to fuel some tangible experience in development.

So I have decided to start a #100daysofcode challenge!

## The Challenge!

So what will I be doing with this challenge? The title says "React, Python and... Projects", so what does that mean?

Right now, my experience is limited to using Python's Flask as a web server delivering HTML to the client. I recently learned a tiny amount of React, and part of that tiny amount is how to hook up the two to function in tandem. I want to use this 100daysofcode to delve deeper on what I can do with this tech stack, as well as additions or changes I can make to the stack.

I should mention that my comfort levels between Python and React/JS couldn't be more lopsided. I have spent over a year practicing coding in Python and I have spent under a month even *looking at* Javascript, let alone React. So a majority of this challenge will be experimenting with and learning React/JS.

So I will post every day regarding at least the following:

1. What I worked on today...
2. Challenges...
3. Plans for tomorrow...
4. General thoughts...

### What I am working on

So what will I actually work on *now*?

I am still in the university course I mentioned above, and there is a relevant extra credit assignment which is to rewrite a previous app's UI from the course using exclusively React-bootstrap modules. I have no experience with Bootstrap whatsoever, so I am pretty excited. I am simultaneously working on a final group project, so if push comes to shove, my update may include a little progress on that. 

### The overall plan

To stay focused, I'll lay out a blueprint for things to work on during this challenge.

1. React-bootstrap app rewrite
2. Django tutorial and a small app utilizing Django and React
3. Reminder app listed [here](https://dev.to/rydwhelchel/discussion-on-learning-memorization-reviewing-and-an-app-to-tie-it-all-together-1e3g), utilizing React and either Flask or Django
4. Who knows?

## In closing

I'm joining in on this challenge to really commit to learning a tech stack that I am not currently that comfortable with. I really am excited to be starting it and delving into the world of React. Also, after some cursory research into Django, I'm pretty excited to learn about that as well!

Please leave comments below, I would love to hear your thoughts on this challenge and any progress I make in it!
Rate my blog out of 10 
Tags: programming, javascript, codenewbie, css
Published: 2021-11-05 20:42:19

I created a portfolio site as well a blog integrated in it to promote my self as a web developer.
I need some feedback in case there are any changes for me to apply on my site for its success.
Thank you.
You can check it out here!
https://www.weptim.com/blog/
Redux the easiest way [Part 2]
Tags: react, redux, javascript
Published: 2021-11-05 19:49:53

So in the 1st part we saw a story for understanding about redux. So what redux basically does is that it takes the data from other screens and those data can afterwards be rendered in other screens without any sort of prop drilling. So, it basically puts up the state to the steroid form. 

### Redux: Three Principles

1. Store: The global state of your application is stored in a store from where the data flows through different screens and  you can have access to them.

2. Actions: The only way to change the state is to emit an action. In the example story of part 1, we saw that, your sister tells Clark to give the pizza then only Clark gives it to her. This 'call for pizza' is actually an action.

3. Reducer: This is basically the function which is fired once an action is emmited. In the story, when your sister calls for the pizza, Clark checks the box and if there is a pizza for her he returns it. This whole thing that Clark is doing is an example of a reducer. This is kind of the brain of the redux.
Getting Started with YOLTv4 for Object Detection in Imagery: Getting Training Data
Tags: imagery, machinelearning, yolt4v, aws
Published: 2021-11-05 19:42:36

This is the second article in a series of tutorials that attempt to fill gaps in this excellent article: [Announcing YOLTv4: Improved Satellite Imagery Object Detection](https://towardsdatascience.com/announcing-yoltv4-improved-satellite-imagery-object-detection-f5091e913fad). The [first article](https://dev.to/spara_50/getting-started-with-yoltv4-for-object-detection-in-imagery-part-1-2ffl), covered building a container to run the model. In this article, I cover how to get the training data.

## Getting Training Data

We need to train the model with a data set. The article points to the [RarePlanes](https://registry.opendata.aws/rareplanes/) data set, which is an open-source dataset provided by In-Q-Tel's CosmiQ Works. The data is stored in AWS bucket and accessible with the AWS CLI. The first step to getting the data is install the AWS client.

### Get AWS CLI

To install on macOS, you can use the [brew](https://brew.sh/) package manager:

```bash
$ brew install awscli
```
or you can download the [GUI installer](https://awscli.amazonaws.com/AWSCLIV2.pkg).

To install on Linux:

```bash
$ curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
$ unzip awscliv2.zip
$ sudo ./aws/install
```

To install on Windows, download the [installer](https://awscli.amazonaws.com/AWSCLIV2.msi) and follow the installation prompts.

### Downloading the training data

The training data doesn't require an AWS account, and you can see the contents of the S3 bucket:

```bash
$ aws s3 ls s3://rareplanes-public/ --no-sign-request

                           PRE real/
                           PRE synthetic/
                           PRE weights/
2020-06-09 08:27:59      20605 LICENSE.txt
```

To download the data set use the `sync` command.

> NOTE: The RarePlanes training data is over 500GB, make sure you have sufficient storage.

```bash
$ aws s3 sync s3://rareplanes-public/ --no-sign-request
```

Depending on the speed of your Internet connection, this can take some time.

## Next step: Training the model

In the next article I'll go through the training steps in the [python notebook](https://github.com/avanetten/yoltv4/blob/master/notebooks/train_test_pipeline.ipynb) in the YOLTv4 repo.
My first project 
Tags: webdev
Published: 2021-11-05 19:17:23

Hello all,
  I have been working to get into the computer science field and with my first project I have created a webpage with html and css. It is a survey site that will collect data to later be used in a data analysis project. The subject is on cannabis. Any criticism will be appreicated as I am a beginner.
The website is Danbdata.com

Thank you !