teleren/devto huggingface dataset:
How to record your iPhone screen with a Macbook
Tags: ios, watercooler
Published: 2021-02-12 06:58:54

While doing yesterday's article about [console.log on Chrome for iOS](https://daily-dev-tips.com/posts/console-log-on-chrome-for-ios/), I needed to screen record my iOS device.
I started looking at which app could help me with this process.

It turns out it's super simple with a pre-installed Mac application. All you have to do is connect your iOS device to your Macbook.

![Screenrecord iPhone with Quicktime for Mac](https://cdn.hashnode.com/res/hashnode/image/upload/v1612703362727/wnWivZk5i.gif)

## Record iPhone screen with Quicktime for Mac

First, open the Quicktime application on your Macbook.

The next step is to connect your iPhone with the lightning cable to your Macbook. (Depending on your Macbook, you might need a converting hub).

With the iPhone connecting, click Quicktime player menu -> File -> New Movie Recording.

![Quicktime movie recording](https://cdn.hashnode.com/res/hashnode/image/upload/v1612702685042/6sOyCJLUS.png)

You can also see the option for "Screen recording", but that will only do your Mac screen.

Once you clicked the Movie Recording option, you should see a block saying "The camera is off".

![Quicktime option](https://cdn.hashnode.com/res/hashnode/image/upload/v1612702774410/th58s3FmQ.png)

If you hover this block, it will give you some options.
We need to click the little arrow next to the record button.

![Quicktime arrow](https://cdn.hashnode.com/res/hashnode/image/upload/v1612702851727/eAHc0LT-A.png)

Clicking this arrow will show you some options, and if your iPhone is connected, it will be an input source.

![iPhone screen capture using Quicktime on Mac](https://cdn.hashnode.com/res/hashnode/image/upload/v1612703130019/vLypLLIus.png)

Once selected, it shows the current screen of your iPhone.

![iPhone in Quicktime](https://cdn.hashnode.com/res/hashnode/image/upload/v1612703204221/os2Zp6-V7.png)

And there you go, we now have the option to present or screen capture our iPhone on our Macbook.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How to do Web Scraping with Ruby on Rails?
Tags: rails, technology, datascrapinginrails
Published: 2021-02-15 14:34:21

---
title: How to do Web Scraping with Ruby on Rails?
published: true
date: 2021-02-12 06:41:27 UTC
tags: RubyonRails,Technology,DataScrapinginRails,rails
canonical_url: https://www.botreetechnologies.com/blog/web-scraping-with-ruby-by-processing-csv/
---

![web scraping with ruby (https://www.botreetechnologies.com/blog/wp-content/uploads/2021/02/web-scraping-with-ruby.png)

This article is about How to do simple ruby web scraping by processing CSV.

In this article, we will create a Ruby on Rails application to scrap the link uploaded from a CSV file and find the occurrence of the link on a particular page.

In the below [Ruby on Rails application development](https://www.botreetechnologies.com/ruby-on-rails-development), the user needs to pass a CSV file and list of the user’s email to whom the parsed CSV will be sent.

In the CSV file, there will be 2 columns

1. referal_link
2. home_link

###Let’s start creating a Rails Application

 - Run the below command to create a new rails application

**$ rails new scrape_csv_data**

**$ cd scrape_csv_data**

 - Then, we will generate an Upload CSV module. Run the below command.

**$ rails g scaffold UploadCsv generated_csv:string**
csv_file:string

This will create all the required models, controllers, and migrations for csv_file. Run the migration using the below command. 

The post [How to do Web Scraping with Ruby by Processing CSV](https://www.botreetechnologies.com/blog/web-scraping-with-ruby-by-processing-csv/) appeared first on [BoTree Technologies](https://www.botreetechnologies.com/blog).
RPI pico:no module named 'array'
Published: 2021-02-12 06:03:54

測試 Raspberry Pi Pico 板子的 PIO 功能時遇到這樣的錯誤：

```
ImportError: no module named 'array'
```

查了[資料](https://github.com/micropython/micropython/issues/6837)後發現是[官方 20210202 的建製版本](http://micropython.org/resources/firmware/rp2-pico-20210202-v1.14.uf2)漏掉了 array 模組, 只要改用[每日建製版本](http://micropython.org/download/rp2-pico/)即可。
543. Diameter of Binary Tree
Tags: tree, javascript, algorithms, leetcode
Published: 2021-02-12 05:27:27

###Description:
Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a binary tree is the length of the longest path between any two nodes in a tree. This path may or may not pass through the root.


###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// Depth first search approach
var diameterOfBinaryTree = function(root) {
    let diameter = 0;
    dfs(root);
    return diameter;
    
    function dfs(node) {
        if (!node) return 0;
        
        const left = dfs(node.left);
        const right = dfs(node.right);
        
        // update diameter at every node
        diameter = Math.max(diameter, left + right);

        // update the max path of the current node
        // 1 is the height of the node itself + longest path of children
        return 1 + Math.max(left, right);
    } 
};
```
SmolCSS.dev - Minimal Modern CSS Snippets
Tags: css, webdev, news
Published: 2021-02-12 05:20:44

This week I launched my latest CSS-related project - [SmolCSS.dev](https://smolcss.dev) - which showcases minimal snippets for modern CSS layouts and components.

SmolCSS is intended to be a companion reference to my in-depth tutorials found at [ModernCSS.dev](https://moderncss.dev).

So far, you can learn how to:
- create a responsive CSS grid layout
- create a responsive flexbox grid layout
- 🔥 center anything 🔥
- enable responsive padding
- create a responsive sidebar

The selected snippets use _just enough_ CSS to achieve the layout result. This is not to be clever, but to showcase how much we can do with little effort using modern CSS!

More snippets will be added over time, so be sure to bookmark [SmolCSS.dev](https://smolcss.dev) or [grab the RSS feed](https://smolcss.dev/feed/) to stay updated!

> This project was kickstarted when I joined [Colby Fayock](https://twitter.com/colbyfayock) for his live stream show Colbyashi Maru. [Catch the replay](https://www.youtube.com/watch?v=nIiOwNb7KR4) and learn about the static site generator Eleventy while watching me build the base of SmolCSS.dev.

➡️ What solutions would you like me to explore next?
Simple Tips on How to easily Deploy an Open-Source TypeScript Internal Link Client for Next.js
Tags: nextjs, typescript, pathpida
Published: 2021-02-12 05:13:15

The **pathpida** library is best described as an open-source TypeScript friendly internal link client for **Next.js and Nuxt.js**. Apart from the fact that it's minimalistic in nature, you would love to lay your hands on it because you don't need to configure anything as you can make use of the application on the get-go after installation. 

For the manipulation of internal links in **Next.js/Nuxt.js**, [pathpida](https://github.com/aspida/pathpida) does help in automatically generating type definition files. 

This open-source application has four dependencies: [@nuxt/config](https://nuxtjs.org/docs/2.x/directory-structure/nuxt-config/), [@chokidar](https://www.npmjs.com/package/chokidar), [minimist](https://www.npmjs.com/package/minimist) and [next](https://nextjs.org/). 

#Features of pathpida
1. Type Safety
2. Zero configuration
3. Zero runtime

##**1. How to Install pathpida**
You can always use npm or yarn to provide installation for the application. 

Using [npm](https://www.npmjs.com/), simply input:
**$ npm install pathpida npm-run-all --save-dev**

Using [Yarn], simply input:
**$ yarn add pathpida npm-run-all --dev**

###**2. Setup for Next.js**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/go6t1y45ppl52qqrml3c.png)

###**3. How to Use pathpida for Next.js**
You can simply do this in two ways

**The first method:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9xr3frt29d83sdabji7u.png)

**The Second Method:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ybumharqt26fnfwhac7a.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h2l5y58271bligml2nif.png)

####**4. How to Define Query for Next.js**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9gjc3kxy0fv1n02nb2nr.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/towtfrzvaz4ulzg1z8o8.png)

#####**5. Generate Static Files Path for Next.js**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/woxnjk6ziykf77jwp18h.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mb47fv39vl332i8s9g7v.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oydz34jzvf7bs6ztxn30.png)


######**How I simply implemented pathpida in My Last Project**

![Alt Text] (https://dev-to-uploads.s3.amazonaws.com/i/3ypiwhoob9ptz5jxugdm.jpeg)
![Alt Text] (https://dev-to-uploads.s3.amazonaws.com/i/niqb893k82gwtcbmiye7.jpeg)


######**Functions of pathpida to Next.js**

1) Recursively lists all the files in the pages folder into a single file called path.ts.

2) It helps extract link parameter names/values.

3) it also adds type restrictions to the Link component.

4) probably relevant, it has a live reload functionality that runs along side next dev script, which helps autogenerate a new list in path.ts at every change.

**Summary**
It’s amazing how simple is to deploy pathpida in 2021. We used tools like Typescript, Next.js, etc. Hope you enjoy and find the article useful.
Essential Considerations to Hire ReactJS Development Company

Tags: reactjsdevelopment, reactjssolutions, reactjsservices
Published: 2021-02-12 05:10:31

Every day we observe, businesses are becoming more inclined to get a mobile app developed. But recent studies suggest that mobile apps are becoming inefficient and are losing their appeal to many of the users. In such a case, what is a better solution for businesses who want to become more profitable in the digital era? Building Progressive Web App (PWA), which are accessible both on desktop and mobile but again, the question comes which web technology to integrate for a robust PWA? There are numerous technologies & programming languages to choose from. Still, for building an efficient and powerful PWA, a leading technology would be ReactJS, which is launched by Facebook, which has become a favorable choice over the years. And to utilize ReactJS potential to the fullest, a prominent ReactJS development company is a business need.

Original source: [Essential Considerations to Hire ReactJS Development Company](https://www.cerdonis.tech/reactjs-development-company-in-usa/)
JAVASCRIPT Callbacks
Tags: javascript
Published: 2021-02-12 04:51:32

## Simple Callback Usage Examples

Callbacks offer a way to extend the functionality of a function (or method) without changing its code. This approach is often used in modules (libraries / plugins), the code of which is not supposed to be changed.

Suppose we have written the following function, calculating the sum of a given array of values:

```js
function foo(array) {
 var sum = 0;
 for (var i = 0; i < array.length; i++) {
  sum += array[i];
 }
 return sum;
}
```

Now suppose that we want to do something with each value of the array, e.g. display it using alert(). We could
make the appropriate changes in the code of foo, like this:

```javascript
function foo(array) {
 var sum = 0;
 for (var i = 0; i < array.length; i++) {
  alert(array[i]);
  sum += array[i];
 }
 return sum;
}
```


But what if we decide to use console.log instead of alert()? Obviously changing the code of foo, whenever we
decide to do something else with each value, is not a good idea. It is much better to have the option to change our
mind without changing the code of foo. That's exactly the use case for callbacks. We only have to slightly change
foo's signature and body:

```js
function foo(array, callback) {
 var sum = 0;
 for (var i = 0; i < array.length; i++) {
  callback(array[i]);
  sum += array[i];
 }
return sum;
}
```


And now we are able to change the behaviour of foo just by changing its parameters:

```js
var array = [];
foo(array, alert);
foo(array, function (x) {
 console.log(x);
});
```
Custom Search app using Yelp Data and NLP and deployed to AWS EKS (via Codepipeline) - Part 1
Tags: aws, kubernetes, python, nlp
Published: 2021-02-12 04:34:35

While learning some Machine learning, I came up with this idea to better the search on Yelp based on those tons of reviews which get entered everyday on Yelp. This app really helped me learn the ML concepts and understand the complexities of deploying an ML model. Through this post I wanted to share what I have learnt so someone can use this in their path to learn.

Since its really a broad topic and the app includes so many moving components, I will be covering the app and its deployment in two posts. The series will consist of two parts:

<b>1st Post( this one):</b> Overview about the application and about its underlying logic. This will be more about how the app works and the overall architecture of the whole app ecosystem  

<b>2nd Post:</b> In 2nd part I will be discussing how I deployed the app on AWS S3 and AWS EKS (Elastic Kubernetes Service) cluster using Codepipeline  

Full post for Part 1 can be found here: https://amlanscloud.com/yelpseacrhapp/  

A limited demo of the app can be found here:  
https://yelp-search-app-demo.netlify.app/  

It has a limited dataset included. Only demo zipcode of 61820 can be searched. For e.g: 61820 pasta
Develop new Terraform module resources using targets
Tags: terraform, automation, devops
Published: 2021-02-12 04:13:53

---
title: Develop new Terraform module resources using targets
published: true
description: 
tags: terraform, automation, devops
//cover_image: https://direct_url_to_image.jpg
---

A feature of the Terraform CLI is the ability to `apply` or `destroy` or `plan` a specific resource within your module. For example, take an example set of operations in a module like:

```hcl
resource "null_resource" "file1" {
    environment = {
       resource = "file1"
    }
    provisioner "local-exec" {
       command = "echo $(date) ${resource} | tee -a dates.log"
    }
}

resource "null_resource" "file2" {
    environment = {
       resource = "file2"
    }
    provisioner "local-exec" {
       command = "echo $(date) ${resource} | tee -a dates.log"
    }
}
```

This would just apply as echoing two dates and the name of the resource, some number of seconds apart into the log. However, let's assume these must become discrete steps; for example, maybe `null_resource.file2` only needs to be applied a second time as a check on a running environment, but none of the other steps in the plan do. You can use `-target` to operate only on `null_resource.file2` using this format, which works for **any** resource type:

```bash
terraform {plan,apply,destroy} -target=${resource_type}.${resource_name}
```

so to `plan` for `null_resource` named `file2`:

```bash
terraform plan -target=null_resource.file2
```

This feature is commonly used for operations like modifying an instance of a module (`-target=module.name.resource.name`) or applying partial changes to a subset of interdependent resources in your plan (for example, if you create a new volume, or import one not managed by Terraform, you can update a resource for a VM to attach that volume, and then apply the resource for the volume, then the VM resource using this method), but it's also helpful for developing modules:

Using this feature of the Terraform CLI, you can partially execute your plan as you add or remove resources-- this can save you time in extending your module's plans.
Makerwork 003
Tags: podcast, python, api, makerwork
Published: 2021-02-13 02:40:27

---
title: Makerwork 003
published: true
date: 2021-02-12 04:00:06 UTC
tags: #podcast, #python, #API, #makerwork
canonical_url: https://makerwork.netlify.app/posts/makerwork003/
series: Makerwork
---

Hey Makers! 👋 

Welcome to the **Digest 003** of the newsletter. Alex, our featured maker, is creating a valuable platform for the community, sort of like **Hacker News**, but for podcasts. 🏆

If you haven’t heard of **Hacker News** it is a social news website focusing on technology and startups. Most of the posts that make it to the front page are community-driven, hence it is important to curate your post such that it’s tailored to your audience.

According to RJMetrics the number of submissions made to HN each week has held steady. Participation rate is around 20-30% where users who participate more than 6 months tend to remain active for longer, despite the growth in HN users.

Looking at the best HN posts some subject matters appear to remain constant, e.g. programming, while others fall into and out of current trends. The median score for a HN front page story is 140, however posts that score >4K can be considered as viral.

As Alex said the biggest value of the platform is from the community. But you cannot have a community if you don’t have content, and you cannot have content if you don’t have a community. ⭐️

[SUBSCRIBE FREE](https://makerwork.substack.com)

*The Makerwork newsletter includes interviews with makers featured in the email sharing their insights about open-source, their product, blog and work.*
Tree - Data Structure
Published: 2021-02-12 03:39:58

Trees are a type of non-linear data structure, they store and organize data hierarchically.
The Tree Data Structure connects nodes in a parent - child relationship. A great way to think about this data structure is to think of as a family tree. 

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

Above is my family tree. Benny, Pat, Lena and Joseph are my grandparents. Biagio A and Carmela are my parents. Angelina is my sister ( my parents' children).  A tree is a collection of Nodes, each node contains data. 

The beginning of the tree, or the first node, is called the root node. Tree nodes connect to each other by links( more commonly called edges). Edges manages the relationship between nodes. The last nodes on the tree without any children are called Leaves. A Parent is a node that has a link to a child node. Another thing to note about trees is the height of a tree is the length of the longest path to a leaf. Also, the depth of a node is the length of the path to its root! 
 
I found that Trees are easier to understand compared to other data structures because the ability to compare it to family tree or an actual tree! I hope you enjoyed this high level view of Tree Data Structures!
Desafio #01 - CSS 30 dias
Tags: codepen
Published: 2021-02-12 03:35:38

Este projeto utiliza Tipografia fluida e animação degradê no background com CSS3 e keyframe.

https://lnkd.in/dq95DUP


#Tipografiafluida #CSS3 #30daysofcss #30diasdeCSS #30dayscss #desafio

{% codepen https://codepen.io/LuizCorrea-dev/pen/LYbbdQW %}
Better Perl: Subroutine Signatures and Type Validation presentation slides
Tags: programming, perl
Published: 2021-02-13 22:22:21

---
title: Better Perl: Subroutine Signatures and Type Validation presentation slides
published: true
date: 2021-02-12 03:34:08 UTC
tags: Programming,Perl
canonical_url: https://phoenixtrap.com/2021/02/11/slides-from-tonights-houston-perl-mongers-presentation/
---

Here they are [from tonight’s presentation](https://dev.to/mjgardner/i-m-presenting-at-houston-perl-mongers-this-week-532g), typo-corrected and ready for review. Video to follow.

![Animated slideshow of Better Perl: Subroutine Signatures and Type Validation](https://i1.wp.com/phoenixtrap.com/wp-content/uploads/2021/02/Mark-Gardner%E2%80%94Better-Perl-with-Subroutine-Signatures-and-Type-Validation.gif?resize=320%2C180&ssl=1 "Animated slideshow")<figcaption>It seemed like the time just flew by…</figcaption>

[Download](https://phoenixtrap.com/wp-content/uploads/2021/02/Mark-Gardner%E2%80%94Better-Perl-with-Subroutine-Signatures-and-Type-Validation.pdf)

The original article that inspired this presentation is [here](https://dev.to/mjgardner/better-perl-with-subroutine-signatures-and-type-validation-2bck).
How to use live-server as a small development server
Tags: webdev, tutorial
Published: 2021-02-12 02:54:25

# Live-server

[https://www.npmjs.com/package/live-server](https://www.npmjs.com/package/live-server)

Live-server is a small development server with live reload capability. Use it for "hacking" your HTML/JavaScript/CSS files, but do not to deploy the final site.

There are two reasons for using this:

**AJAX requests don't work with the `file://` protocol due to security restrictions, i.e. you need a server if your site fetches content through JavaScript. Having the page reload automatically after changes to files can accelerate development.**

## How To

Create a directory ./www 

```bash
mkdir ./wwww
```

### Edit a simple HTML page such as index.html in the ./www directory

```html
<html>
  <header></header>
  <body>
    <h1>This is a simple test</h1>
  </body>
</html>
```

### Run the command live-server to expose the directory

```bash
live-server ./www

```
How to add Tailwind CSS to an existing React project 🙋
Tags: tailwindcss, tutorial, react
Published: 2021-02-12 02:44:21

# How to add taillwindcss to an existing React project

Go to directory of your React project and use yarn or **npm** to add **[taillwindcss](https://tailwindcss.com/)** **postcss-cli** **autoprefixer**

Using yarn

```bash
yarn add tailwindcss postcss-cli autoprefixer -D
```

Then type this command in the terminal to create the default configuration

```bash
npx tailwind init tailwind.js --full
```

A **taillwind.js** file is created in the current directory

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override

Create a **postcss.config.js** file

```bash
touch postcss.config.js
```

```jsx
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};
```

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Create an **assets** directory in the **src** folder

```bash
mkdir ./src/assets
```

Create a file called **taillwind.css** in ./src/assets

```bash
touch ./src/assets/tailwind.css
```

Type in tailwind.css:

```css
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
```

Modify the **package.json** file as follows:

```json
"scripts": {
    "start": "yarn watch:css && react-scripts start",
    "build": "yarn build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
```

A file called **main.css** will be generated each time we start the application

Then import the file **./src/assets/main.css** in the **App.js** file (or the root file of the application)

```jsx
import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
```