teleren/devto huggingface dataset:
What exactly is the DOM?!
Tags: beginners, webdev, javascript
Published: 2019-03-04 00:28:53

---
title: What exactly is the DOM?!
published: true
description: A simple description of the the document object modifier (the DOM) and what it does.
tags: beginners, webdev, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jg58whfwbp4cvkpyh7d4.jpg
---

The DOM. When I was first learning to code at my bootcamp I heard this word all the time but I never exactly knew what it meant. Was it the HTML that I write? Was it 'view source' that I accidentally sometimes clicked on when I meant to inspect elements? I never really understood. And to be totally honest, it took me a while to figure out exactly what it is.

According to [W3C](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html), the document object model (DOM) is an *"application programming interface for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated".*

Whaaaaat? In simple terms, the DOM is a representation of your HTML to the browser and allows you to manipulate the page.

![Visual representation of the DOM tree](http://i67.tinypic.com/2nqegt2.jpg)

So why is it often referred to as a tree? This is because the DOM starts with a single parent item that branches out into children items. These children items can also branch out into their own smaller trees like what you see in the photo above.

I've read on a few sites that what you see in DevTools is the visual representation of the DOM, and while it's extremely close, it isn't exactly right. DevTools will include some additional information (like pseudo classes) that are not technically part of the DOM. If you're a visual person like myself, this is the closest portrayal of the DOM in our browser that we can see.

But hold up a second -- doesn't that mean the DOM is the same thing as the HTML we're writing? Nope. 

Have you ever accidentally left out a required element and had the browser fix it for you? You'll see that element in the DOM even though you've left it out of your HTML. The DOM will also be different than your HTML if you're manipulating the DOM through JavaScript.

With JavaScript you can do things like edit the CSS of your page, add event listeners, change node attributes and much more. These are all changing the DOM from what you had originally written in your HTML. 

To wrap it all up, while the DOM sounds like this super intimidating thing, it's actually how browsers determine what is rendered on our page and, through JavaScript, is how we can manipulate those elements that are rendered.

--- 


Thank you so much for reading my article about the DOM! Be sure to follow me on [Twitter](https://twitter.com/karaluton) for lots of tweets about tech, and if I'm being honest, lots of tweets about dogs too. Feel free to comment below or tweet me with any questions you may have.
Command Design Pattern [Behavioral]
Tags: blog, concepts, designpattern, designpatterns
Published: 2019-03-06 03:34:46

---
title: Command Design Pattern [Behavioral]
published: true
tags: blog,concepts,Design Pattern,Design Patterns
canonical_url: https://itscoderslife.wordpress.com/2019/03/04/command-design-pattern-behavioral/
---

The command pattern encapsulates method invocation in an object. It packages the requests, the receiver, and all the details needed to execute this request into a command object.

The command object has usually only one method, execute. We can then use the command object or pass it to other components in the system.

Callers trigger the execute method on the command object to invoke the actions on the receiver.

The command pattern is useful if you want to decouple components that require specific functionality from the method invocation details and the object which actually executes the actions.

The command pattern can be used to implement support for undo operations. Another frequent application of the pattern is creating macros.

A macro is a command which executes multiple commands on different receiver objects. Now let’s see how the command pattern works using the sequence diagram.

![command.jpg](https://itscoderslife.files.wordpress.com/2019/02/command.jpg?w=656)First, the client creates the command object. The command object packages the receiver and the set of actions required to execute a given request. Next, the client sets the command on the invoker by calling the invoker’s setCommand method. When the invoker needs to perform the given request, it simply invokes the command object’s execute method. After that, the invoker may discard the command or it can keep it for further use. Calling the command object’s execute method causes the invocation of the actions on the receiver.

> The command design pattern encapsulates a request into an object. Invokers can call this command object to perform a request without knowing the details required to performthat operation or the receiver that will execute the operation.

1. Define an interface with a method signature like `execute()`.
2. Create derived classes that encapsulate subset of a “receiver” object, the method to invoke and the arguments to pass.
3. Instantiate a Command object for each deferred execution request.
4. Pass the Command object from the client to the invoker.
5. The invoker decides when to perform action – `execute()`.

Summary: The command encapsulates method invocation, including all the details needed to perform the action. Callers can trigger the action at a later time without knowing the receiver or the actions that get executed behind the scenes. With this pattern, we decoupled the object that makes the request from the object that actually receives and executes the request. The command pattern is easy to implement.

Disadvantage: Exposing details of the receiver object or any information needed to perform the action to the component that is using the command object. You should also protect your command objects from concurrent access, as they may be used by multiple components and from different threads.
Wrapping Gatsby Pages in a Layout Component
Tags: gatsby, react, beginners
Published: 2019-03-04 16:50:43

---
title: Wrapping Gatsby Pages in a Layout Component
description: In this video, we learn how to use a Layout component to share common sections and styling between pages.
canonical_url: https://michaeluloth.com/gatsby-layout-component/
tags: gatsby, react, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kffi22qki935i0jtuysj.png
series: Up & Running with Gatsby
published: true
---

This is the sixth video in our [beginner series](https://www.youtube.com/watch?v=jAa1wh5ATm0&list=PLHBEcHVSROXQQhXpNhmiVKKcw72Cc0V-U) exploring GatsbyJS and how to use it to easily build performant apps and websites.

In this video, we learn how to use a Layout component to share common sections and styling between pages.

Check out the video below or [view the entire playlist](https://www.youtube.com/watch?v=jAa1wh5ATm0&list=PLHBEcHVSROXQQhXpNhmiVKKcw72Cc0V-U) on YouTube. 

Enjoy! 🎉📺

{% youtube dvorpyrTI2g %}
Pass cookies with axios or fetch requests
Tags: cookies, webdev, fetch, javascript
Published: 2019-03-06 20:50:01

---
title: Pass cookies with axios or fetch requests
published: true
tags: cookies, webdev, fetch, javascript
canonical_url: https://codewithhugo.com/pass-cookies-axios-fetch-requests/
---

When sending requests from client-side JavaScript, by default cookies are not passed.

> By default, fetch won’t send or receive any cookies from the server, resulting in unauthenticated requests [https://developer.mozilla.org/en-US/docs/Web/API/Fetch\_API/Using\_Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

Two JavaScript HTTP clients I use are [axios](https://github.com/axios/axios), a “Promise based HTTP client for the browser and Node.js” and the fetch API (see [Fetch API on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)).

## Pass cookies with requests in axios

In axios, to enable passing of cookies, we use the `withCredentials: true` option.

Which means we can create a new axios instance with `withCredentials` enabled:

```js
const transport = axios.create({
  withCredentials: true
})

transport
  .get('/cookie-auth-protected-route')
  .then(res => res.data)
  .catch(err => { /* not hit since no 401 */ })

```

It’s also possible to set it in the request options:

```js
axios
  .get(
    '/cookie-auth-protected-route',
    { withCredentials: true }
  )
  .then(res => res.data)
  .catch(err => { /* not hit since no 401 */ })

```

Or override the global defaults:

```js
axios.defaults.withCredentials = true

```

## Pass cookies with requests using fetch

The equivalent with `fetch` is to set the `credentials: 'include'` or `credentials: 'same-origin'` option when sending the request:

```js
fetch(
  '/cookie-auth-protected-route',
  { credentials: 'include' } // could also try 'same-origin'
).then(res => {
  if (res.ok) return res.json()
  // not hit since no 401
)

```

[Download free do whatever you want high-resolution photos from Alex](https://unsplash.com/@worthyofelegance?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge "Download free do whatever you want high-resolution photos from Alex")
Mental Health Resources for developers
Tags: mentalhealth, health, depression, anxiety
Published: 2019-03-03 23:59:51

---
title: Mental Health Resources for developers
published: true
description: A website aiming to help developers (and non developers) check their mental health, find help, and learn about how to get better.
tags: mental health, health, depression, anxiety
---

Here's a project I began a few weeks ago. It's a website to help developers improve their mental health, and find help if they're currently depressed or anxious. 

Depression and anxiety are taboo topics. There's hardly any posts mentioning those terms here. Yet 300 million people around the world experience depression. I assume some of those are developers. I assume some might even be here.

To begin you can take the [Burns Depression Test](https://mental-health-resources.herokuapp.com/burns-depression-checklist). It's a quick way to answer 25 questions and see how bad (or good) you're doing. If you're moderately or severely depressed, please ask for help. 

There's a link in the [home page](https://mental-health-resources.herokuapp.com) to a podcast episode called "How to ask for help". There's also a [list of books](https://mental-health-resources.herokuapp.com/books-about-depression) I've found helpful for dealing with my own depression.

The project is **half baked** and not finished at all. I don't even have a domain name yet. But I'd rather share it how, than wait until it's finished. 

If you need help, write me. I'll see what I can do.
SignalR core python client (III): Streamming
Tags: core, python, stream, signalr
Published: 2019-03-03 22:06:55

---
title: SignalR core python client (III): Streamming
published: true
description: Signalr core streamming implementation
tags: core, python, stream, signalr
series: SignalR core python client
cover_image: https://www.campusmvp.es/recursos/image.axd?picture=banner-asp-net-core-750x300.png
---

Sunday's hangover,  so I added a new functionality  to my singalrcore library, as usual it works with the [microsoft example](https://docs.microsoft.com/es-es/aspnet/core/signalr/streaming?view=aspnetcore-2.2) and i'll try making the syntax closest thing to javascript as possible.

## Setup

On [Microsoft's example](https://github.com/aspnet/Docs/blob/master/aspnetcore/signalr/streaming/sample/Hubs/StreamHub.cs) there is a cancellation token on stream function on the server, this example was done without this parameter on the function, so if you want work with the code below just delete this params on the counter function.
 ![Code function](https://thepracticaldev.s3.amazonaws.com/i/4end45w6p5ichps4hqhi.png)

## Tiny example

### Start and open connection

```python
hub_connection = HubConnection(server_url)
hub_connection.build()
hub_connection.start()
```

### Open stream

```python
hub_connection.stream(
    "Counter",
    [10, 500],
    lambda x: print("next callback: ", x),
    lambda x: print("complete  callback", x),
    lambda x: print("error  callback", x))
```

Stream function has five parameters, last three are callback function matching with [javascripts suscribe object](https://github.com/aspnet/Docs/blob/master/aspnetcore/signalr/streaming/sample/wwwroot/ts/stream.ts)
![Javascript example stream](https://thepracticaldev.s3.amazonaws.com/i/2vdrjcuozfuehsjbzhvs.png)

[Fully example](https://github.com/mandrewcito/signalrcore/blob/master/test/stream.py)

## ToDo 
* message pack
* Auth (now only working by querystring negotiate)

## Links
[Github](https://github.com/mandrewcito/signalrcore)
[Pypi](https://pypi.org/project/signalrcore/)

I'm trying to build this library with simplest way possible, so if you think that there is a better way to do it, leave a comment. Asap i'll edit github library contribute section, so any contribution is welcommed.


Thank you for reading, and write any thought below :D
Dark (lang) - removing accidental complexity of programming
Tags: language, functional, typing, deployment
Published: 2019-03-03 15:47:22

---
title: Dark (lang) - removing accidental complexity of programming
published: true
description: a new programming language + everything needed to run web apps
tags: language, functional, typing, deployment
series: Dark lang
---

So [Dark](https://darklang.com/) is a programming language or maybe more precisely: an integrated ecosystem for writing and running code. Its features:

* a language
* a structured (?) editor
* a testing framework
* feature flags
* a database that is easy to use
* API-interface wrappers
* has built-in version control that semantically understands your code
* has a hosting platform (that you pay for I believe)
* a logging/error reporting system

And more?

They haven't publicly given many details, just one [blog post](https://medium.com/darklang/the-design-of-dark-59f5d38e52d2) and their [homepage](https://darklang.com/).

Some quotes:

> We want to make it possible to build a complete scalable app in an afternoon. We’ll make it 100x easier to build applications and bring the ability to write software to a billion people.

and

> We’re creating a new programming language, tightly integrated with an editor, compiler and PaaS, to allow engineers to build distributed applications using high-level primitives. We abstract away individual machines and low-level distributed systems code to:
> * Generate and run scalable infrastructure for you.
> * Use APIs as easily as if they were functions.
> * Remove the deployment step entirely.

I remember reading somewhere that someone was already using Dark for a project (as a beta tester) but can't find that anymore.

I really hope this turns out to be awesome 😎

Update (2019-04-11) I wrote [another post on Dark](https://dev.to/nielsbom/dark-lang-built-with-ocaml-reasonml-bucklescript-inspired-by-elm-1o5e)
How to reliable copy files from android to pc 
Tags: android, mtp
Published: 2019-03-03 19:43:55

---
title: How to reliable copy files from android to pc 
published: true
description: mtp is unreliable and slow, what really enables to copy files reliable from android to pc is adb
tags: #android, #mtp
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2w5zixemc5kku176t4iw.jpg
---
can't belive that we are sending persons to the moon but its not possible to reliable copy files from android to the pc.

the mtp protocol is a real s**t, files are not there which i know that they are there. often my workaround was to copy the file to the external sd and connect the sd via a cardreader to the pc. also tried apps like SD Scanner which refreshes the file database(?) so the files are correctly displayed on the pc.


what really helped was installing `adb`, enabling the developer mode and simply use the `pull` function to copy the whole directory.

```
adb pull /storage/emulated/0
```

links:
- cover image by Pixabay https://www.pexels.com/photo/man-person-face-portrait-34667/
- sd scanner https://f-droid.org/en/packages/com.gmail.jerickson314.sdscanner/
Super fast Electron builds with CircleCI 🚀
Tags: devops, electron, circleci
Published: 2019-03-03 18:01:54

---
cover_image: https://thepracticaldev.s3.amazonaws.com/i/by80ff9hr2jng0q48myq.png
title: Super fast Electron builds with CircleCI 🚀
published: true
description: My experience after switching from Travis to CircleCI.
tags: devops, electron, circleci
---


Recently I switched from [Travis](https://travis-ci.org) to [CircleCI](http://circleci.com), since I had some problems with getting my [Travis stages](https://docs.travis-ci.com/user/build-stages/) working accurate. The results was overwhelming.

# Simple Docker configuration
Since CircleCI jobs can [run in Docker containers](https://circleci.com/docs/2.0/executor-types/#using-docker), it's get really simple to configure [electron-builder multi build](https://www.electron.build/multi-platform-build#sample-travisyml-to-build-electron-app-for-macos-linux-and-windows):

```
# Travis
script:
  - |
    if [ "$TRAVIS_OS_NAME" == "linux" ]; then
      docker run --rm \
        --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_') \
        -v ${PWD}:/project \
        -v ~/.cache/electron:/root/.cache/electron \
        -v ~/.cache/electron-builder:/root/.cache/electron-builder \
        electronuserland/builder:wine \
        /bin/bash -c "yarn --link-duplicates --pure-lockfile && yarn release --linux --win"
     fi

# CircleCI
deploy-linux:
  docker:
    - image: electronuserland/builder:wine
  steps:
    - run: yarn --link-duplicates --pure-lockfile
    - run: yarn release --linux --win
```
The Circle config is much easier to read and maintain, since everything is based on Docker you don't need to pass environment variables you want to use in the container.

# Almighty debug support
With Docker you can always run the jobs with the same environment locally, which makes everything easier to debug. If that's not enough, you can always [SSH into the build container](https://circleci.com/docs/2.0/ssh-access-jobs/).

# Super fast
For 4 minutes after a push commit I've the response from
* Linting
* React unit testing
* Electron unit testing
* Spectron e2e testing

Ten minutes later I'll also have Linux and MacOS builds deployed and ready to download. No more queues (at least yet) and no more waiting. Since a CI environment is supposed to support me as a developer I think it's vital that the feedback is quick and that I never have to wait for over 5-10 minutes until I have the response. A big plus is that I don't have to see the pride flag in my builds any more. 🥳

[To see my whole Circle config, you can check here.](https://github.com/protonmail-desktop/application/blob/7289770d44f8f8acdda69f878643d354928e406e/.circleci/config.yml)
How do you Hire a Sr. Engineer that has much more experience than you?
Tags: discuss, help, hiring, interview
Published: 2019-03-03 17:31:06

---
title: How do you Hire a Sr. Engineer that has much more experience than you?
published: true
description: Our Sr. Engineer left the company and we need to fill his position. For now, I'm the sole engineer on the team and I've been at the company a little under a year.
tags: discuss, help, hiring, interview
---

Hey Dev.to,

I need your help! Our Sr. Engineer left and I'm in charge of running the technical interviews for the position we need to fill. It's daunting, to say the least, but also a good opportunity to lean on the community so that this may help someone in the future!

Here are some questions swirling around in my head:

* If you were tasked with hiring an engineer significantly more senior than you, how would you approach the interview? 
* How do you assess their technical ability? 
* Do you do pair programming? 
* Or is it more important that you work well together and less about technical ability?

There's a whole different discussion on the interview process in general, but a few things that I want to accomplish with these interviews are:

* Being mindful of the candidates time(trying to keep the tech interview to an hour or less)
* Divulging the agenda up front, so that there are no surprises, or very few
* Talking through our engineering roadmap that I recently created with goals we're working towards
* Vet their technical and interpersonal skills
* Get a sense of their ego, or willingness to take direction from someone less experienced(at first anyway)
* Their interest in mentorship and leadership

I appreciate any insight that you may provide. Thanks a million!
Minemeld installation, continued
Tags: homelab, networksecurity, vmware
Published: 2021-12-04 19:20:43

---
title: Minemeld installation, continued
published: true
date: 2019-03-03 17:04:00 UTC
tags: HomeLab,NetworkSecurity,VMWare
canonical_url: https://blog.engyak.co/2019/03/minemeld-installation-continued.html
---

I cheated/pivoted a little bit - decided to simulate a bit more closely what I'd be using at work. I bootstrapped a CentOS VM and followed the instructions in: [https://github.com/PaloAltoNetworks/minemeld-ansible](https://github.com/PaloAltoNetworks/minemeld-ansible)

```
$ sudo yum install -y wget git gcc python-devel libffi-devel openssl-devel zlib-dev sqlite-devel bzip2-devel$ wget https://bootstrap.pypa.io/get-pip.py$ sudo -H python get-pip.py$ sudo -H pip install ansible$ git clone https://github.com/PaloAltoNetworks/minemeld-ansible.git$ cd minemeld-ansible$ ansible-playbook -K -i 127.0.0.1, local.yml$ usermod -a -G minemeld # add your user to minemeld group, useful for development
```
  
Everything worked fine - I had to retry the playbook once to get it to run, but the install playbook even enabled/started the requisite services. I'd highly recommend this approach over the OVA - it took me ~ 30 minutes in total to get Minemeld up and running in my lab, including the CentOS ISO download.  
  
Anyone else who is doing this may find it useful to know that the usermod above doesn't grant you login access to minemeld - it has its own credential set. Default credentials are _admin| **minemeld.** _  
  
My next objective will be to integrate with my lab firewall using EDLs. Here's a preview of it running without any custom miners - eventually I'd like to mine NSX-T's manager to share object groups between systems.  
  
[![](https://2.bp.blogspot.com/-wf-Uyx3Z5eQ/XHwJEINyStI/AAAAAAAAAhE/VTVlM_Ex0JwijlObEqoFxchwL7y2ppZcQCLcBGAs/s1600/minemeld-running.PNG)](https://2.bp.blogspot.com/-wf-Uyx3Z5eQ/XHwJEINyStI/AAAAAAAAAhE/VTVlM_Ex0JwijlObEqoFxchwL7y2ppZcQCLcBGAs/s1600/minemeld-running.PNG)