teleren/devto huggingface dataset:
Reagent 101 / pt. 1 / Hiccup
Tags: clojure, tutorial, react, javascript
Published: 2020-07-06 17:37:55

Reagent is a light-weight interface for building React components using Clojure. Here is how you start any Reagent app.

1. Require the relevant reagent modules - namely `reagent.dom` and `reagent.core`. This is similar to what we did in JS land when we imported from `react` and `react-dom`.

2. Mount a component to a target `div` - typically with an id of `root` or `app`.

```js
// JS
import React from "react";
import ReactDOM from "react-dom";
import App from "./App"

ReactDOM.render(<App />, document.getElementById("root");
```

```clojure
;; Clojure
(ns demo.core
  (:require
   [reagent.dom :as rdom]
   [reagent.core :as r]
   [demo.core.app :refer [app-view]]
))

(defn render! []
  (when-let [element
(js/document.getElementById "root")]
    (rdom/render [app-view] element)))
```

Do you see the similarity in form and naming convention?

Now you obviously need to define your actual component. Currently, `<App/>` nor `app-view` refers to anything. We already know what a React component looks like in JS land. What do you think that looks like in Reagent land?

```js
// stateful
import React, { Component } from "react";

class App extends Component  {
  constructor(props) {
    super(props)
    // ..
  }
  render() {
    // ..
  }
}

// stateless
import React from "react";
const App = (props) => {
  // ..
  return (
  // ..
  )
}
```

> In React, there are 2 canonical forms of defining a component: stateful and stateless. In Reagent, there are 3.

We call them `Form 1`, `Form 2`, and `Form 3`. I know what you're thinking! Is there a better name? Not that I know of unfortunately.

Before we get into those 3 forms, we need to talk about something even more important: `Hiccup`.

### What is Hiccup?

Hiccup is a Clojure library that enables us to represent HTML using Clojure vectors. In HTML and JSX, you have tags `<>`. In Clojure, you have vectors `[]`.

Here are some examples. I have the Hiccup syntax mapped to HTML.

```clojure
;; Hiccup
[:h1 "Hello, world!"]

[:ul
  [:li "First"]
  [:li "Second"]
  [:li "Third"]]
```

```html
<!--HTML-->
<h1>Hello, world!</h1>

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
```

Ok, what about attributes? For those, we use a map. One benefit you get from using Hiccup instead of JSX is that prop names stay the same. Use `:class` not `className`, `:text-align` not `textAlign`, and `on-click` not `onClick`.

```clojure
;; Hiccup
[:div { :class "main" }
   :h1 { :style { :color "red" :text-align "center" } } "Hello, world!]
```

```html
<!--HTML-->
<div class="main">
  <h1 style="color:red; text-align: center">Hello, world!</h1>
</div>
```

Now that we know how to define basic UI using Hiccup, we are ready to talk about the 3 forms of defining Reagent components. And we will move that discussion to a future post.

Hic! Hic! cup... I need a cup of water.

I'm out.

