teleren/devto huggingface dataset:
How to launch Jekyll project in VS Code
Tags: jekyll, vscode, webdev, tutorial
Published: 2021-12-12 12:56:20

There is many extensions and multiple ways to run/launch/debug a project using a simple F5 key! I always developed web projects with Jetbrains PHPStorm, But last week I had to do this with VSCode and the first thing I encountered was the simple execution of the Jekyll project.  

You can simply run the whole project with this command :

```sh
bundle exec Jekyll serve
```

But how can we execute this command with the F5 key? This is where it gets a little annoying. VSCode can debug projects when a supported extension installed and the problem is that Jekyll extensions can not run/debug project.

With a little effort and testing different ways, I found the best way to do that. We can combine **Task** and **Launch configuration**.

1- Create `tasks.json` in `.vscode` folder like this:

```json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "jekyll",
      "command": "bundle exec jekyll serve",
      "type": "shell"
    }
  ]
}
```

This task will run the command for us.

2- Create `launch.json` file like this:

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "attach",
      "name": "Attach",
      "preLaunchTask": "jekyll"
    }
  ]
}
```

We use Firefox launch configuration to open our browser, and also run a `preLaunchTask` before that! 

Now you debug your project and open Firefox automatically by press the lovely F5 key 🤩
Sharing A Conversion Rate Optimization (CRO) Study Case for building a highly Lucrative Lead Gen Business
Tags: searchengineoptimization, marketing, conversionrateoptimization, leadgen
Published: 2021-12-12 12:30:58

_Leon_
Advice I would give myself 7 years ago for building a highly lucrative Lead Gen Business…
#1. Choose an industry that sells hi-ticket and has decent profit margins.
#2. Choose a market that has a shorter customer sales cycle for their leads converting.
#3. Sell leads that have high buyer urgency and limited to market disrupt.
#4. Only sell leads to established hungry businesses that can close leads - forget the 'back yard barrys' and one-man-bands.
#5. Know as much about how your target market business operates as much as the biz owner would.
#6. Speak in your prospect/ clients language and know what wakes them up at 1am in the morning with what your solution solves for them.
#7. Don't sell leads or phone calls - sell revenue growth and you being a trusted advisor to give them more business certainty.
#8. Position yourself as a niche specific business growth expert, NOT as a lead gen expert or digital marketing business. Otherwise you're just a commodity and will always be perceived on price.
#9. With your business, focus your time more on mastering communication, negotiation, delegation, marketing and sales. Outsource everything else that doesn't make you at least $500 - $1000 per hour.
#10. The quality of the trust & the value you bring to the relationship with the client and their business, will always determine the revenue you will receive from it.
#11. Don't just rely on organic methods for generating leads for your clients. Speed, quality and consistency always counts
#12. Become an expert with what converts high quality leads better than everyone else - Get good with Conversion Rate Optimization (CRO), creating offers, hooks & Copywriting.
#13. Never Ever Ever give away leads to just win a prospect over. It's so much harder raising the bar from zero to selling premium leads. Just focus on removing as much risk as possible for getting clients started and you will do way better in the long run.
There's probably another 20 more critical points I would go over but these are my main I would always start from, if I was to do it all again. Hope this helps a few newbies getting into the Lead Gen game 😎👌🏻
📰👈
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnpvwzsnglc1ev43k8cq.png)
87 👍🏽14 💟103 filtered from 49 💬🗨
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ne2io289su1aut1bgw8n.png)
Full-Text Original Article with Better CSS [example.com]: [Sharing A Conversion Rate Optimization (CRO) Study Case for building a highly Lucrative Lead Gen Business](https://seopics.eu.org/sharing-a-conversion-rate-optimization-cro-study-case-for-building-a-highly-lucrative-lead-gen-business/)
Has anyone used Scrimba and was it worth it?
Tags: webdev, scrimba, frontend, beginners
Published: 2021-12-12 12:27:37

Okay,so I've been trying to learn WD for a few months (i think) and I've been using resources such as freeCodeCamp and TOP, both of which are resource rich and quite possibly really great tools, however they both are centred around reading a lot and then doing. 

In my last two posts I've indicated an issue with flexbox and not getting my head around it and then I found a free flexbox tutorial on Scrimba and so far, it's really helping understand things I was struggling with, the plus side, for me is that it's visual and interactive at the same time. They offer a Front-End career path which is a paid for option, which I'm cool with - I'm just wanted to know if anyone has done it before or any of their other courses and did you find it helped?
Quick TS Tips: Extracting a return type from a function
Tags: typescript
Published: 2021-12-12 12:49:56

---
title: Quick TS Tips: Extracting a return type from a function
published: true
date: 2021-12-12 12:27:12 UTC
tags: typescript
canonical_url: https://relatablecode.com/quick-ts-tips-extracting-a-return-type-from-a-function/
---

![Splash](https://cdn-images-1.medium.com/max/1000/0*Zmp6tzDmQws1Iq05)
_Photo by Spencer Davis on Unsplash_

As part of an ongoing series of tips, I’m documenting some TS Tips.

If you’re curious about how to extract a type from an array, check out this [blog post](https://relatablecode.com/quick-ts-tips-extracting-a-type-from-an-array/)!

As I mentioned in that blog post working with GraphQL generated types can be quite cumbersome at times especially if you intend to do any post-fetching manipulation to the data.

However, with some Typescript functions, we can quickly extract a type from the result of a function!

### The example

Let’s take for example this simple type:

![Person Type](https://cdn-images-1.medium.com/max/552/0*6shoEVA6qIhfvhsw)

Nothing too crazy just a simple object with a few properties.

As well as this simple function:

![Transformation function](https://cdn-images-1.medium.com/max/1024/0*iFuMmuz0xBcPiEAw)

As we can see in the function we receive a simple object type and we manipulate it adding in some new properties. For the sake of this example, the manipulation isn’t too complex and you could probably just extend the original type. More information on extending [here](https://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces).

However, if we were to assume we don’t have the original typing declared or the manipulation is considerably more complex it would be simpler just to extract the type from the result of the function.

### Extraction Type

The following utility type from Typescript lets us directly extract the type!

![Return type](https://cdn-images-1.medium.com/max/1023/0*Wvo0vb3fK2uOoVUy)

Now we can set an alias or just directly use the type around our application to feel a little safer when we’re manipulating the data. This is awesome!

Now if we go through the entire series of steps:

![Full example](https://cdn-images-1.medium.com/max/1024/0*T3E9u2AW_9QEBggd)

No errors when sending in myself to the transformation function and now we can use the type anywhere else in the application!

Here’s a little sandbox to play around with the typing:

If you have any more tips regarding Typescript leave them in the comments below!

More content at [Relatable Code](https://relatablecode.com)

_Originally published at_ [_https://relatablecode.com_](https://relatablecode.com/quick-ts-tips-extracting-a-return-type-from-a-function/) _on December 12, 2021._
[Binary Search]Find the Largest Number in a Rotated List
Tags: algorithms, java, programming, 100daysofcode
Published: 2021-12-12 12:22:39

# [Description](https://binarysearch.com/problems/Find-the-Largest-Number-in-a-Rotated-List)

Given a list of integers `nums`, sorted in ascending order, and a number `target`, return the index where `target` should be inserted to keep `nums` sorted. If `target` already exists in `nums`, return the largest index where `target` can be inserted.

This should be done in O(`log*n*`).

**Constraints:** 

- `1 ≤ n ≤ 100,000` where `n` is the length of `nums`

## Example 1

### Input

```
nums = [1, 2, 4, 5]
target = 3
```

### Output

```
2
```

---

## Example 2

### Input

```
nums = [1, 1, 1, 2, 4, 5]
target = 1
```

### Output

```
3
```

---

## Example 3

### Input

```
nums = [1]
target = 0
```

### Output

```
0
```

---

# Intuition

# Implementation

```java
import java.util.*;

