teleren/devto huggingface dataset:
Build Fearlessly Podcast - Episode 1: Dissecting Static.fun
Published: 2020-04-10 16:30:34

Author: Jessie Newell
Date: March 17, 2020
[Originally published on the Fauna blog.](https://fauna.com/blog/build-fearlessly-podcast-static-fun)

---

Allen Hai ([@coetry](https://twitter.com/coetry)), software engineer at [ZEIT](https://zeit.co/), discusses how he became interested in software engineering and the journey from his high school computer science class to his dream job at ZEIT. Allen also dives the why and how behind creating the app, [static.fun](https://static.fun/), an open source project that demonstrates ZEIT's support of wildcard domains.

[Episode 1: Dissecting Static.fun on Apple Podcasts] (https://podcasts.apple.com/us/podcast/episode-1-dissecting-static-fun/id1502140620?i=1000467897113)

##Show notes##
**Static.fun Stack:**

* [ZEIT Now](https://zeit.co/)
* [FaunaDB](https://fauna.com/)
* [Next.js](https://nextjs.org/)
* [Twilio Sendgrid](https://sendgrid.com/)
* [Sentry](https://sentry.io/welcome/)
* [Pusher](https://pusher.com/channels)

**Mentioned resources:**

* [Static.fun](https://static.fun/)
* [ZEIT](https://zeit.co/)
* Follow Allen on Twitter [@coetry](https://twitter.com/coetry)
* [Mozilla developer network](https://developer.mozilla.org/en-US/)
* [Y combinator / Hacker News](https://news.ycombinator.com/)
* [Lambda School](https://lambdaschool.com/)
* [[Video] Guillermo Rauch on Next.js](https://www.youtube.com/watch?v=evaMpdSiZKk): Universal React Made Easy and Simple * React Conf 2017 
* [Fauna’s native GraphQL API](https://docs.fauna.com/fauna/current/start/graphql)
* [Svelte](https://svelte.dev/)

-----

To learn more about this podcast and Fauna, check out [Episode 0: JAMstack, FaunaDB and Fauna’s ecosystem](https://podcasts.apple.com/us/podcast/episode-0-jamstack-faunadb-and-faunas-ecosystem/id1502140620?i=1000467897112) on iTunes.
I built responsive web pages using Media Queries
Published: 2020-04-10 16:26:34

I have just completed the FCC Responsive Web Design projects. 

In my <a href = "https://dev.to/samivee/how-i-completed-the-first-two-projects-on-freecodecamp-1khf">previous article</a> I talked about how I completed the first two, since then I have move on to completing the remaining three (Product landing page, Technical Documentation page and Personal Portfolio page).

The use of media queries was non-negotiable for those remaining projects as it is stated in the user story. 

Based on my understanding, Media queries helps to specify different styles to browser and device sizes. That way the layout on a desktop could be different from a mobile device to enhance responsiveness.

After I wrote the HTML and CSS for each projects, they look great from the desktop point of view but when I adjusted to the mobile view I discovered that the pages are out of the normal flow.

This is where media queries comes in, where I had to write different CSS to adapt to the size of devices.

There are different ways to add media queries to your code. One way to do it is you add it directly inside the existing style sheet using @media rule, another way is importing a new style sheet using the @import rule or linking a separate style sheet from within the HTML document.

Using the @media rule is generally recommended to prevent additional HTTP request. 

However when adding media queries to the existing style sheet, it should be noted that the code are to be added at the bottom because CSS renders the file from top to bottom.

I look forward to building more responsive web pages using media queries in other to enhance my skills.
Select Component Ant Design 4.0 vs 3.0
Tags: react
Published: 2020-04-10 16:08:08

ถ้าให้ย้อนความทรงจำว่าหันมาใช้ Ant Design ตอนไหน จำไม่ผิดน่าจะตอนที่ Bootstrap ออก version 4 ใหม่ๆ หลังจากนั้นก็ไม่เคยหันกลับไปหา Bootstrap อีกเลย นอกจากจะไปแก้งานของคนอื่นเท่านั้น ไม่นานมานี้ Ant Design ออก Version 4.0 เปลี่ยนแปลงหลายจุด ที่ชอบมากๆ ก็คงเป็น Form ตัวใหม่ ใช้ง่าย code clean ขึ้นเยอะและถ้าจะทำ Modal Form ก็ไม่ต้องใช้ Ref แล้ว ถูกใจเป็นที่สุด

ส่วนอีกตัวนึงที่จะไม่พูดถึงก็คงไม่ได้นั่นคือ Select Component ก็เอาไว้ทำ Dropdown ให้เลือกนู่นนี่แหละ โดยปกติแล้วเราก็ไม่ค่อยคิดอะไรมาก อยากให้เลือกอะไรก็ทำ array ยัดใส่เข้าไปเลย เยอะแค่ไหนก็ไม่สน มันพิมพ์ค้นหาได้อยู่แล้ว ตอน Version 3.0 พอ array เริ่มโตมากๆ กด Dropdown ทีนึงกว่าจะขึ้นมาให้ได้เลือกก็นิ่งไปสักพัก เป็นอะไรที่แย่มากๆ คิดไว้เสมอว่าเดี๋ยวต้องจัดการมันสักหน่อย (ซึ่งก็ไม่ทำอะไรอยู่ดีปล่อยมันไว้แบบนั้นแหละ 555+) อยู่ดีๆ Ant Design ก็ rewrite Select Component ใหม่มาให้เราได้ใช้กัน ซึ่งมันเร็วขึ้นมากกกกกกกกก รู้สึกดีใจที่ยังไม่ได้แก้ไขอะไรไป อิอิ ... มาลองดูกันดีกว่าว่ามันเร็วขึ้นแค่ไหน

## Ant Design 3.0 - 1,000 items

ยัด array ไป 1,000 items กดทีนึงก็นิ่งไปนานกว่าจะขึ้นมาให้ได้เลือกใช้กัน

{% codesandbox ant-design-30-select-demo-i3qs6 %}

## Ant Design 4.0 - 100,000 items

รอบนี้มาลอง 4.0 บ้าง เพื่อโชว์ความเทพจัดไป 100,000 items จะเห็นได้ว่ากดแล้วมาทันทีเลย ใครอยากลองมากกว่านี้ก็ไปลองกันเองได้เลยนะครับ ส่วนตัวผมถ้ามี item มากกว่านี้คงหนีให้ไปใช้วิธีอื่นดีกว่าครับ

{% codesandbox big-data-ant-design-demo-y65p2 %}

## ปิดท้าย

Ant Design 4.0 มี rewrite หลายตัวมาก ไม่ว่าจะเป็น Form, DatePicker, Tree, Select, TreeSelect, AutoComplete, Table และ Grid ก็มาใช้ flex layout แล้ว ซึ่งมันดีขึ้นหลายๆ อย่างแต่ก็แลกมาด้วย break change เพียบ

ใครอยากอ่าน document แบบละเอียดก็ตามไปอ่านได้ที่ [link](https://ant.design/docs/react/migration-v4) นี้เลยครับ
Easily assign variable when using explode in PHP
Published: 2020-05-07 23:50:28

---
title: Easily assign variable when using explode in PHP
published: true
date: 2020-04-10 16:04:34 UTC
tags: 
canonical_url: https://dcblog.dev/easily-assign-variable-when-using-explode-in-php
---

I use explode all the time, for splitting strings into parts. I typically write my explodes like this:

```php
//set the string
$name = 'Joe Bloggs';

//explode where there is a space
$parts = explode(' ', $name);

//add the parts to variables
$firstName = $parts[0];
$lastName = $parts[1];
```

But I've recently found out you can assign variables during the explode. Really handy!

This is how do you do it. Using an array to specify the name variables then assign them a value from explode:

```php
//set the string
$name = 'Joe Bloggs';

//explode where there is a space and assign the indexes to named variables
[$firstName, $lastName] = explode(' ', $name);

```

A must cleaner way in my opinion.
Pip Config
Tags: python
Published: 2023-01-06 01:32:05

---
title: Pip Config
published: true
date: 2020-04-10 15:56:19 UTC
tags: Python
canonical_url: https://brandonrozek.com/blog/pipconf/
---

If you find yourself added flags to every pip command, consider adding those flag’s to a pip configuration file.

In order of importance, the configuration files will be located

- Inside the virtualenv `/path/to/virtualenv/pip.conf`
- In the user folder `~/.config/pip/pip.conf`
- Site-wide `/etc/pip.conf`

It is structured as an INI file where the blocks are the commands (`global` indicates all commands)

For an example, we can set the timeout for all commands to 60 seconds, but the timeout for the freeze command to only 10 seconds.

```
[global]
timeout = 60

[freeze]
timeout = 10

```

Boolean flags are set by assigning a value of `true` or `yes` to them

```
[install]
ignore-installed = true

```

For operating in an offline environment,

```
[global]
no-index = true
find-links = /path/to/wheels

```
Is anyone still using Atom?
Tags: discuss
Published: 2020-04-10 15:53:08

I've been using Atom since 2015, VS Code has some great features that I really dig, a more vibrant ecosystem and I think more up to date plugins but I personally can't stand the way the search results appear in a box on the left rather than getting full-screen results.  Overall I just prefer the design of Atom, it looks a little sleeker (although performance-wise I think VS Code works a bit better sometimes).

Are there any Atom fans such as myself still out there?
Fixing issues running Folding@Home on Gentoo/Sabayon Linux
Tags: foldingathome, linux, ssl
Published: 2020-04-10 15:52:03

#The problem
Directly after installing Folding@Home (FaH from now on) on recent version of Sabayon Linux (based on Gentoo Linux) there are issues with OpenSSL libraries linked. One of the dependent packages installed is `openssl-compat` which however is also too recent for ancient FaH client released in 2018.

#Source of the problems
Examining the original dependencies of FaH client is OpenSSL 1.0.1 while openssl-compat package includes version 1.0.2u which results in unrecoverable errors during FaH application runtime due to ABI changes.

#The solution
Solution is to install older OpenSSL libopenssl.so and libcrypto.so libraries. To avoid collisions with openssl-compat package, which can now be safely uninstalled (if you validate no other packages depend on it) by:`
sudo equo rm --ask --nodeps openssl-compat
`
I opted to download OpenSSL 1.0.1 from GitHub repository, compile the shared libraries and install them inplace.

This can be easily achieved by:
```bash
#clone GitHub repo
git clone https://github.com/openssl/openssl.git 
cd openssl 
# switch to 1.0.1 branch
git checkout OpenSSL_1_0_1-stable 
# configure with the same Sabayon system wide CFLAGS
CFLAG="-O2 -march=x86-64 -pipe -fno-strict-aliasing -Wa,--noexecstack" ./Configure linux-x86_64 shared 
# make libs only - libssl.so and libcrypto.so
make build_libs 
# remove now invalid symlinks in FaH client folder
sudo rm –f /opt/foldingathome/libcrypto.so.10 /opt/foldingathome/libssl.so.10 
# copy new libraries over
sudo cp ./libcrypto.so.1.0.0 /opt/foldingathome/libcrypto.so.10 
sudo cp ./libssl.so.1.0.0 /opt/foldingathome/libssl.so.10
```

Now running FaH client works correctly.

Happy folding against COVID-19! Stay safe!
JS: use spread to exclude properties
Tags: javascript, es6
Published: 2020-04-10 15:51:17

I thought I'd share this small trick with you because I find myself looking this up every now and then when I need it.

The spread operator in JavaScript can be very useful.
For example to create a copy of an object:
```js
const firstObject = {id: 0, name: 'John'};
const secondObject = {...firstObject};

console.log(firstObject);
console.log(secondObject);

// { id: 0, name: 'John'}
// { id: 0, name: 'John'}
```

But did you know you can also use it to except properties when spreading?
```js
const firstObject = {id: 0, firstName: 'John', lastName: 'Smith', age: 77 };
// take every property except age:
const {age, ...secondObject} = firstObject;

console.log(firstObject);
console.log(secondObject);
// { id: 0, firstName: 'John', lastName: 'Smith', age: 77 }
// { id: 0, firstName: 'John', lastName: 'Smith' }
```

The above example will extract `age` as own variable and will put the remaining in the object `secondObject`. You can do that with as many properties as you want.
What are your tips and tricks for beginners writing tests?
Tags: test, watercooler, discuss, beginners
Published: 2020-04-10 15:50:19

---
title: What are your tips and tricks for beginners writing tests? 
published: true
description: Where should a beginner start when writing tests? 
tags: test, watercooler, discuss, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/13ak67xyqexgrrbddlwr.png
---

Where should a beginner start when writing tests?
Tutorial: How to Connect a SQL Database to Google Sheets
Tags: tutorial, sql, database, beginners
Published: 2020-04-10 13:32:00

This tutorial uses WayScript - a rapid programming platform for developers. It's currently in beta, and we'd love feedback from the DEV community. 

##Introduction

Whatever your reason, sometimes we need to share data between different sources. Whether this be to allow certain members of your team access, enable additional data processing, data visualization, or anything else, WayScript can make this process easy. In this tutorial, let's take a look at how we can extract data from a SQL based database and write it to a google sheet.

##Connecting your Database
To start off, we'll need to access your database. To do this on WayScript, we'll first need to drag an SQL module into our workflow:

![SQL Module](https://cdn.wayscript.com/blog_img/73/1.png)

Once in our workflow, we'll need to select "Add an Account" to the left. It will be at the bottom of your already added databases, should you of already connected one.

![Connect to db](https://cdn.wayscript.com/blog_img/73/2.png)

Once we select this, we'll be prompted for the credentials of our database. We can usually find these on the settings of the database.

![Credentials](https://cdn.wayscript.com/blog_img/73/3.png)

Once we input this information, we'll be able to do reads and writes to our database using the text editor. Hovering over the pre-generated code, we get an option to edit:

![Edit Code](https://cdn.wayscript.com/blog_img/73/4.png)

Here we want to write a statement to query the desired information from our database. We'll use some some simple:

![Query Statement](https://cdn.wayscript.com/blog_img/73/5.png)

The desired data needs to be imported, and you can rename the column if you'd like. This creates a variable within WayScript that we can write to a google sheet. These creates variables will have a list type, so we'll need to loop through these to write them to google sheets.

##Looping Through a List

As mentioned, the output variables from the database will have a list type. So we'll need to loop through each value in this list to write them to a google sheet. To do this, we'll pull in the loop logic module.

![Loop Logic](https://cdn.wayscript.com/blog_img/73/6.png)

This works just as it would in a programming language, we'll select the iterable type that we want to iterate over. This will give us an item of that list to preform an action with. In this example, we have the "scores" list and iterating gives us a "score_item."

![Loop](https://cdn.wayscript.com/blog_img/73/7.png)

We'll drag in the google sheets module inside our loop. From here, we'll just need to configure a few pieces to be sure that our list is written.

![Google Sheets](https://cdn.wayscript.com/blog_img/73/8.png)

And just like that, we're writing database data to your google sheets!

##Questions, Concerns?
If there's any questions feel free to message us here on DEV or on discord. We're happy to help! If you want to see this full script template, you can find it [here](https://wayscript.com/user/derricks/O46XH_yf).
Send SMS with Twilio Question
Tags: twiliohackathon, webdev
Published: 2020-04-10 15:20:06

---
title: Send SMS with Twilio Question
published: true
description: 
tags:  twiliohackathon, webdev
---

Hello, I am trying to use SMS Api to send a message to a real Romanian phone number and the request fails with this error:
"[o-auto-1-exec-1] c.g.l.c.TwilioMessageCreator             : An exception occurred trying to send a message to +40*********, exception: The 'To' number +40********* is not a valid phone number."

My question is this, can I use SMS API with a Romanian phone number or not? Thanks for the answer.

Update: I figured it out, I created a new project for a hackathon and I could get a phone number to play with.
10 Best Practices and Recommendation to Build Single Page Application
Tags: angular, webdev, aws, agile
Published: 2020-04-10 14:34:16

Single Page Application Best Practices and Recommendations

1. The page should be more focused and clear and unused libraries should not be part of application.

2. Content should be modified into small chunks (namely as Module)

3. Package Management: Package management identifies all the dependencies in app with specific names and versions. It gives you greater control over dependencies and ensures that everyone on your team is using an identical version of library. As we are in Angular Node Module Packages (NPM) will recommended.

4. Unit and Integration Testing: Unit testing is critical part of app development. Since we are using Angular any one of the client-side unit testing frameworks such as Jasmine, Mocha or karma.

5. UI Considerations: For Single Page Applications we have to consider following design points,

    • Handling: Use different input controls (numeric input, email, date picker, color picker, autocomplete), validations on form submit, highlight errors in form inputs and propagating server-side errors on client.
    • Formatting: Apply custom formats to numbers and other values.
    • Error Handling: Propagate different kinds of client and server errors. Craft text for different nuances in errors, maintain an error dictionary and fill placeholders with runtime values.
    • Alerts and Notifications: Tell the user about important events and activities and show system messages coming from the server.
    • Layered Graphics: Understand the intricacies of CSS, the box models, floats, positioning, etc. Having a good working knowledge of CSS will help you achieve innovative designs in HTML. Instead of CSS we can also go with SAAS for rendering speed and to improve performance.

6. Version Control: Developer should manage with proper branching system through entire development. Namely branches should be as development, Testing and Staging to avoid chaos. Preferably we are using GitHub here as repository.

7. Minification and Bundling: Before deploying application into production all scripts should be minified into single file. Minification process reduce loading time and increase its performance.

8. Auditing and Google Analytics: To get metrics and usage flow of application it should implement Google analytics.

9. Operations Management

   • Continuous integration, using build servers such as Jenkins.
   • Caching data in-memory and invalidating the cache at regular intervals.
   • Handling roles and permissions and validating user requests.
   • Security, SSL certificates, and exploit-testing.
   • Deployment and staging. (Deployment and Staging will be done in Docker)

10.Browser and Mobile Compatibility: We have to verify whether our designs and layouts will support variety of browsers and mobile layouts (for both mobile and tablets).

To get further insights, talk to our experts at +1 (415) 233-4737 or reach us at info@optisolbusiness.com for a free consulting.
React Native : BMI Calculator 
Tags: react, reactnative, android, ios
Published: 2020-04-10 15:09:03

In this tutorial, you are going to learn you how to create a Body Mass Index Calculator for Android. 

Formula :- float bmi = weightValue / (heightValue * heightValue)

Copy & Paste Code From Here :- https://gist.github.com/amogh9594/4acbf6e7bbc1380801a55a0cb8025d24
🌈 VS Code Cheat-Sheet [PDF + Infographic]
Tags: vscode, beginners, inthirtyseconds, webdev
Published: 2020-04-10 15:05:27

**Visual Studio Code** is the most popular general-purpose IDE out there. Mastering it can improve your productivity phenomenally.

This cheat sheet holds some of the most useful and productive shortcuts. I have not mentioned about universal shortcuts (like Ctrl+S to save) and seldom-used commands.

I have picked the shortcuts which lie in the sweet spot of not many people knowing about them yet them being extremely useful.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bfkp5d75jcu2cnawsl2p.png)

📁 [Download](https://github.com/godcrampy/cheat-sheets/blob/master/vscode/vscode-cheatsheet.pdf) the pdf version of this cheatsheet
🌟 All my cheat-sheets are in this [repo](https://github.com/godcrampy/cheat-sheets/) (Star it!)
🚀 Find me on [Instagram](https://www.instagram.com/godcrampy/) | [Github](github.com/godcrampy) | [Twitter](twitter.com/godcrampy) | [Website](sahil.surge.sh)
😄 Have a wonderful day!
About Ruby Hash#== (Equality)
Tags: ruby, hash, documentation
Published: 2020-04-10 15:03:57

---
title: About Ruby Hash#== (Equality)
published: true
description: 
tags: ruby, hash, documentation
---

Get more information and more examples at my AboutRuby project:
* [AboutRuby project](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Hash/api/markdown.md#-equality)

Here's the write-up over at the Ruby project:
* [Ruby project](https://ruby-doc.org/core-2.7.0/Hash.html#method-i-3D-3D)

My main page is [here](https://github.com/BurdetteLamar/AboutRuby#about-ruby).

TL;DR

I've been working on enhancements to the documentation for the Ruby project.  Getting these enhancements posted to the Ruby project has been very slow.  They're not actually meeting resistance;  I know because my many PRs for enhancing class ENV were accepted (though not rapidly).  It's just that everyone is busy.

Anyhow, I'm stashing all this stuff on in my own project, called AboutRuby.  The piecemeal migration from there to the Ruby project is not going to be completed in my lifetime (I'm 77 years old).

So:  I'm going to blow my own horn here on DEV, to encourage you to use the enhanced documentation.
Update: I am not dead
Tags: cpp, motivation, writing, showdev
Published: 2020-04-10 14:55:59

As you might have noticed, there's been no update here in the last couple of months, but I want to reassure you that I am not dead.

I had to put this knowledge sharing article writing on hold because there were other parallel activities like piled office work, udemy courses, vacation and of course coronavirus.

Now I am happy to get back on track, as things are bit relaxed, starting from next Monday you may expect knowledge sharing articles again.

In the meanwhile, I would recommend you to subscribe to the newsletter on [my blog](http://www.vishalchovatiya.com/) to get notified of new articles.

BR,
Vishal Chovatiya
Use Airbnb's ESLint Config with TypeScript & Prettier in Svelte Apps
Tags: svelte, eslint, typescript, prettier
Published: 2020-04-10 14:31:51

First install the necessary dependencies:

```sh
npm i @typescript-eslint/eslint-plugin \
    @typescript-eslint/parser \
    eslint \
    eslint-config-airbnb-typescript \
    eslint-config-prettier \ 
    eslint-plugin-eslint-comments \ 
    eslint-plugin-import \ 
    eslint-plugin-promise \ 
    eslint-plugin-svelte3 \ 
    prettier \ 
    --save-dev
```

Then create 3 files in your app's root folder:

1st file: `.eslintrc.js`:

```js
module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.json"],
  },
  rules: {
    "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
    "import/no-mutable-exports": 0,
    "no-labels": 0,
    "no-restricted-syntax": 0,
  },
  plugins: ["@typescript-eslint", "svelte3"],
  extends: [
    "airbnb-typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:eslint-comments/recommended",
    "plugin:promise/recommended",
    "prettier",
    "prettier/@typescript-eslint",
  ],
  overrides: [
    {
      files: ["**/*.svelte"],
      processor: "svelte3/svelte3",
    },
  ],
};
```

2nd file: `.prettierrc` - sample content:

```json
{
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": true,
  "tabWidth": 4,
  "printWidth": 100,
  "overrides": [
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript"
      }
    }
  ]
}
```

3rd file: `.eslintignore`:

```
node_modules
```

That's all 🤓