teleren/devto huggingface dataset:
May 8 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-05-08 12:02:11

---
title: May 8 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Daily Developer Jokes - Friday, May 8, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-05-08 12:00:20

---
title: "Daily Developer Jokes - Friday, May 8, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20May%208%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125933e8609.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What did the fruit basket say to the developer?

___A:___ I hope you're ready for some pear programming!
 -->
🌍Analog Clock (CSS + JS)[NO audio] [YouTube LIVE]!
Tags: javascript, tutorial, frontend, javascript30
Published: 2020-05-08 11:55:17

⬇️ In this video, I 'll show you how to create a simple yet elegant analog clock!
The inspiration for this project is coming from Javascript30.


####Note: There is no audio in this video :)


###Useful links
- Codepen: https://codepen.io/EleftheriaBatsou
- Working project: https://codepen.io/EleftheriaBatsou/pen/KKdQjbp
- Cubic animation: https://www.w3schools.com/cssref/func_cubic-bezier.asp
- On youtube: https://www.youtube.com/watch?v=E_iKyK_5juU

###If you guys recreate this project send me a link to check it. 

************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
Importance of Typography in Web Design
Published: 2020-05-08 11:53:57

Typography is the visual component of the written word. Typography can be seen in every facet of life— from restaurant menus and traffic signs, to newspapers and even your favorite websites. Typography is everywhere whether we realize it or not. It’s so common-place that we tend to take it for granted.

Typography involves changing, arranging, or ordering type .but we only take the time to change it when we have a purpose or reason as to why. This means we have an obligation to present the text in a way that is useful, clear, and legible to its reader. 

The content of a webpage could be incredible, but if the typography leaves something to be desired, then it can be difficult for people to read and navigate. They'll either struggle through it or quit along the way, both of which are undesirable. 

Another purpose behind typography is establish an emotional connection between the user and the information presented on the website. Type can have a personality or mood, and it can conveys something to the reader before they've even understood a single word on the page.

The style of your type should match the intent of your content. For example, perhaps you’re designing a business document that's set in a quirky typeface such as Comic Sans. Even though your content might convey the right message, the design or typography is undermining your authority and prestige on the matter.

As we move forward designing websites utilizing the design principles of typography, we want to make sure the design aspect of it enhances the message at hand. Remember, we want to keep readers engaged but also create an emotional connection between them and the content we are presenting.
React Hook around Apollo GraphQL query
Tags: webdev, graphql, javascript, react
Published: 2020-05-08 11:50:42

