teleren/devto huggingface dataset:
Neat little tricks for increasing your conversion
Tags: landingpages, saas, design, conversion
Published: 2020-05-11 19:10:04

This is part 2, as promised, of the landing page tips! See my previous article [here](https://dev.to/mratiebatie/5-personal-tips-for-landing-pages-2b4g).

### 1. Do not target multiple audiences on 1 page
No, your startup is not for everybody. Last weekend I was looking for a coach. I found three coaches:
A coach for life coaching, business coaching, burn out coaching etc;
A coach for people in their twenties and thirties;
A coach for young entrepreneurs in their twenties.
Which one do you think I choose? Exactly, the third one, cause I am RIGHT in his target audience. I feel more addressed when I read his website. Like you can’t coach the whole world, your problem can’t solve the whole world. You need to start solving 1 problem very good for 1 target audience.

### 2. Install some heatmap software on your page
Heatmaps will give you a better understanding of how your visitors read and scroll through your page. Perhaps they click on things that are not clickable? Or maybe they don’t even reach the end of your page where your subscribe form is located. Chances are a heatmap will give you some good insights.

### 3. Provide a signup form halfway your page
This a neat little trick if you have a very long landing page. Try to provide a signup form halfway your page to see if people are willing to convert before the end of the page.

### 4. Put a very clear call to action on the page
What is the most important action you want your visitors to take? Is that login, register, book now, schedule a call? Take a look at all the buttons on your page and decide which action you want them to take. A good landing page has not many links on it that will drive your customer away from that specific page. Your landing page should only have 1 call to action.

### 5. Validate your IDEA not your DESIGN
It’s not worth it to spend hours on the right design for your landing page. It’s not your design your validating. Of course, you need to make it a little bit decent, but you don’t have to think about the whole colour palette of your brand yet. It’s for sure that your idea and your brand are gonna change anyway. So don’t spend time and money on designs and vectors for an idea nobody might be waiting for.
My landing page literally uses 2 colours. Black and white.

### 6. Content is king but context is God

The content of your landing page is far more important than the colours and images on your page. However, there is one more thing more important than the content. Attracting the right audience to your landing page. You can have the best marketing texts in the world but if you only send housewives to your tech-related startup landing page you’ll end up with no conversion anyway. Figure out who the people are on your landing page right now and decide if they are your target audience.

---
Tired of copywriting that doesn’t work? Check out:
https://targetaudience.app
API Types | SOAP VS REST | 30 Days of API Testing | Day 11
Tags: testing, tutorial, webdev, beginners
Published: 2020-05-11 18:59:26

🚀Mastering API Testing(Full Course) -  https://www.learnapitesting.com

In this video of 30 Days of API Testing Challenge, We are going to learn API Types such as REST VS SOAP VS RPC.

🚀 Day 11 Task: Share your favorite API testing tools and why.

[![30 Days of API Testing](https://i.imgur.com/sW5cc5L.png)](https://youtu.be/6MbUZ_2PlXo "30 Days of API Testing")

🚀 Thread 
https://club.ministryoftesting.com/t/30-days-of-api-testing-day-11-learn-about-different-types-of-api-s-share-your-findings/20047

SOAP stands for Simple Object Access Protocol whereas REST stands for Representational State Transfer. 

SOAP is a protocol whereas REST is an architectural pattern.




🚀Resource 
- https://ffeathers.wordpress.com/2014/02/16/api-types/
- https://shadrin.org/nginx/blog/content/building-api-for-longevity-spec--driven-development.html
- https://www.mertech.com/blog/know-your-api-protocols

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
How to expose my localhost URL to the public
Tags: discuss, showdev
Published: 2020-05-11 18:36:49

When working on a project on our local environment we are only limited to our localhost URL which is only accessible on our local machine.

However, there may be sometimes when we need to expose and share our localhost project to people or provide a valid HTTPS URL when working with webhooks or wanna test on mobile devices. 

What are the available methods and tools you employed in going about this?
Debunking Myths: Tor - VPN
Published: 2020-05-11 18:34:10

The Tor network is a free and decentralized service that was designed to protect the anonimity and privacy of its users.

Tor works by sending your network traffic over thousands of voluntarily run nodes. Every time you connect to Tor, it will build a path of encrypted layers using 3 nodes. The entry node will see your IP address, but does not see the destination of your connection. The middle node can determine where its traffic came from and where it goes to, but it can't see neither your IP address nor the domain you are trying to access. Finally, the exit node will forward your traffic to the destination domain.

It is important to note that you will stick to your entry node for 2/3 months, while the middle and exit node will be randomly chosen from the Tor nodes.

There is the common misconception that, since the US government provides funding for the Tor project, they could have a back door and even have people on a watch list. This idea does not hold because the US government uses Tor to hide its activities online and, if it had a back door, it would not be safe for them to use. Also, analysis shows that around 2 million users access Tor each day. This number is big enough as to justify targeted surveillance. If someone wanted to de-anonimyze people, this person should have control over both the entry and the exit node of a Tor user. In this situation, since the entry node is changed every 2/3 months, it would be too expensive to keep your nodes running for at least 2 months before they get another chance of becoming the entry node.

The belief that the exit node can access your traffic is partially true. Your traffic is encrypted while entering and travelling through the Tor network, but the connection between the exit node and the website is not. However, the implementation of HTTPS makes that the exit node can only see an encrypted HTTPS packet that needs to be forwarded.

Another myth is that people use Tor to access the dark web. The truth is that if Tor was to be taken away, these criminals would end up using another medium to conduct their business. It is a reality that certain individuals hide illegal websites, and many of them have been caught doing it. In spite of this, in each and every of these cases, Tor was not the primary cause. This means that even if you get access to an anonymous connection, we must take into account other factors such as software bug, government infiltrations, human errors, data leaks...
Networking security on IPv4 and IPv6
Published: 2020-05-11 18:32:54

Imagine yourself working for a big corporation, envision thousands of computers interconnected, and visualize all the data flowing through the network. Having acces to multiple applications makes our lives easier. We can connect with other companies through mail services, buy from our houses, withdraw money from online banks…

As daily users of the Internet, the truth is that we do not need much imagination to see this functionality that started to be conceived around the 60’s and 70’s. As a matter of fact, the OSI (Open Systems Interconnection) model, forged in 1984, was set as a reference for the future of systems connectivity. However, years later, the TCP/IP model prevailed despite its errors at a theoretical level. Its theoretical bases are the cornerstone of both, local networks, and the global network (the Internet).

However, due to the relatively slow implementation of new protocols such as IPv6, we must be aware of the existence of new vectors of attack concerning the services and functionality of this protocol. The differences with IPv4 demand a new paradigm of learning instead of a process of adjustment.

It is likely that most users will not pay attention to the implementation of IPv6. Nonetheless, it is undeniable that if their online communication is intercepted, their data will be leaked and exposed. Any company or user is vulnerable to these attacks. There are several examples of credential theft against web services, anonymous people and big companies such as SONY.

If we analyze these hacks, we come to the conclusion that most attacks take place within the company, where security measures are looser. Also, many IT technicians focus too much on functionality and end up overlooking security. If we take a look to the past, we realize that network protocols were implemented to make our communications faster, with more services, and with a greater number of PCs, but not necessarily more secure.
Integration Testing with NodeJs, Jest, Knex and SQLite In-Memory Databases
Tags: node, javascript, tdd, sqlite
Published: 2020-05-11 18:31:52

---
title: Integration Testing with NodeJs, Jest, Knex and SQLite In-Memory Databases
published: true
description: Tutorial for setting up in-memory SQLite databases for integration testsuites in Jest
tags: Node, Javascript, TDD, SQLite
---
If you're using Jest to write integration tests (that hit the database) for your Node application, you'll quickly notice that it's tricky to isolate your tests if you're using only one test database.

While Jest runs all tests in a single testsuite sequentially, it runs your testsuites in parallel (by default). This makes for faster execution times, but it also means that changes to your database in one testsuite could interfere with another test that's currently running in a different testsuite.

An easy solution to this is to configure a new SQLite in-memory database for each of your testsuites or test-files. This way, a testsuite only makes changes to its own database without affecting the database being used by other running testsuites.

In this tutorial, I'll walk through a simple setup for using in-memory databases in your Jest testsuites and running your database migrations on them before each test using Knex. The code for this tutorial is available here: https://github.com/rukykf/jest-sqlite-tutorial

In your knexfile create a new connection for your test file like so:

```javascript
// knexfile.js

const path = require("path")

module.exports = {
  ...

  test: {
    client: "sqlite3",
    connection: ":memory:",
    useNullAsDefault: true,
    migrations: {
      directory: path.join(__dirname, "migrations")
    },
    seeds: {
      directory: path.join(__dirname, "seeds")
    }
  },

}
```

When instantiating Knex, specify that you want to use the `test` config we just created in our `knexfile`

For instance, in a file `db-config.js` we could do this

```javascript
// db-config.js

const knex = require("knex")
const config = require("./knexfile")

let db = null
if (process.env.NODE_ENV === "test") {
  db = knex(config.test)
} else {
  db = knex(config.development)
}

module.exports = db
```
By default, Jest will set `NODE_ENV` to `test` when you are running your tests.

Then in your integration testsuites, you need to run your migrations on the in-memory database before executing any tests.

```javascript
// users.test.js and db-config.js are in the same directory
const db = require("./db-config")

beforeAll(async () => {
  // run the migrations and do any other setup here
  await db.migrate.latest()
})

test("select users", async () => {
  let users = await db.from("users").select("name")
  expect(users.length).toEqual(0)
})
```
That's it. Now each of your testsuites will use a separate SQLite database. You still have to keep in mind that all the tests in a given testsuite will use one database.
Pass by reference vs pass by value
Published: 2020-05-11 18:30:45

After being introduced to pointers, structs, arrays… in the C language, you quickly realize that in the strictest sense of the word, everything in C is pass-by-value.

Pass-by-value means passing a copy of a variable to a function. On the other hand, pass-by-reference means passing and alias of the variable to the function. C can pass a pointer into a function but that is still pass-by-value. When we pass a pointer to a function on C, we are still passing by value because we are copying the value of the pointer (address in memory) into the function. Also, when we pass a pointer, C’s syntax requires a dereference to be applied to get the value. However, in languages like Pascal and C++, that is not a requirement .

Let’s take swap as an example:

`void swap(int a, int b);
    void swap(int a, int b) {
      int tmp = a;
      a = b;
      b = tmp;
    }
    int main()
    {
        int a = 1;
        int b = 2;
        printf("before swap a = %d\n", a);
        printf("before swap b = %d\n", b);
        swap(a, b);
        printf("after swap a = %d\n", a);
        printf("after swap b = %d\n", b);
    }`

Here is the output: before swap a = 1 before swap b = 2 after swap a = 1 after swap b = 2.

We can see that the swap has taken no effect on our variables. This is because in pass by value, copies of the values are passed as parameters. This means that we are swapping the copies inside the function instead of the original variables.

Now, what if we used pointers?

`void swap(int *a, int *b);
    void swap(int *a, int *b) {
      int tmp = *a;
      *a = *b;
      *b = tmp;
    }
    int main()
    {
        int a = 1;
        int b = 2;
        printf("before swap a = %d\n", a);
        printf("before swap b = %d\n", b);
        swap(&a, &b);
        printf("after swap a = %d\n", a);
        printf("after swap b = %d\n", b);
    }`

Here is the output: before swap a = 1 before swap b = 2 after swap a = 2 after swap b = 1

The output shows that the original a and b values have been successfully swapped. However, it is important to note that even though we are using pointers, we are still passing by value (we are passing copies of the pointers to a and b into the function). The function itself changes the values at those addresses but it is still being passed a copy of the pointer into the function, which is pass-by-value.
Simple react-based chat application
Tags: react, socketio, nextjs, javascript
Published: 2020-05-11 18:25:59

I want to share a simple chat application that I've made using next js and socket-io.

To achieve this I've used Next.js and Socket.IO.
Next.js is a framework that most notably allows us to write server-rendered React apps easily.
Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers.
## Front part 
First step : creating the next application.
The command : npx create-next-app (we choose the name of app )
In next js we just need to add a file in pages folder to have all the routing stuff ....

We modify the existing file index.js.
firstly we import the necessary libraries

{% gist https://gist.github.com/KaidiMohammed/6d77e3251d0b557a422f20d3291047e6.js %}
In this work I've used functional components, much easier and more fun than class components, so we create the App component, we define some states that we need later.

1) a state to save the connected user list.
2) a state to save the message that we send.
3) a state to save the received messages.

After that we create the basic functions for communication between clients and server.
For each new client do : 
      1) in a useEffect hook we emit a login event to the server.
      2) the server says:"Hi", and he sends the list of logged clients and also returns some information of the logged client such as socket_id.