PS: [part 2](https://dev.to/icncsx/reagent-101-pt-2-three-forms-5c0o) of the Reagent 101 series is out.

Warmly,
DH
How to download Instagram posts using python.
Tags: python, productivity, tutorial, beginners
Published: 2020-07-06 17:36:55

##Hello Everyone!##

In this post I will show you guys how to download posts from instagram using Command prompt of a machine with python installed

---

Install the **instaloader** library. We can do this using the Python Package installer **pip**.

```
$ pip install instaloader
```

--------------

[1] To download all pictures and videos of a profile, as well as the profile picture of a **public** account, do

```
$ instaloader thepracticaldev
```
You can also pass a list of profiles by entering the profiles inside [].

---

[2] To download all pictures and videos of a profile, as well as the profile picture of a **private** account, do

```
$ instaloader --login=<your-username> thepracticaldev
```
You can also pass a list of profiles by entering the profiles inside []. You can only download the pictures and videos from the profiles you follow on instagram.

---

[3] To download a **single post**, do

```
$ instaloader -- -<post’s-shortcode>
$ instaloader -- -CByYyUMAhhY
```

---
[4] To download current stories, feed, saved contents and hashtags, do

```
$ instaloader --login=<your-username> :stories
$ instaloader --login=<your-username> :feed
$ instaloader --login=<your-username> :saved
$ instaloader --login=<your-username> "#hashtag"
```

---
**Leave your queries in the comment section**

Library Creator: https://github.com/instaloader/instaloader
rails db:setup fails with syntax error
Published: 2020-07-06 17:21:52

I am trying to setup dev.to code on my redhat 8.2. New to web development.

Followed https://docs.dev.to/installation/linux/ to setup dev.to code on my linux box. But, I ended up with below error.

[dev2@localhost dev.to]$ rails db:setup
rails aborted!
SyntaxError: /home/dev2/workarea/src/dev.to/app/liquid_tags/spotify_tag.rb:40: syntax error, unexpected ']'
...rsed_uri.string.split(":")[1..].unshift("https://open.spotif...


What could be the reason?

Thanks in advance.
How to use npm audit with Continuous Integration in 3 simple steps
Tags: javascript, npm, security, audit
Published: 2020-07-06 17:18:48

---
title: How to use npm audit with Continuous Integration in 3 simple steps
published: true
description: How frequently do you check for security vulnerabilities in your npm dependencies? I'll show you how to do it automatically for every single commit within your Continuous Integration.
tags: #javascript #npm #security #audit
cover_image: https://media-exp1.licdn.com/dms/image/C4D12AQF89tAznrEA0Q/article-cover_image-shrink_720_1280/0?e=1599696000&v=beta&t=gRW-gEBOKULHO7YtSTtQDs9TtshjFFtMM-F_ZP4knXA
---

https://www.linkedin.com/pulse/how-use-npm-audit-continuous-integration-3-simple-steps-gorej/
Limit pointer-events to graphic elements
Tags: a11y, css
Published: 2020-07-06 17:07:43

---
title: Limit pointer-events to graphic elements
published: true
description: Pointer-events specifies how an element will interact with the pointer, but its use must be cautious and limited to avoid accessibility and usability issues.
tags: a11y,CSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0zuv4aov1ttdjuenc3ps.png
series: Web Accessibility with CSS
---

[`pointer-events` is a property that specifies under what circumstances an element can be the target of pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events). It is intended for graphic elements, but it can be used on any HTML element.

For usability and accessibility purposes, we need to be careful about how we use it. **`pointer-events` may be interesting for graphical or presentational elements, but it should be avoided on interactive HTML elements**.

When used with HTML elements in general, it is helpful in some cases like if you want to place decoration elements on top of others while preventing interaction (e.g. if you are simulating a device and want to draw a glare on top of the content).

The problems begin when those elements are (or contain) interactive elements, and `pointer-events` is used to _disable_ them. One example of this would be button disabling with CSS:

```html
<!-- DO NOT DO THIS -->
<style>
.disabled {
  pointer-events: none;
}
</style>

<button class="disabled">I am a disabled button</button>
```

The issue with this implementation (not too common, but not rare either) is that while **the element is disabled for mouse usage, it is still accessible via keyboard**.  Here is a demo of why it is a bad idea:

{% codepen https://codepen.io/alvaromontoro/pen/oNbErrK %}

Notice how the button looks disabled, and it feels disabled with the mouse... but it is fully operational with the keyboard.

In this case, we should go with a full HTML solution instead of CSS:

```html
<!-- DO THIS INSTEAD -->
<button disabled>I am a disabled button<button>
```

This solution is better in many ways, including accessibility:

- It is more semantic and the right way to disable a button in HTML.
- Keyboard users cannot activate the button (they cannot reach it using tab).
- The button will be announced as a "disabled button" to screen reader users.

The goal is not to avoid `pointer-events` altogether, but to stop and think thoroughly before applying it. Its use outside of presentational/decoration elements –either graphics or HTML elements– may bring more undesired effects than positive ones.

----

**Limit `pointer-events` to presentational and graphic elements.**
Have you met Elm?
Tags: javascript, elm, functional
Published: 2020-07-06 17:05:35

Elm is a statically typed, purely functional language. It is intended for use on the frontend instead of or in conjunction with JavaScript. Elm caught my attention as I've wanted to get more familiar with functional programming. It seems as a quite easy to start with, and it has a [nice tutorial][elm-guide] which guides you through writing apps with Elm step by step.

If you would like to see Elm in action and play with it a bit, there's an [online editor][elm-try] with a couple of simple examples prepared.

Here are also 3 repositories with bigger Elm projects worth checking out:
 
* [Simple to do app][project-todo]
* [Source code for Elm's packages website][project-package]
* [RealWorld example app][project-real]

In the next posts we'll take a closer look at Elm, its features and benefits it brings.

Happy coding! 😀

[elm-guide]: https://guide.elm-lang.org/
[elm-try]: https://elm-lang.org/try
[elm-examples]: https://elm-lang.org/examples

[project-todo]: https://github.com/evancz/elm-todomvc
[project-package]: https://github.com/elm/package.elm-lang.org
[project-real]: https://github.com/rtfeldman/elm-spa-example
Best UI/UX Design Tips for a Mobile App Developer
Tags: watercooler, beginners, ux, career
Published: 2020-07-06 17:01:24

Nowadays, Mobile application UI is crucial factor in developing an astounding application. Therefore, If you are thinking to develop an application then you must have to work on following tips which enhanced the UX and UI.

###1. Efficient Onboarding: 
Onboarding is an precious element that predict your application's success. If user can't onboard rightly, then the abandonment rate of the application will automatically increase.

###2. Error-Free Functionality:
App functionality ensures its success too and its goal accomplishment which drives the users to download the application.

###3. Integrate Behavioral Gestures:
It includes the actions that users make while communicating with the application. For instance pinching, scrolling, swiping which makes the user more comfortable while interacting with it.

###4. Offer Assistance:
This also helps user in several way. Assist users within the application through various support options like chat bots, self-serve FAQ's etc.

###5. Add Search Engine Feature: 
Add an in-app search function aid the users to switch on other search engine while interacting with the application. It helps the user to searching for their desired products or services while remaining in application.

###6. Assure Security & Trustworthiness:
A crucial feature which secure the data of the users. Add some security badge monthly guarantees the users about their data safety.

###7. Use Animated Transitions:
It can enrich your UI and give a whole new look to your app. It also provides smooth navigation guidance to switch from one page to another.


###IF YOU THINK THIS ARTICLE IS HELPFUL THEN DO LIKE AND FOLLOW ME FOR MORE INFORMATIVE STUFF.
Don't Forget to F.O.O.P
Tags: python, functional
Published: 2020-07-06 17:00:29

# Introduction

“All roads lead to Rome.” While this phrase indicates there are multiple solutions to a problem, there are specific solutions that are more adept at the problem. This analogy applies to the programming style of our software.
Throughout this article, we will discuss the different programming paradigms and the benefits of each.

# Which Paradigm to Choose?

Our decision of which paradigm to choose should comply with the best practices with the Software Development Life Cycle (SDLC). The following principles are part of the best practices of SDLC: Single Responsibility and D.R.Y. (Don’t Repeat Yourself). These principles encourage software that is testable, maintainable, and stable. By complying with these principles, you can develop more confidence in your software and increase your development team’s velocity.
Two main paradigms comply with these: Functional Programming and Object-Oriented Programming. Throughout our discussion, we will cover both of the benefits and caveats of the paradigm.

We will use Python as the programming of choice to illustrate these concepts.

....

If you want to learn more, please continue reading here: https://towardsdatascience.com/dont-forget-to-f-o-o-p-5318cffc9ded
Hide and secure API key
Published: 2020-06-27 17:14:17

Let's say you are working on a project and pulling some data from external API, for security reasons you want to hide that API key before pushing it to GitHub or any other source.

##What is an API key and why you need it?
It's a way for websites to know that you are trying to access the data from their database. When you make a call, that website will use your unique key to see who you are and what kind of data you need to access.

##How to hide?
You want to store your API key as variable in your environment. I will show you how to do it with a node package called `dotenv`

>Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.

Open up your terminal and type:
`npm install dotenv`

Make sure you successfully installed it in package.json.
To tell your server to load `dotenv` you will add this line of code to your file(index.js)

`require('dotenv').config()`

You will create a new file inside of your project, called `.env` and add your API key.
```
API_KEY=1233y7wt6ef5dfw8hw
```
To make sure you did everything right, you can call 
`console.log(process.env)`

Now you can change your variable from this,
``` javascript
const api_key = '1233y7wt6ef5dfw8hw'
```
to this:
``` javascript
const api_key = process.env.API_KEY
```
Your fetch request will look like this `api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${Api_Key}`

Before deploying your project you will need to do a few more step to secure your API Key.

Create a `.gitignore`file inside your project. A [gitignore](https://git-scm.com/docs/gitignore) file specifies intentionally untracked files that Git should ignore. 
Inside .gitignore type:
```
.env
```
Now make sure you save all changes and you can safely deploy your project and be sure that your API key will not be floating around.
Dynamic Theme in Flutter - Dark and Light Theme
Tags: flutter, dart, programming, mobile
Published: 2020-07-06 16:46:23

---
title: Dynamic Theme in Flutter - Dark and Light Theme
published: true
description: Dynamic Theming in Flutter- Dark and Light Theme
tags: flutter,dart,programming,mobile
cover_image: https://mightytechno.com/wp-content/uploads/2020/05/dark.png
canonical_url: https://mightytechno.com/dark-light-theme-flutter-app/
---

Check Full Article From [here](https://mightytechno.com/dark-light-theme-flutter-app/)  

Dark and Light Theme - Part 1
{% youtube aFei1SwczS4 %}

Dark and Light Theme - Part 2 
{% youtube 82V4D8PVkFg %}

Connect with me - [Instagram](https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Twitter](https://twitter.com/mightytechno)
On (not?) splitting big .NET applications to assemblies
Tags: dotnet
Published: 2020-07-06 16:35:26

---
title: On (not?) splitting big .NET applications to assemblies
published: true
description: 
tags: dotnet
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/95555sr740h8o1dfpviz.gif
---

This only applies to .NET, and to large code bases fully controlled by you (preferably in a monorepo).

There are good dependencies, and bad dependencies.

## Bad dependency

- Depends on a big framework (asp.net, wcf, ef, DI containers, etc.)
- Depends on several own assemblies
- Depends on a third party library
  - There are some exceptions in every product, e.g. NewtonSoft.Json, System.Reactive etc. can be "universal"
- Has significant business logic code
  - ...and therefore can change frequently

## Good dependency:

- Is mostly declarations. POCOs, constants, enums, interfaces, attributes.
- Can be compiled in the beginning of your build.
- Can be compiled when your services are running (check OutputPath!)
- Doesn't change often. It's "ready".

You can bundle a lot of good dependencies together to same DLL without cost. If your DLL is less than 100kb, it's possible it
can be merged with other small DLLs to simplify your dependencies and speed up the build. Instead of `Feature.Foo.dll` and `Feature.Bar.dll`, consider if you could just have `Feature.dll` if those two libraries depend on same things.

Contrary to naive intuition, fine grained DLL's are not efficient and usually not desirable. You are not selling them separately, or distributing to other applications. When you need to add new DLLs (e.g. because it provides integration with some new third party library or service), consider if there are other DLLs you could get rid of in your code base.

You can add a reference to a good dependency without sweating it much. Most probably, you are already depending on it so you don't need to.

Namespaces for internal code don't really matter. Don't overbloat your pull requests by adjusting them constantly.

- ... except when they matter, and you have abominations like `NetDataContractSerializer` hiding somewhere. Stay safe!
Never forget
Tags: technology
Published: 2020-07-06 16:24:35

We code software. Every day, every hour, an endless stream of code gets written and merged into products. The human-written software codebase is massive. The Space Shuttle runs on 400 thousand lines of code. The Large Hadron Collider uses 50 million lines. And all Google services combined run on 2 billion lines of code.

Software runs technology. Technology has become omnipresent in our lives; from pocket devices to augmented reality and artificial intelligence. The impact that technology is making on human lives is undeniable and inevitable. This fact has its burden: is the technology growing in the right direction?

The answer to that question echoes from the past: it can be found in the thoughts of the first computer engineers and among the ideas of the first technology visionaries. They all promote the very same message: the purpose of technology is not about having everyone interacting online all the time; technology is not a universal remedy (hard) to swallow.

Technology is the challenge for humankind to evolve. It is an opportunity to dramatically increase the collective knowledge, to address the most challenging problems. It is a call to action for public and private sectors to recognize the exponential growth of humankind's challenges, and to provide the vigorous, proactive, strategic pursuit of meaningful evolution.

We, the developers, are makers, creators. We are given the tools and the power to produce the code that will shape the future. We must come up with disruptive ideas that will lead to organisational and societal transformations. Such an attitude should be part of the DNA of any software company that shapes products, services and work. We are here not to code, but to answer the challenges.

Hello world. Never forget to keep evolving.
An alternative to using logs: debug()
Published: 2020-07-06 16:23:18

The Chrome console includes a helper method called `debug` that will pause execution in the debugger on the first line of a provided function.

```js
function greeting(msg) {
  console.log(msg);
}

// Debug the greeting function whenever it gets called
debug(greeting);

// Once greeting is called the Sources panel in DevTools will automatically open
greeting('Hello World!');
```

 <img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1600924032/JS%20Bits/chrome-p6-KVK2-Mc-AH_re9njh.webp">

When using `debug`, the breakpoint is added to the function definition and paused regardless of where it is called. So this is just a quick way to see if and how a function is being called without having to add your own logs to it or manually track it down in the Sources to add a breakpoint! ⚡


----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!
Day 6: Review
Tags: python
Published: 2020-07-06 16:13:07

Hey Hey Hey!

Today was a review of what we have learned so far, using ideas such as **loops**, **strings**, and **conditionals**.

The challenge was, given a string **S** of length **N** that is indexed from **0 to N-1**, print its even-indexed and odd-indexed characters as 2 space-separated strings on a single line.

Here is my solution:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dm1j21otdl9r5zeusocn.png)

I found this to be quite tough, but thanks to numerous sources online I was able to work through it.
Using pipes in your (test) assertions
Tags: elixir, testing
Published: 2020-07-06 16:04:30

Love the pipe operator? Miss them in tests with `ExUnit` when the result is derived from a pipeline of operations necessitating an intermediate variable, like `result`? I did...

## typical test assertion (no pipe operator)
```elixir
defmodule AdderTest do
  test "add" do
    result =
      1..3
      |> Enum.map(& &1 * 2) # [2, 4, 6]
      |> Adder.add(1) # [3, 5, 7]

    assert result == [3, 5, 7]
  end
end
```

## verbose (with pipe)

We can employ an anonymous function (lambda). NOTE: invoked with dot-syntax

```elixir
defmodule AdderTest do
  test "add" do
    1..3
    |> Enum.map(& &1 * 2)
    |> Adder.add(1)
    |> (fn result -> assert result == [3, 5, 7] end).()
  end
end
```

## terse (with pipe)

This uses Elixir's [& (capture operator)](https://hexdocs.pm/elixir/Kernel.SpecialForms.html#&/1) to keep things concise

```elixir
defmodule AdderTest do
  test "add" do
    1..3
    |> Enum.map(& &1 * 2)
    |> Adder.add(1)
    |> (& assert &1 == [3, 5, 7]).()
  end
end
```

## an option for those that use Elixir's formatter

If you or your team use Elixir's formatter, then you're going to end up with something like the following where the nice whitespace that gives your arguments some room to breathe is removed. One thing that I've done is add two enhancement functions (using macros) into `test/test_helper.exs` that become available to tests by invoking `use TestHelper`

```elixir
defmodule AdderTest do
  test "add" do
    1..3
    |> Enum.map(& &1 * 2)
    |> Adder.add(1)
    |> (&assert(&1 == [3, 5, 7])).() # 🤮
  end
end
```

Here's what we can do

```elixir
# test/test_helper.exs

ExUnit.start()

defmodule TestHelper do
  defmacro __using__(_opts) do
    quote do
      import ExUnit.Assertions, only: [assert: 1]

      # we can name this whatever we'd like,
      # but "is" makes sense to me in most cases
      # 👇
      def is(result, expectation) do
        assert result == expectation
        result # 👈 allows us to continue chaining assertions in a pipeline
      end

      # this one allows us to make more complex assertions
      # e.g., asserting that a nested key is of a particular value
      def has(result, assertion) when is_function(assertion) do
        assert assertion.(result) == true
        result
      end
    end
  end
end

# test/adder_test.exs

defmodule AdderTest do
  use TestHelper # 👈 included here

  test "add" do
    1..3
    |> Enum.map(& &1 * 2)
    |> Adder.add(1)
    |> is([3, 5, 7]) # 👈 used here
    |> has(&List.last(&1) == 7) # 👈 and here (chained)
  end
end
```