Here is an example of the custom hook around Apollo query, with simple reuse and keeping things in one place.
BTW you can check <code>[React Hook around Apollo GraphQL mutation](https://dev.to/max_frolov_/react-hook-around-apollo-graphql-mutation-1aha)</code> here.
```jsx
import * as RH from "@apollo/react-hooks";
import gql from "graphql-tag";
 
// users query
export const USERS_LIST_QUERY = gql`
  query GetUsersQuery($input: UsersInput) {
    getUsers(input: $input) {
      firstName
      lastName
      online
      id
    }
  }
`;
 
// query entity hook
export const useUsersQuery = (variables = {}) => {
  const { data, loading, error } = RH.useQuery(USERS_LIST_QUERY, {
    variables: { input: { online: false, ...variables } }
  });
 
  return {
    users: data?.getUsers || [], // list with default value
    isLoading: loading, // loading state
    error: error?.graphQLErrors, // parse errors here
    refetchUsers: data.refetch // refetch your query
  };
};
```
More tips and best practices on my [twitter](https://twitter.com/max_frolov_).

Feedback is appreciated. Cheers!
New PHP router wich is 30 to 50 times faster then Laravel router
Tags: php, router, laravel, framework
Published: 2020-05-08 11:00:44

# Intro

Hello everybody! It is time to benchmark another well known router - Laravel router (to be precise - Illuminate\Routing).

Like in the previous articles we shall test static routes and routes with parameters in them.

Static routes we shall benchmark in this way:

```php
// repeat this in loop
with(new Illuminate\Routing\RoutingServiceProvider($app))->register();
$app['router']->get('/static', function () {
    return 'static';
});
$request = Illuminate\Http\Request::createFromGlobals();
$app['router']->dispatch($request);
```

And routes with parameters will be benchmarked like this:

```php
with(new Illuminate\Routing\RoutingServiceProvider($app))->register();
$app['router']->get('/{id}', function () {
    return 'param';
});
$request = Illuminate\Http\Request::createFromGlobals();
$app['router']->dispatch($request);
```

Results are quite astonishing (the bigger numbers you see, the better it is)!

![laravel-comparison](https://dev-to-uploads.s3.amazonaws.com/i/9itemitpc95fxj6152xw.png)

![laravel-router](https://dev-to-uploads.s3.amazonaws.com/i/epdfcs0jiyaag8p0nc80.png)

As you can see - Mezon router is 30 to 50 times faster than Laravel!!!

# Learn more

More information can be found here:

[Twitter](https://twitter.com/mezonphp)
[Mezon Framework](https://github.com/alexdodonov/mezon)

# What is mezon/router?

mezon/router now is:

- framework for routing with **100% code coverage**
- **10.0 points** on scrutinizer-ci.com
- router is a part of the [Mezon Project](https://github.com/alexdodonov/mezon)

Repo on github.com: https://github.com/alexdodonov/mezon-router

# It will be great if you will contribute something to this project. Documentation, sharing the project in your social media, bug fixing, refactoring, or even **[submitting issue with question or feature request](https://github.com/alexdodonov/mezon-router/issues)**. Thanks anyway )
A simpler way to add TailwindCSS to your Svelte project
Tags: tailwindcss, svelte, postcss, purgecss
Published: 2020-05-08 11:44:34

So currently, from what I found, there are only about 3 or 4 articles that show you how to add TailwindCSS to a Svelte app. And I'm pretty sure they all work great, but they're kinda outdated now and include unnecessary things.   
On 29th April 2020, Tailwind was updated to v1.4 and added built-in PurgeCSS support. This is great and means that we no longer have to install PurgeCSS ourselves nor set up a config for it. 

Okay so, let's get started with the guide! 

###Step 1: Install dependencies
These 3 dependencies are the only ones we're going to need:

```npm i --save-dev tailwindcss postcss-cli npm-run-all```

###Step 2: Create and configure Tailwind config file
Run the command:

```npx tailwind init```

Open the newly created `tailwind.config.js` and add `"./src/**/*.svelte"` inside the `purge` options array. 
This will ensure that all the thousands of unused CSS rules that Tailwind creates will be purged at build.
Your config should now look like this:  

```
module.exports = {
  purge: ["./src/**/*.svelte"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};
```
###Step 3: Configure PostCSS
Create `postcss.config.js` in the root folder and add these lines:  
```
const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [tailwindcss("./tailwind.config.js")],
};
```

###Step 4: Add Tailwind to your CSS
Create `tailwind.css` under your `public` folder, and add these lines:  

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
###Step 5: Link to CSS in your HTML
Open `index.html` and link the `index.css` that will contain the CSS rules that Tailwind will produce for your app. Yes, it doesn't exist yet, but it'll be created by our scripts.  
```<link rel="stylesheet" href="index.css" />```
You can also delete `global.css` and the link to it in `index.html` as Tailwind already comes with CSS normalize and resets.  
###Step 6: Add scripts
In the `package.json` file, ensure your scripts look like this:
```
"scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "dev": "run-p start:dev autobuild watch:tailwind",
    "build": "npm run build:tailwind && rollup -c",
    "start": "sirv public --single",
    "start:dev": "sirv public --single --dev",
    "autobuild": "rollup -c -w"
  },
```
  
That's it! You can start your app with the usual `npm run dev` command.
【超簡単】Googleスプレッドシートで同時翻訳をする方法

Tags: Google, 同時翻訳
Published: 2020-05-08 11:40:45

クチコミネットのHowto記事へようこそ！

今回はGoogleスプレッドシート内のテキストを簡単に翻訳する方法をご紹介します。

まず、結論からご紹介すると、以下の関数で簡単に実装することができます。

=GOOGLETRANSLATE(A2, “en”, “ja”)
↑こちらのコードは [A2]のテキストを英語(en)から日本語(ja)にするという内容です。

実際に設定した画像が以下になります。

Google スプレッドシートで同時翻訳をする方法

上図のように、一番上のセルに関数を設定して後は下に引っ張るだけで簡単にすべてのテキストに関数を割り当てることができます。

以上になります！👍👍

https://ktkm.net/
Server side pagination, sorting, search for React Grid
Published: 2020-05-08 11:37:46

Hi I need help regarding Server side pagination, sorting, search for React Grid. Is there any free/open source grid available where I will be getting Basic server side search, sort, Pagination just like Ag grid or Fancy grid gives?
I am a beginner and i am exploring things, I want to do Rowselect, column reordering, drag and drop etc.
#react #grid #serverside #opensource
6 brilliant webdev related finds for April/May - blog posts/videos/JS stuff/SVG resources
Tags: webdev, javascript, css
Published: 2020-05-08 11:36:15

There is just so much content out there these days, that it's not only easy to miss, but also easy to forget it again. So I thought I just keep a journal of my favorite ones.

### [17 tips for great copywriting](https://twitter.com/GoodMarketingHQ/status/1258052549246140416)

Some neat tips for copywriting, here's an example:

{% twitter 1258052555248218112 %}

### [Heroicons](https://heroicons.dev/)

A fantastic resource for quickly grabbing some SVG elements for your website. No npm, no manual downloading, just click on an icon and it's in your clipboard.

### [68 Bits of Unsolicited Advice](https://kk.org/thetechnium/68-bits-of-unsolicited-advice/)

Not explicitly dev related, but they very much translate to our industry.

For example:

- "Always demand a deadline. A deadline weeds out the extraneous and the ordinary. It prevents you from trying to make it perfect, so you have to make it different. Different is better."
- "Before you are old, attend as many funerals as you can bear, and listen. Nobody talks about the departed’s achievements. The only thing people will remember is what kind of person you were while you were achieving."

### [Microservices (video)](https://t.co/F6z9uwgFtx?amp=1)

Or how they can go wrong...

### [LCH colors in CSS](http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/)

Did you know that browsers can not display all available colors? It's missing like 50%?

### [toJSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#toJSON_behavior)

Did you know?

If an object has a `toJSON` method and you call `JSON.stringify` (like when returning a response from a server), the result of `toJSON` will be stringified instead of the object. For a use case in the wild, check out the docs for [adonis.js](https://adonisjs.com/docs/4.1/serializers#_why_use_serializers).

---

That's all for now. If you still want more I have recently created a free interactive Vue tutorial for those who just want to try it out and not deal with tooling, etc. Check out learning by vueing [here](https://learning-by-vueing.netlify.app/vue/pre). I am also working on an interactive tutorial for Tailwind CSS. If you are interested or skeptical about Tailwind, sign up to [my newsletter](https://michaelzanggl.com/) to know when it's out.
Ubuntu Unity Remix
Tags: linux, ubuntu, unity7de, debian
Published: 2020-05-08 11:30:03

Hi all, 

I present to you the first release of Ubuntu Unity Remix 20.04! 

It can be downloaded from:
Google Drive: https://drive.google.com/file/d/1tjJ3jVSNZlT1_g4hnQJZg_jbbkUKtt2n/view?usp=sharing
MEGA: https://mega.nz/file/SEBHHY7S#6f827bKYQcIxLHbdnAwHCQp3dz4-3IwTyLA5Xs2l-wQ

For more information, please visit https://discourse.ubuntu.com/t/ubuntu-unity-remix-20-04/ or join our Telegram Channel at https://t.me/ubuntuunityannouncements

The website will be coming up soon.

Thanks for all your love and support.
Deploy a BitcoinSV node with docker
Tags: bitcoinsv
Published: 2020-05-08 11:28:53

BitcoinSV is an original bitcoin protocol implementation. We can use it as a reliable money transfer process, or secure data storage.

For normal users, run a BitcoinSV node is not very convenient or cheap. It needs a large disk space to store the block data. But the node is the most secure way to communicate with blockchain for enterprise users nowadays. Because the node will check the Merkel tree of transactions and validate the transaction script. And detected the longest chain for you.

N-chain has distributed [a docker image](https://hub.docker.com/r/bitcoinsv/bitcoin-sv) of the BitcoinSV node. So we can easily deploy it in our development or production environment. First, make sure you have installed `docker`. Then pull the image.

```sh
docker pull bitcoinsv/bitcoin-sv
```

This is the start command for bitcoins 1.0.3 .

```sh
docker run -d \
-p 8332:8332 \
-v $(pwd)/data:/data \
--name bitcoind bitcoinsv/bitcoin-sv bitcoind \
-server \
-rpcuser=user \
-rpcpassword=password \
-prune=25000 \
-excessiveblocksize=2000000000 \
-maxstackmemoryusageconsensus=200000000
```

You can set a more secure RPC username and password. The exact meaning of the last two settings can be viewed on [bitcoinsv.io](https://bitcoinsv.io/choosing-consensus-settings/).

After running the command above, the BitcoinSV node will be running in the background. Run `docker ps` to check.

Now you can use the RPC interface via `localhost:8332`.

```sh
curl --user user --data-binary '{"jsonrpc": "1.0", "id": "curltest", "method": "getblockchaininfo", "params": []}' -H 'content-type: text/plain;' http://localhost:8332
```

To check the latest 100 lines of logs:

`docker logs --tail 100 bitcoind`

To stop the node:

`docker stop bitcoind`

To delete the container:

`docker rm /bitcoind`
Freelancing Tips and Tricks
Tags: productivity, motivation, webdev, career
Published: 2020-05-08 11:27:46

If you are thinking of freelancing and currently have a full-time job, my best advice is to make sure you first build a network for yourself. Slowly progress to freelancing over time, by doing bits of development work such as making small websites, apps and such until you are ready to fully shift into it.

{% youtube 6Od36ZvjxUo%}
<center>[Youtube: Freelancing Tips and Tricks](https://youtu.be/6Od36ZvjxUo)</center>

The summary of my experience and tips:
* Have well place contracts in place for any work you do
* Payment should be agreed on in advanced and where possible;
* Do 50% upfront and 50% on delivery
* Check-in with the clients to make sure everyone is on the same page
* Be careful of places like Upwork and Fiverr
* Focus on networking and talking with people to build your freelancing
* Reach out to people and show them your work and that you are interested
* Consider if you enjoy freelancing, maybe it's not for you
* If you want to swap from full time to freelancing, don't just go straight in;
* Transition slowly, go part-time, build up your network of clients;
* Until you are ready to quit your job, and have established income for freelancing

Any tip's I've missed out, how has your experience been?

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
EPICS Deployment
Tags: web, epics, ioc, proxy
Published: 2020-05-08 11:20:17

As a newbie in the world of EPICS and hardware control system, every day many new challenges come and many are solved. This is a record of the experience so that when the same problem comes in the future, I don't need to get through it again.

# System Architecture

![arch](https://dev-to-uploads.s3.amazonaws.com/i/fy3lrcw0frml7idw5o6u.png)

The details of the architecture are not covered here. Broadly speaking, the proxy converts EPICS protocol to GraphQL or vice versa.

# Challenges

This section records all major challenges I have met. Some are trivial but I was not smart enough to find a solution immediately.

## Connection between Different Hosts

The connection between CA client and IOC server is the most anti-intuitive part for me. EPICS provides a convenient technology "UDP broadcasting", which helps establish connection when both parties have no knowledge of the IP address of each other.

However, This method only works as expected when both parties are in the same and the only subnet. e.g. when the CA client has 2 IP addresses in 2 different subnets, such as 10.0.0.1 and 192.168.1.1, it is not guaranteed to be able to find an IOC whose address is 192.168.1.100.

When no better architecture design is feasible, one has to provide the IP address of the IOC server to the CA client, so that the client knows where to look for the IOC. The way to tell is by setting an environmental variable `EPICS_CA_ADDR_LIST` when starting the CA client. For example:
```bash
export EPICS_CA_ADDR_LIST=192.168.1.100
# CA connect here
```
However, it is generally a better practice to minimize the necessary configurations. A better solution here is putting the CA client in the subnet where IOC servers are found and no other subnets. In my architecture, it means that the web services and IOCs, as well as the proxy, are in the same subnet. This is achievable when the number of IOCs is relatively small. When there is large number of IOCs, they must be divided into different subnets for better management. In that case, a workaround can be made by introducing another layer of proxy between web services and the EPICS proxy, so that the EPICS proxy can stay with 1 IP.
How Selenium Works: Episode 7 - Driver Executables
Tags: testing, selenium, webdriver, browsers
Published: 2020-05-08 10:52:09

So this episode is going to be slightly different to previous episodes as this question came up this week. Why do browser vendors and the Selenium Project ship a driver executable? And Why do I need to update it with every browser release?

## Why do I need to download something?

This is one of the biggest pain points I have seen people struggle with when using Selenium. The majority of the people who struggle are those who do not have a lot of experience programming. So why do we download this executable?

In [Episode 1](https://dev.to/automatedtester/how-selenium-works-episode-1-transportation-26de) I mentioned Selenium under the hood speaks a [REST-ish API](https://dev.to/automatedtester/how-selenium-works-episode-1-transportation-26de#http-and-rest-ish-really). 

The driver you are downloading is an HTTP server for the client libraries to be able to speak to.

## So... Why not just get the client bindings to speak whatever is native to the browser?

Unfortunately, as I mentioned in [Episode 1](https://dev.to/automatedtester/how-selenium-works-episode-1-transportation-26de), doing that increases the amount of work each binding maintainer needs to do and potentially limits who can write the bindings.

It also means any setup required for the browser needs to be done by the bindings. If you're using a Chromium-based browser or Firefox, the bindings will need to know where to find the browser executable normally, as well as make sure the profile directory is created properly. It also puts the onus of fixing any breaking changes the browser vendors do to their startup setups on to each of the binding maintainers.

Trust me, the Selenium Project used to do that and every browser release day meant a mad scramble. We would start running tests in an attempt to make sure nothing was broken. We would fix the problems and then release. This herculean effort by core contributors meant we were limited in adding new features.

Not having to scramble and making sure it was simple for client binding maintainers to keep up to date was a great push for creating the [WebDriver Specification](https://w3c.github.io/webdriver/).

## What about automatic downloads from the Selenium Project?

Well... This is something we have wanted to implement in the past but we haven't had time. Fortunately, there have been other projects that have come along and made this work easier. In the future, we are likely to try to incorporate one of these projects or we might look to see about implementing something ourselves. 

This will be something we will try look into once we have shipped Selenium 4.