End 
Every client can send messages to all the users by emitting sendMsg event.

{% gist https://gist.github.com/KaidiMohammed/8f0c4a8b01defd3e7b5131607443a2c9.js %}

finally we render the connected users and an input to send messages.
{% gist https://gist.github.com/KaidiMohammed/200a907e4849e082ada6b5f703b8ef35.js %}
that's all for the front part, we move to the second one which is the server and the event management.
## The server part 
we create a simple node server.
the mission of the server is to respond to all the events which come from the clients.
We use an array to save the user information (a real database for serious things is more suitable)
We manage the connection and disconnection events by adding or removing the client from the clients array respectively.
When the server catch the SendMsg event, it broadcast it to all the logged client (we can create rooms if we want more control or just emit it to a specific client by passing his socket id)

{% gist https://gist.github.com/KaidiMohammed/2bdefe2a093dcf3231e331a56f50f813.js %}
The git repo : 
{% github https://github.com/KaidiMohammed/chatapp %}
to see the final result, please  click here : [NextChat](https://ibb.co/6WxFjSz)

Thanks for reading.
Video cameras tested with Ambianic.ai
Tags: cameras, tested
Published: 2020-05-11 18:22:24

This post is periodically updated to list specific camera models tested with Ambianic.ai by people in the community. Obviously, there are no guarantees and warranties of any kind. This is just a voluntary effort to help you find a camera that works for your environment.

Outdoor:

| Brand | Model | Price | Store URL |
| --------- |:---------:|:---------:| -------:|
| Anpviz | 5MP PoE Dome | $53 | [Amazon](https://amzn.to/2WmJheH) |

Indoor:

| Brand | Model | Price | Store URL |
| --------- |:---------:|:---------:| -------:|
| Reolink | C1 Pro | $55 | No longer sold | 
| Reolink | E1 Pro | $50 | [Reolink](https://reolink.com/product/e1-pro/?attribute_pa_version=1-pack&gclid=CjwKCAjw7-P1BRA2EiwAXoPWA_VjDmViI0wl16LTdnd0fd6kXcgVWZj843Xg9nItKmbo6lQzzlsLTBoCKkYQAvD_BwE) |

If you know of a camera that works with Ambianic.ai, please post a comment about it below. Thank you!
Curated presets & box-shadow editor for devs & designers
Tags: css, webdev, showdev, opensource
Published: 2020-05-11 18:21:26

---
title: Curated presets & box-shadow editor for devs & designers
published: true
description: boxshadows.com - A curated list of beautiful box-shadow presets from across the web which can be tweaked for use by developers & designers.
tags: css, webdev, showdev, opensource
cover_image: https://boxshadows.com/img/twitter-card.min.png
---

[Abinav Seelan](https://dev.to/abinavseelan) and I built a site to curate beautiful box-shadow based designs we found from around the web - to spark design inspiration when we start new projects. 

## [boxshadows.com](http://boxshadows.com/presets?utm_source=dev.to&utm_medium=post&utm_campaign=intro_post_rheaditi)

It features a list of presets from sources like:

* material design (materialize-css) 📃
* tailwindcss 💨
* windows 98 🤓
* minecraft! 👾
* ... and more (even DEV.to 😉)

It also features an in-browser editor that allows you to tweak these presets or create your own designs!

**View the source here**:
{% github campvanilla/boxshadows %}
43 : Coding is ArtWorking
Published: 2020-05-11 01:39:59

I confused what is right for me to study programming, the conclusion is creating my Artworking, I am glad to find the beauty of mathematics, computer science, and also functional programming, likewise this is the only theoritcal possibility I want to reach out, for me, it now become the part of life, understanding the web front end development, and, I want to create my own curriculum, the internet provide massive information, who choose that? 

--- 
I still agree that it is okay not to learn programming, for everyone, I think it would be an amazing chance to reflect who you are, by learning algorithms, there are the other ways, for instance, UIUX Design, Motion graphic, photography, illustration, I was obsessed with Vanilla JavaScript, however, there are also ways to study functional programming, by Haskell, if I am more interested in Generic programming, there is C++, and, in Korea, the amount of people learn Java as a back-end programming, 

--- 
the essence was that how I keep motivated learning to code, 
so, everyone can code , it does not matter of background, :) Thank you! 

[Get Help By Professional Mentor](https://www.frontendmentor.io/)
Report Web Vitals in Next.js
Tags: javascript, webvital, nextjs, performance
Published: 2020-05-11 18:10:56

---
title: Report Web Vitals in Next.js
description: Measure the performance of our Next.js application with Web Vitals
canonical_url: https://sergiodxa.com/articles/next/web-vitals/
published: true
tags: javascript, webvital, nextjs, performance
---

To get a report on [Web Vitals](https://web.dev/vitals/) while using Next.js create a `pages/_app.js`, if you don't already have one, and add the following line:

```ts
export function reportWebVitals(metric) {
  console.log(metric);
}
```

Next.js will automatically start to keep track of multiple metrics and give you back a report per metric, you can see it running in [pokedex-swr.now.sh](https://pokedex-swr.now.sh). The metrics we can track include:

- [Time to First Byte](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_first_byte) (TTFB)
- [First Contentful Paint](https://developer.mozilla.org/en-US/docs/Glossary/First_contentful_paint) (FCP)
- [Largest Contentful Paint](https://web.dev/lcp/) (LCP)
- [First Input Delay](https://web.dev/fid/) (FID)
- [Cumulative Layout Shift](https://web.dev/cls/) (CLS)
- Next.js-hydration
- Next.js-route-change-to-render
- Next.js-render

_Next.js-hydration_ is the amount of time it takes a page to start and finish hydrating the HTML.

_Next.js-route-change-to-render_ is the amount of time it takes a page to start rendering after a route change.

_Next.js-render_ is the amount of time it takes a page to finish rendering after a route change.

If you want to learn more about the first five follow the links above.

Once you have the report you can start tracking them however your prefer, if you are using Google Analytics you could replace the `console.log` with:

```js
export function reportWebVitals({ id, name, label, value }) {
  ga("send", "event", {
    eventCategory: `Next.js ${label} metric`,
    eventAction: name,
    eventValue: Math.round(name === "CLS" ? value * 1000 : value), // values must be integers
    eventLabel: id, // id unique to current page load
    nonInteraction: true, // avoids affecting bounce rate.
  });
}
```

Now we will start sending those metric to Google Analytics and keep track of them, we could then use them to detect slow pages and fix them.