teleren/devto huggingface dataset:
WTF is the DOM?
Tags: javascript, dom, tutorial, browser
Published: 2020-02-18 14:47:12

---
title: WTF is the DOM?
published: true
description: The DOM stands for Document Object Model. It is JavaScript's interface to the HTML document
tags: JavaScript, DOM, tutorial, browser
series: Get Started with JavaScript in the DOM
---

If you would prefer to watch this post, you can do so with this [community resource lesson on egghead.io](https://egghead.io/lessons/javascript-wtf-is-the-dom?pl=introduction-to-client-side-web-apis-72d0&af=ay44db).

DOM stands for Document Object Model. It's the interface that JavaScript uses to interact with the current HTML page. The DOM is a tree 🌲This means there is a root node that everything is nested under. In this example, you can see that we have a single paragraph tag with Peanut Butter Falcon in this inner text.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>WTF is the DOM?</title>
  </head>
  <body>
    <p>Peanut Butter Falcon</p>
  </body>
</html>
```

You can access this element with document.body.firstElementChild. JavaScript can change the text, appearance, and just about anything you would want to do to this page.

You can see this by adding a script tag to our html.

```html
<script>
  document.body.firstElementChild.innerText = 'Knives Out'
</script>
```

When you save and reload the page in the browser, you'll see that our JavaScript has actually changes the text value in our HTML.
How do you exercise?
Tags: watercooler, exercise, fitness, health
Published: 2020-02-18 21:10:42

---
title: How do you exercise?
published: true
description: Share your fitness secrets
tags: watercooler, exercise, fitness, health
---

As coders, I am curious to see what you all's exercise regime looks like. 

It would be awesome to hear:

1. What workouts do you do?
2. How many days each week and how many hours a day do you exercise?
3. Bonus: *(if you have one)* do you have fitness inspiration(s)? 

Mine:

1. I do bodyweight workout at home because I don't have time to visit commercial gym. My only equipment is a pull-up bar. I do variations of pushups, pull-ups, squats, and different core exercises.

2. I do 6 days a week. I take a break 1 day each week (Sunday) for recovery where I would do light stretching. I do half workout in the morning before work and another half in the evening after work.

3. I have several:
  - [Herschel Walker](https://www.artofmanliness.com/articles/the-herschel-walker-workout/). He was the reason I started calisthenics. This guy is just very good doing everything physical: football, bobsleigh, martial arts, he's done them all. He's famous for doing 2000-3000 pushups *every day*. 💪
  - Many super-athletes from instagram. They are too numerous to list here. I like following street-workouts and circus performers.
Dark Theme for Ubuntu
Tags: ubuntu, beginners
Published: 2020-02-18 21:04:59

Start off here *$ sudo snap install bing-wall*

BingWall does not look different: once installed it lets you download Bing’s featured photo and set it as the desktop background on your Linux desktop.

If you love a fancy and cool wallpaper, this is a must have.
Once installed, launch BingWall to browse through the various Bing images of the day and set them as your desktop wallpaper. 

Enjoy 😊
First Post: Javascript Frameworks
Tags: javascript, frameworks, webdev
Published: 2020-02-18 20:42:21

If I knew things like these existed where you could blog, I would've started a long time ago. Anyways, straight to the point.

I am quite new to web development and after 3 years of getting myself comfortable with front-end development with the fundamental 3 (HTML, CSS and JavaScript), I have been struggling on picking the right framework. I initially chose React, because that was everyone was talking about. Although I got the basics down pretty well, such as props and state, I found some critical parts of it very overwhelming, such as passing state from parent to child.

After doing some research, I was hearing a lot of experienced developers declare that VueJS is friendlier as a framework to learn as a step up in making applications using plain Vanilla JS. I gave VueJS a shot, and so far, I really like it. This whole JavaScript framework stuff makes my head spin, but after giving VueJS a try, I'm taking it and running with it. Best case scenario, VueJS will be a stepping stone to learning React and other future frameworks that are bound to manifest themselves in the future. 

On the side, I picked up Svelte, and as a "framework" (because it's simply a compiler) and I love that even more. Apparently it is ideal to choose just one framework to learn at a time, but I can't resist but play around with Svelte during the weekends on my off-time for example.

I didn't know the world of Javascript was so expansive. It is overwhelming as someone new to web development, but it comes with the territory. 

Nothing to constructive, nor is there a takeaway message for my first post. I just wanted to get my thoughts out and get the ball rolling with this blogging thing.
Why you should write blogposts more often
Tags: beginners, blog, write, post
Published: 2020-02-18 20:19:33

---
title: Why you should write blogposts more often
published: true
description: There are a lot of benefits of writing blogposts here are some that I found when I started doing it.
tags: beginners, blog, write, post
---

Almost two years ago I wrote my first blogpost online, I discovered the amazing platform Dev.to, it looked nice and friendly so I jump in and wrote about the first topic that came to my mind.

I was doing an internship with the oportunity of getting a job after it was done and I tried to call the attention of the people working at the company.

I discovered Dev.to on Twitter and immediately fell in love with the community, everyone was encouraging each other to write and share knowldege no matter the level of expertise, so that was my opportunity.

I wrote a blogpost titled [I'm developing software and I don't Google anymore](https://dev.to/jjaimelr/im-developing-software-and-i-dont-google-any-more-3ecb), suprinsigly the post had a lot of momentum and I was quite nervous about the responses I could get because it is kind of a polemic topic, and responses came...

Tons of feedback came in: a lot of nice comments from people already using Duckduckgo suggesting new features and tools, but I also got feedback that helped me grow and learn: Suggestions about improving my writing (like make it gender neutral), corrections about some statements I made, etc.

The community was really nice and helpful and I learned a lot of things from writing my first blogpost. But wait! There's more...

After I wrote my article I share it with the people at the company I was doing an internship in and I think it helped me to get the job because there were 5 interns at the time and only two were hired. Good companies love to give back and share knowldege and mine is one of them.

Also, I recently got a message from a website that wanted to feature my blogpost that was written 2 years ago! This brings another benefit specially for undergraduate and junior developers looking for a job: Exposure.

In conclusion, writing blogposts brings a lot of benefits to you: Increases your communication skills, gives you exposure, connects you with people of similar interests, provides different perspectives of the topic you are writing on, etc. And for me there's no better platform to write on that here on Dev.to!

What benefits you can tell about writing blogposts that can inspire others to start writing as well?
VSCode tips for productivity
Tags: vscode, development, webdev, productivity
Published: 2020-02-18 19:56:58

Hello all, here are some productivity tips for everyday use.

#Keybindings
![F47A0653-6DA0-42E7-8590-2A6D864566D6_4_5005_c](https://dev-to-uploads.s3.amazonaws.com/i/72c3brmm555gigb8ff1a.jpeg)

###Reload window
![Screenshot 2020-12-30 at 10.14.51](https://dev-to-uploads.s3.amazonaws.com/i/9am5fd5y2wpzvr94pj3d.png) 
For some reason, something that, from time to time, happens is that I get syntax error highlights although nothing is wrong in the code.
For these situations or any of the likes, I've created a key combination to reload the window which acts the same way a reload on an online page would act.

###Uppercase and Lowercase
![Screenshot 2020-12-30 at 10.05.40](https://dev-to-uploads.s3.amazonaws.com/i/35vvzplamh1gdblf10nv.png)

Another one I use a lot, especially when I'm getting classes from _Pascal Case_ into _camel case_, is to __UPPERCASE__ or __lowercase__ an entire string of text. 
I know there's a combination on VS Code for this, however, I like to have my combo.

#Zen mode
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/69z6zbq0fvoyr5ozf5e8.png)
Love it or hate it. I'm not very keen on this one but I do know a couple of people who like it and use it a lot. This feature allows the user to enter the 'flow state' and focus only on the code - it's really good if you know your way around shortcuts. 
You can access the zen mode through the command palette doing __cmd + shift + p__ and write __zen mode__. To exit just repeat the steps.

#Incredible long files
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gzlvd6e3goe8oj4e58jr.png)
Fortunately, VSCode allows us to search inside our files in a friendlier way than just scrolling through 1000 lines of code.
By doing __cmd + p__ and typing __@__, we get a list of the current file organized methods and properties that we can select and navigate directly into. If you want an in-depth list, you can use the __@:__

#Go to line
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k0q34ajq51cjou9tjsbo.png)
We can also use the go-to command by doing __cmd + p__ and typing __:__
This one is pretty easy and we do have a keybinding for it but I find this way faster and easier on the brain.

###Too much info?
If you find it hard to memorize these commands just "ask for help" by doing __cmd + p__ and typing __?__. You'll get a full list of the available commands.

That's all folks, I hope you find my tips helpful.
Do you have any productivity tips to share? Leave it on the comments, I'll be glad to check them out!

Cover photo by Hello I'm Nik 🍌 on Unsplash - Thanks!
Now GitHub Is Super Popular ???
Tags: github
Published: 2020-02-18 19:37:30

I just saw this on @mrdoob's tweet.

{% twitter 1229489229425590273 %}


To me, this is a kind of interesting thing.

1. GitHub is for social coding but spammers are interested in spreading their *****.

2. How will GitHub(Microsoft) handle this kind of issue?

Especially, I'm curious about No.2. 
I don't know how spammers open a pull request but I guess they don't do that manually since GitHub has a nice API.
In addition, there is a CLI tool that allows us to create a pull request. Probably, the spammers need to write a simple shell script to post a link.

{% github cli/cli %}

What I hope is that this won't affect GitHub
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2020-02-18 19:37:13

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@rodiongork added their thoughts to the **[Work Culture Toxicity in Tech](https://dev.to/nprimak/work-culture-toxicity-in-tech-2jn2)**:
{% devcomment lfcd %}

@elmuerte shared a lighthearted image/metaphor in **[Achieving 100% code coverage will make you a better developer. Seriously.](https://dev.to/d_ir/achieving-100-code-coverage-will-make-you-a-better-developer-seriously-30fc)**:
{% devcomment ldaf %}

@pietrucha talks about the value of a well-structured course in **[Going down the youtube tech guru hole or how you can spot scam artists](https://dev.to/lampewebdev/going-down-the-youtube-tech-guru-hole-or-how-you-can-spot-scam-artists-208e)**:
{% devcomment lhkh %}

@integerman shares their approach and mindset to continued growth in response to **[What's on Your Personal Development Plan?](https://dev.to/helenanders26/what-s-on-your-personal-development-plan-357k)**:
{% devcomment ljbo %}

@taufik_nurrohman offers an additional method in **[Add dark mode to your website with just a few lines of code](https://dev.to/albertomontalesi/add-dark-mode-to-your-website-with-just-a-few-lines-of-code-5baf)**:
{% devcomment lig8 %}

See you next week for more great comments ✌
Data Infrastructure Automation For Private SaaS At Snowplow - Episode 120
Published: 2020-02-18 19:36:34

<p>One of the biggest challenges in building reliable platforms for processing event pipelines is managing the underlying infrastructure. At Snowplow Analytics the complexity is compounded by the need to manage multiple instances of their platform across customer environments. In this episode Josh Beemster, the technical operations lead at Snowplow, explains how they manage automation, deployment, monitoring, scaling, and maintenance of their streaming analytics pipeline for event data. He also shares the challenges they face in supporting multiple cloud environments and the need to integrate with existing customer systems. If you are daunted by the needs of your data infrastructure then it's worth listening to how Josh and his team are approaching the problem.</p><p><a href='https://www.dataengineeringpodcast.com/snowplow-data-infrastructure-automation-episode-120/'>Listen Now!</a></p>
Character Counter
Tags: replit, java
Published: 2020-02-18 19:27:52

Started working on a couple new Java projects and wanted to share one of them here. This one is for a project to count the characters for another project I am doing for school. So basically I have a school project that only allows for the output to have 60 characters per line. For each project with multiple print statements this is a pain. I decided hey I am on the 5th project and I am doing the same thing. I am tired of counting manually so why not create a program that counts for you.

So, I created this character counter that counts the characters in a string and prints each character and the character number. It then returns each character in the string with the number on the side and then finally the number of characters in the string. It also tells me if I went over my 60 character limit. 

The program does what it is supposed to but I want to add more to it to make it truly special. I plan on adding color to the console version and then maybe give it a GUI. 

If you see any problem with my code let me know because I do want to get better with Java and programming in general.

読むのありがとうございます。Thanks for reading. 

{% replit @sonAndrew/CharacterCounter %}
APIs, Sustainable Open Source and The Async Web With Tom Christie
Published: 2020-02-18 19:21:59

<p>Tom Christie is probably best known as the creator of Django REST Framework, but his contributions to the state the web in Python extend well beyond that. In this episode he shares his story of getting involved in web development, his work on various projects to power the asynchronous web in Python, and his efforts to make his open source contributions sustainable. This was an excellent conversation about the state of asynchronous frameworks for Python and the challenges of making a career out of open source.</p><p><a href='https://www.pythonpodcast.com/apis-sustainable-open-source-and-the-async-web-with-tom-christie/'>Listen Now!</a></p>
Getting started with our community hangouts
Tags: react, microservices
Published: 2020-02-18 18:58:50

This year we received so many cool proposals to our call for papers that we had to add a second track on day 2 of the conference. 

Even so, we felt that there were many other proposals to our call for papers that deserved a chance to present to a wide audience and this is why we invited them to present live on our youtube channel. First person to accept was Florian Rappl who talked to us about Microfrontends with React so if you've ever wondered what Microfrontends are all about and how would you make them work with react. Make sure to check the video below   👇👇

{% youtube kG7gIF16cOk %}

And in case you missed it, Sibelius Seraphini gave a very cool demo of Relay with Concurrent Mode last week you can watch below.

{% youtube dAazdich_qg %}

He will also be giving a [workshop on the topic](https://www.react-europe.org/#slot-2154-workshop-build-great-user-experiences-with-concurrent-mode-suspense-with-relay-may-16th-).


We will have many cool live streams with speakers coming to the conference and people who submitted talks to our call for papers, you can hit the subscribe button on our youtube channel to never miss a new live stream.

If you have a cool project you would like to demo on our youtube channel to our more than 17k subscribers, you can DM us on here or on twitter https://twitter.com/reacteurope
Code Smell: Shotgun Surgery
Tags: codesmells, refactorit, webdev, productivity
Published: 2020-02-18 18:49:07

If nothing else, the name of this code smell is one of the more entertaining names. The shotgun surgery code smell is one of the code smells that often overlaps with other code smells, particularly duplicate code. But it can still pop up and knowing about it and looking for it in your code will help you to keep your code more easily maintained. This is ESPECIALLY true of code bases that suffer from classes and functions that are too large.

Remember the part of your system everyone is afraid to touch? You can almost guarantee it has issues with shotgun surgery. In fact, the shotgun surgery code smell is at the root of that issue of “you change something here and it breaks something over there” which has possibly caused more [keyboard-related violence](https://www.youtube.com/watch?v=wwM3cUJKkuE) than just about anything else.

To put it simply, shotgun surgery is when you have to go to multiple places in your codebase and make the same change. Let’s look at a simplified example:

![image](https://miro.medium.com/max/615/1*dHw19POxCv0Hn2nzKXC86A.png?)

This savings class doesn’t look too bad at first glance, but the issue here is the proliferation of very similar code. Specifically, that minimum balance check.

this.balance < MIN_BALANCE

We’re doing that in three places. If something about that ever needs to change, then we’ll have to make changes in three places. Notice that all the code is not identical in each case, but the core logic is identical.

So let’s look at one possible refactoring (you may come up with even better ones).

![image](https://miro.medium.com/max/613/1*BcKDLSK3y8X5mCYOlrYzqw.png?)

Here we have extracted the core logic of the check, and moved it to its own method. Personally, this is one of my favorite refactorings, to extract the boolean condition in an if into its own method, because then I can give that ugly boolean logic a nice name. Since we have gathered the duplicate logic together, we now have just one place to make changes if something about the minimum balance calculation needs to change.

We could certainly go farther and look for even more similar logic extraction. But we’ll leave our example like this.

Of course this is simple when the similar logic is gathered all together like this and obviously duplicated. In a real code base, this may be scattered around a much larger class, or it may even be in multiple classes, and even in different parts of the code base. But the lesson still stands. When we are dealing with checking the minimum balance, that should be done in ONE place, not three, or five, or ten. That way changes are easy to implement.

Signup for my newsletter at [here.](https://is-tracking-link-api-prod.appspot.com/api/v1/click/4616255200034816/5570275139911680)
Visit Us: [thinkster.io](https://thinkster.io/) | Facebook: @gothinkster | Twitter: @GoThinkster
Automation in a lazy world
Tags: aws, docker, terraform, automation
Published: 2020-02-18 18:08:39

My roommate is an accountant and she loves cooking. Her menu is out of this world. On the other hand, I am “lazy” and I always find an easy way out to solve problems. I don’t like washing, so I got a washing machine 😁 I love AUTOMATION. 

Almost everything that I handle on a daily basis require automation. 

Serverless technologies is my go-to service. I love AWS Fargate. It’s computing power orchestrate managed resources, I don’t need to configure components manually. Fargate CLI gives the life to deployment. One command deploy an entire infrastructure.

The juicy part happens when I include an integration with Terraform/CloudFormation. The entire infrastructure is build from ground up with a single command.

Docker is the backbone of any software no matter what the environment it runs on. Package your code and let it get shipped into a container 💻 

Tech guys are professionally “lazy” 🤔 We rather automate stuff and get working on other cool projects. 

My roommate is now used to my personality. Think and breath in code 🤗

Share your experience with automation 
👇👇

#cod _n_run
#my_is_protocol 
❤️❤️❤️
SVG doc generator based on sprites.svg
Tags: svg, generator, webpack, javascript
Published: 2020-02-18 17:48:17

If some of you need a tool to generate SVG doc/demo of icons which are included in sprites.svg file I've created webpack plugin to achieve this. 

You can install it via NPM and take a look on source code in my [github](https://github.com/Fasosnql/svg-doc-gen).

It generates for you demo html with svg icons and variables scss|less|css based on your svg sprites file.

NPM link: [https://www.npmjs.com/package/svg-doc-gen](https://www.npmjs.com/package/svg-doc-gen)
Using :wq in Sublime Text 3
Tags: productivity, vim
Published: 2020-02-18 17:39:50

I wanted to add proper `:wq` to Sublime Text 3 but did not like the existing solutions as they significantly changed my Sublime Text experience.

I used `Edit Command Palette` installed through `Install Package` command.  Then added the following commands for my user - 

```
[
    {
        "caption": ":q - Close",
        "command": "close"
    },
    {
        "caption": ":wq - Save and Close",
        "command": "save_and_close"
      }
]
```

For the second command (save and close) I had to create a custom plugin.  To do this click `Tools > Developer > New Plugin` and create this snippet of python as a plugin - 

```
import sublime
import sublime_plugin


class SaveAndClose(sublime_plugin.TextCommand):
  def run(self, edit):
    self.view.run_command('save')
    self.view.window().run_command('close')
```

And it works after that!