class Solution {
    public int solve(int[] nums, int target) {
        int left = 0, right = nums.length;
        while (left < right) {
            int mid = (right + left) / 2;
            if (nums[mid] > target) {
                right = mid;
            } else {
                left = mid + 1;
            }
        }
        return left;
    }
}
```

## Time Complexity

- Time: O(logn)
- Space: O(1)
Doodle 0.6.3 Released
Tags: javascript, webdev, kotlin, showdev
Published: 2021-12-12 12:11:51

[**Strongly Typed Sliders**](https://nacular.github.io/doodle/docs/ui_components/overview#slider)

`ValueSlider`, `Slider` and `CircularSlider` were previously tied to a `Double`. This meant it was not easy to force use cases where integer values would be more appropriate. This is now fixed, as these controls are now strongly typed to a numeric value instead of only supporting Double.

    val slider = Slider(10 .. 20)
    slider.value = 11.2 // will not compile since slider has a type of Int

[**More Flexible Layouts**](https://nacular.github.io/doodle/docs/positioning#deciding-when-layout-happens)

Layouts are generally triggered whenever their container's `size` changes or a child of the container has a `bounds` change. But there are cases when this default behavior does not work as well. A good example is a Layout that depends on a child's `idealSize`. Such a Layout won't be invoked when the `idealSizes` change, and will be out of date in some cases.

This is now fixed by giving Layouts a chance to act when min/ideal-size changes for children of a Container. There are actually 3 new APIs that provide a lot of flexibility in how Layouts behave.

    public fun requiresLayout(container: PositionableContainer, old: Size, new: Size): Boolean = true
    public fun requiresLayout(child: Positionable, of: PositionableContainer, old: Rectangle, new: Rectangle): Boolean = false
    public fun requiresLayout(child: Positionable, of: PositionableContainer, old: SizePreferences, new: SizePreferences): Boolean = false

[**Form Controls**](https://nacular.github.io/doodle/docs/ui_components/form_controls)

* New `switch` and `switchList` form controls
* New `spinner` form control
* New `framed` form control to wrap other controls in a configurable container
* `radioList`, `checkList`, `named` and `labeled` form controls now allow a custom renderer and insets for their container
* sub-forms now allow custom `Insets` and `behavior`
* New `check` form control with arbitrary view as annotation

[**Doodle**](https://github.com/nacular/doodle) is a pure Kotlin UI framework for the Web (and Desktop), that lets you create rich applications without relying on Javascript, HTML or CSS. Check out the [documentation](https://nacular.github.io/doodle) and [tutorials](https://nacular.github.io/doodle-tutorials) to learn more.
Web Development on android!
Tags: webdev, javascript, android, tutorial
Published: 2021-12-12 11:56:48

## What is web development?
Web development is the work involved in developing a website for the Internet.

---

## Is it possible on android?
The answer is yes! Web development is possible in android. Here on android there are many IDE and coding apps to do that!

---

## Which is best App for web dev?
Here are list of top 3 apps I personally use for web development!
1. [Code editor by rthym software](https://play.google.com/store/apps/details?id=com.rhmsoft.code)
2. [Acode: premium](https://play.google.com/store/apps/details?id=com.foxdebug.acode)
3. [Acode: free version](https://play.google.com/store/apps/details?id=com.foxdebug.acodefree)

---

## How can we get inspect element on android?
The answer is simple! There is an awesome open source console developed for android named [Eruda](https://github.com/liriliri/eruda)

**How to use Eruda in any browser?**
1. Create a new bookmark.
2. Set any name
3. Set URL to
```javascript
javascript:(function () { var script = document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
```

<u>Screenshot:</u>
![Bookmark Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxz80jtdoyoh7kjic013.jpg)

**How to use inspect element?**

To start console (inspect element) on any webpage just visit that webpage then search name of your saved bookmark and click to load it.

<u>Screenshot 1:</u>
![Searching Bookmark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msryjz2dhpmekipvy2aw.jpg)

<u>Screenshot 2:</u>
![Eruda Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg3hhe0nvrgr1m4zf291.jpg)

> Click that setting icon to open your inspect element!

---

## Here is a responsive website designed on android:
[Eagle - Official Website](https://www.eaglenetwork.tk)

---
[Binary Search]Find the Largest Number in a Rotated List
Tags: algorithms, java, 100daysofcode, programming
Published: 2021-12-12 11:43:22

# [Description](https://binarysearch.com/problems/Find-the-Largest-Number-in-a-Rotated-List)

You are given a list of unique integers `nums` that is sorted in ascending order and is rotated at some pivot point. Find the maximum number in the rotated list.

Can you solve it in O(log*n*)?

**Constraints:** 

- `n ≤ 100,000` where `n` is the length of `nums`.

## Example 1

### Input

```
arr = [6, 7, 8, 1, 4]
```

### Output

```
arr = [6, 7, 8, 1, 4]
```

### **Explanation**

```
The original sorted array of [1, 4, 6, 7, 8] was rotated at index 2 and results in the input array [6, 7, 8, 1, 4,]. And the largest number is 8.
```

---

## Example 2

### Input

```
arr = [1, 2, 3]
```

### Output

```
3
```

---

## Example 3

### Input

```
arr = [1]
```

### Output

```
1
```

---

## Example 4

### Input

```
arr = [10, 1, 2, 3, 4, 7]
```

### Output

```
10
```

---

# Intuition

1. Binary Search
2. if `(arr[mid+1] < arr[mid])`, `mid` is the largest value index

# Implementation

```java
import java.util.*;

class Solution {
    // Time=O(logn), space=O(1)
    public int solve(int[] arr) {
        int left = 0, right = arr.length - 1;
        while (left < right) {
            int mid = left + (right - left) / 2;
            // 0....mid, mid+1....right
            if (mid + 1 < arr.length && arr[mid + 1] < arr[mid]) {
                return arr[mid];
            }
            if (arr[left] <= arr[mid]) {
                // left side sorted
                // 8,9,10,4,5,6
                left = mid + 1;
            } else {
                right = mid;
            }
        }
        return arr[left];
    }
}
```

## Time Complexity

- Time: O(logn)
- Space: O(1)
Apache Log4j RCE 脆弱性 (CVE-2021-44228): 攻撃試行を検出
Tags: security, log4j, vulnerability, cve
Published: 2021-12-12 11:29:29

本日、[Apache Log4j](https://logging.apache.org/log4j/2.x/) の JNDI ("Java Naming and Directory Interface") 機能に関わる RCE 脆弱性 ([CVE-2021-44228](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-44228)) に関して、当社のスイスにあるサーバーで攻撃の試みが観測されました:

![access log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36tl00kpnd3uza8rl8yo.png)

日本のサーバーにおいてはまだです。

(なお、当社のサーバーは [OpenBSD](https://www.openbsd.org/) を基盤とし、且つ JRE の無い環境を維持しているため、本件に関して安全です。)

---

本記事は[小社のツイート](https://twitter.com/scqrinc/status/1469987826313826307)をもとにしています。
Apache Log4j RCE vulnerability (CVE-2021-44228): Attack trials detected
Tags: security, log4j, vulnerability, cve
Published: 2021-12-12 11:26:44

Today, our company detected attack trials on [Apache Log4j](https://logging.apache.org/log4j/2.x/) RCE vulnerability ([CVE-2021-44228](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-44228)) due to its JNDI ("Java Naming and Directory Interface") features to one of our servers in Swiss:

![access log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36tl00kpnd3uza8rl8yo.png)

As to those in Japan, not yet.

(Besides, based on [OpenBSD](https://www.openbsd.org/) and maintained to be free from JRE, they are safe on the issue.)

---

This post is based on [the tweet by my company](https://twitter.com/scqrinc/status/1469987286477524992).
New library using JavaScript, what do you think?
Published: 2021-12-12 10:54:15

**TxtAnime** It is a simple library to add some effects to texts using JavaScript and CSS.

project : [https://github.com/mohamedfrindi/TxtAnime.js](https://github.com/mohamedfrindi/TxtAnime.js)

Note: I am just a beginner, the goal of creating this library is to learn new skills
My Student Form JS Validation Project
Tags: html, css, javascript
Published: 2021-12-12 10:23:14

Hello All,
   I am MahilanJayapraksh i have posted a project after long time on Dev Community. i have pasted it on codepen. i will share the link please go through on it.
                 https://codepen.io/mahilanjp/pen/abLBZGV

                                                             Regards,
MahilanJayaprakash(MJD)
mahilan.jp@gmail.com
It's been a week and I'm still stuck
Tags: css, webdev, flexbox, beginners
Published: 2021-12-12 10:19:52

I wrote a post a week or so ago about Flexbox and I'm still not getting it. 

I'm trying to work through The Odin Project and I'm at the end of the CSS Fundamentals and before moving on to the next section the last project is designed around Flexbox. It also seems that FB is quite instrumental in front-end. I don't know what it is that I don't understand but I've read so many materials and watched so many tutorials and tried to do it but I just can't seem to get it. 

I don't want to give up because I actually like doing it but I can't get past this part and I feel like it's essential to at least be able to do it. 

I've had this same issue with several other resources I've tried to work through. 

Anyone got any suggestions or am I trying to flog a dead horse?
Monitor DigitalOcean Managed Kubernetes cluster with Falco
Tags: digitalocean, kubernetes, falco, monitoring
Published: 2021-12-12 09:55:33

Hi, everyone!

I'm joining [DigitalOcean Kubernetes Challenge](https://www.digitalocean.com/community/pages/kubernetes-challenge). The topic that I pick about "Deploy a security and compliance system". It's great!

Prerequisite tools:

* kubectl. Documentation about installation is [here](https://kubernetes.io/docs/tasks/tools/).
* doctl. Documentation about installation is [here](https://docs.digitalocean.com/reference/doctl/how-to/install/).
* helm. Documentation about installation is [here](https://helm.sh/docs/intro/install/).

## Main step

* Make sure you are already installed `kubectl`, `doctl` and `helm`.
* Setup and create the DigitalOcean Managed Kubernetes cluster, if you didn't create if before. Want to know more? Visit the documentation [here](https://docs.digitalocean.com/products/kubernetes/).
* Install Falco to kubernetes cluster. This is unusual step, since usually we install Falco in different machine to avoid interruption when the kubernetes cluster is compromised. To install to a machine, you can see [here](https://falco.org/docs/getting-started/installation/). To install within kubernetes cluster, we can see this [document](https://github.com/falcosecurity/charts/tree/master/falco), this is the step that we will use and we will use helm.

## Setup and Create DigitalOcean Managed Kubernetes cluster

I have video about setup and create DigitalOcean Managed Kubernetes cluster. After that, we setup kubectl to connect with the cluster.

Step by step summary:

* Install kubectl
* Install doctl
* Create DigitalOcean Managed Kubernetes cluster through the web interface
* Connectl kubectl to the created cluster using doctl

{% youtube XpmQEMgMtLY %}

## Setup Falco to kubernetes cluster

Step summary:

* Install falco using helm
* Check the cluster, should have pods with name `falco` and have running status.

{% youtube UwEZTQZqsMY %}

## Try Falco and check the logs

* I try to deploy nginx just as other pods. You can see [here](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/). The deployment file that I use and give name `deployment.yml`:

```yml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-deployment
  labels:
    app: nginx
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nginx
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.14.2
        ports:
        - containerPort: 80
```

* Deploy the nginx, `kubectl apply -f deployment.yml`.

* Monitor logs the Falco pods.

![Pods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ye2dzas45b74oq2l2ekq.png)

![Sample logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3efy9wgjdmfhj91qmu46.png)

Here is the video sample:

{% youtube 1-ExNlwz5Ts %}
 
 
## Thank you

Thank you. Hope you enjoy it! Any comments or suggestions? Feel free to comment below.

![Thank you](https://media.giphy.com/media/Cf9gKpu67N7Aa5JfuQ/giphy.gif)
Low performance of Ruby on Rails in Docker under Windows
Tags: ruby, rails, docker, windows
Published: 2021-12-12 09:52:05

You can improve the performance of Ruby on Rails in Docker under Windows 10 if you run `docker-compose` not from Windows, but from WSL.

For example, if the source code of the project is in `C:\Users\user\projects\myproject`, you need to copy it to WSL - `/home/user/projects/myproject`

The WSL file system from under Windows is accessible via `\\wsl$`, you can copy `myproject` via File Explorer or terminal from `C:\Users\user\projects\myproject` to `\\wsl$\Ubuntu-20.04\home\user\projects\`

Then, using your favorite distribution, run WSL, go to the directory with the copied code and run `docker-compose`

```bash
cd ~/projects/myproject
docker-compose up -d
```

To edit code from Windows, you can open the `\\wsl$\Ubuntu-20.04\home\user\projects\myproject` directory in your favorite editor

In my case, the rendering speed has increased by about 10 times.