teleren/devto huggingface dataset:
Where to host your website for free.
Published: 2020-08-22 07:09:57

Static websites are web pages with fixed content and its constant. But now static sites also handle dynamic data using APIs and queries.Thanks to the development in the tech world

Applications that provide data for frontend through REST API are backend applications. Some of the free hosting providers for your backend were also mentioned below.

Hosting all these applications to cloud for the public access to prototype our idea, showing to friends, colleagues, reach audience during development needs someplace to host and we can't afford high hosting prices during prototype or in development.

Here's the list of free application hosting providers, are f

Github Pages - https://pages.github.com
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Netlify - https://www.netlify.com
Easy deploy by dropping your site folder or link your repository for auto-build and auto-publish on commit.

Vercel - https://vercel.com
Host static sites, JAMstack, and auto-deploy on commit.

Render - https://render.com
In Render, we can host static sites and also backend part (adds pricing). Also, auto builds and publishes from a commit.

Surge - https://surge.sh
Simple, single-command web publishing. Publish HTML, CSS, and JS for free, without leaving the command line at any time.

Tiiny Host - https://tiiny.host
The simplest way to publish your website for free.

Fast - https://fast.io
Host anything like images, documents, and files. Global content delivery network free for personal projects.

Cheap services
Heroku - https://www.heroku.com
The cloud service provider offers up to 500 MB of hosting storage for personal projects and we can host all kinds of applications.

Amazon S3 - https://aws.amazon.com/s3
It provides static site hosting with objects stored in it. It's free for a limited amount of requests and also based on CRUD operation on objects. Check their site for full information.

Azure and GCP
Similar to AWS, azure and google cloud provides site hosting services. Check documentation for the free pricing limit.

Host your website for free .with the above host providers.
Webscraping: Beginner's Thoughts
Tags: webscraping, python, selenium, scrapy
Published: 2020-08-22 01:15:19

Decided to learn webscraping this month. The first thing I did was to watch courses in Pluralsight:
[Scraping Dynamic Web Pages with Python and Selenium] (https://app.pluralsight.com/library/courses/scraping-dynamic-web-pages-python-selenium/table-of-contents)
[Scraping Your First Web Page with Python] (https://app.pluralsight.com/library/courses/scraping-first-web-page-python/table-of-contents)
[Exploring Web Scraping with Python] (https://app.pluralsight.com/library/courses/exploring-web-scraping-python/table-of-contents)

Webscraping can be done by using Python libraries like **BeautifulSoup** and **Requests**. This assumes that you have all urls predetermined and will just scrape the page source. 

But if you will scrape a dynamic page (ex: a div is rendered only if a specific button was clicked) then you will need a library like **Selenium** to emulate user interactions.

When I was confident with the basics, I took a step further and learned the **Scrapy** framework. This requires a steeper learning curve than native Python libraries because you have to know the flow of how objects are passed in the framework. The main advantage is you won't have to write boilerplate codes (writing data to files, handling url requests, data modelling) redundantly because those are already integrated with its pipeline.

Here are some Scrapy Pluralsight courses that helped me:
[Crawling the Web with Python and Scrapy](https://app.pluralsight.com/library/courses/crawling-web-python-scrapy/table-of-contents)
[Extracting Structured Data from the Web Using Scrapy](https://app.pluralsight.com/library/courses/scrapy-extracting-structured-data/table-of-contents)
How to make a Drupal REST API
Tags: drupal, api, twitter
Published: 2020-08-22 06:25:03

I want to create a React component on a Drupal8 site to display tweets. 

To do so, I've decided to use Drupal as a backend to make a REST API of Twitter feed and use that feed in the React component.

Although I have written a couple REST APIs on NodeJS, I am confused about how/where to start on making a REST API on Drupal. Does anyone know a good tutorial/guide to get me started?

Much appreciated!
generate programming quotes in README every day
Tags: actionshackathon
Published: 2020-08-22 05:50:05

### My Workflow
Hello, This is my participation for the actionshackathon.
The idea of this action is to run every new day.
with every run it will replace the quote with new one.
let's take a look at source code.

![1](https://dev-to-uploads.s3.amazonaws.com/i/b6lndgchdv9xgiqoe9e7.png)
![2](https://dev-to-uploads.s3.amazonaws.com/i/tz8pqu15pzvgcgcaw0uo.png)

here I create an python script that basically will fetch API request from specified url , in my case I love programming quotes but you can provide any type of things like pictures but sure you need to edit the script little bit to accept print images.
The logic is 2 have 2 README one I called static and the other is the normal one that will be shown. The script will combine the static_readme with the new quote.

on the other hand is github workflow that will run at 0:0 UTC every day , and it's setup to use python3.8  , and in the end will push that changes.

### Submission Category: 
Wacky Wildcards

### Links

{% github  OmarElKhatibCS/programming-quotes-workflow  no-readme %} 

thanks to skolakoda for providing quotes API
{% github  skolakoda/programming-quotes-api  no-readme %}
GMAIL SSMTP MAIL SERVER INSTALLATION SHELL SCRIPT FOR UBUNTU 
Tags: ubuntu, ssmtp, gmail, mailserver
Published: 2020-08-22 05:22:50

A Simple Gmail SSMTP(Secure Simple Mail Transfer Protocol) fully automated installation shell script for all Ubuntu versions.SSMTP can be used only for sending mails alone.It doesn't has any features life receiving mails,drafts etc. 


Updating the system

       apt update -y

Installing mailutils

       apt-get install mailutils -y

Installing smtp mail server

       apt-get install ssmtp -y


Gets the mail id for mailing purposes, Which is the sender mail address and from this mail id mails will be sent ,Stores in ssmtp.conf file

     echo -n  "provide your email id:" 
     read  mail
     echo "AuthUser=$mail" >> /etc/ssmtp/ssmtp.conf 

Gets the respective mail password for mailing purposes.

     echo -n "Provide your email password:"
     read  password;
     echo "AuthPass=$password" >> /etc/ssmtp/ssmtp.conf

Some configurations will be updated in-order to do a secure mail transfer.587 ssmtp port.

    echo "mailhub=smtp.gmail.com:587" >> /etc/ssmtp/ssmtp.conf
    echo "UseSTARTTLS=YES" >> /etc/ssmtp/ssmtp.conf
    echo "FromLineOverride=YES" >> /etc/ssmtp/ssmtp.conf

[SSMTP Fully Automated Installation Shell Script Available in Github](https://github.com/shivdevops/GMAIL-SSMTP-MAIL-SERVER-INSTALLATION-SHELL-SCRIPT)
Longest Common Prefix
Published: 2020-08-22 04:50:26

Write a function to find the longest common prefix string amongst an array of strings.

If there is no common prefix, return an empty string "".

**Example 1:**

>Input: ["flower","flow","flight"]
>Output: "fl"

**Example 2:**

>Input: ["dog","racecar","car"]
>Output: ""
>Explanation: There is no common prefix among the input strings.

**Note:**

>All given inputs are in lowercase letters a-z.



**Solution:**

The requirement here is to find longest common prefix amongst an array of strings. 

There are many approaches to this problem but the one that I am going to discuss here uses **Trie** to store the array of strings and then scan the trie to get the longest common prefix.

To know more about Trie, you can visit [here](https://www.geeksforgeeks.org/trie-insert-and-search/).

**Algorithm:**

1) Store each string from the array of strings in **Trie**.

2) Get the deepest Trie Node such that all the nodes from the root of the trie to that node has only one children.

[Link to Code](https://chashsolution.blogspot.com/2020/08/longest-common-prefix.html)

**Space Complexity**: O(n) where n is the number of unique characters in the array of string.

**Time Complexity**: O(n) for building the Trie (n is the number of unique characters in the array of string) and O(m) for finding the prefix (where m is the length of the prefix).
Control the Probability of This GitHub Action from Passing/Failing
Tags: github, actions, showdev, javascript
Published: 2020-08-22 04:47:48

---
title: "Control the Probability of This GitHub Action from Passing/Failing"
published: true
description: "Passibility: A new GitHub Action to set the probability of it passing, and it will calculate the percentage for you"
tags: github, actions, showdev, javascript
//cover_image: https://direct_url_to_image.jpg
---


Just give it a percentage, say 50, and it will have a 50/50 chance of passing! Which means if you give it 0 or 10, it will fail all the time and most of the times respectively. 😏 Pretty cool right?


### GitHub repo

{% github hedythedev/passibility no-readme %}


### How to use this

```yaml
name: "Will I Pass..."
on: push

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: hedythedev/passibility@main
        with:
          percentage: 100
```

**Example Workflow**: This workflow will pass all the time! 


### Option Inputs

**percentage**

Percentage of passing - (without the %) 0, for always fail, 100 for always pass and so on.


### Additional info
* This is my first GitHub action, and it’s written in JavaScript.
* Generated from the [JavaScript Action Template](https://github.com/actions/javascript-action)
* Unit tests using Jest
* This isn’t a submission to the Actions Hackathon because I’m not old enough (18+ only), but I made this to experiment with GitHub Actions
* Feel free to try it out and give me some feedback
* Contributions welcome - like having another input called fail_percentage so you can instead provide the fail probability? 🤔
* Remember to :star: star the project if you liked it ;)
Fourier transform of Gaussian distribution in Ruby
Tags: ruby
Published: 2020-08-22 04:15:07

---
title: Fourier transform of Gaussian distribution in Ruby
published: true
description: 
tags: ruby
//cover_image: https://direct_url_to_image.jpg
---

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

* [numo-narray](https://github.com/ruby-numo/numo-narray)
* [numo-pocketfft](https://github.com/yoshoku/numo-pocketfft)
* [GR.rb](https://github.com/red-data-tools/GR.rb)

```ruby
require 'numo/narray'
require 'numo/pocketfft'
require 'gr/plot'

N = 4096
s = N / 256
pi = Math::PI

y = Array.new(N) do |i|
  x = i - N / 2
  Math.exp(-x**2 / (2.0 * s**2)) / (Math.sqrt(2 * pi) * s)
end

freq = Numo::DFloat.linspace(0,1,N+1)
freq[N/2..-1].inplace - 1.0
freq = freq[0..-2]

theory = freq.map { |k| Math.exp(-(2 * pi * k)**2 * s**2 / 2.0) }

x = freq
y = Numo::Pocketfft.fft(Numo::NArray.cast(y)).abs

GR.plot([x, y, 'bx'], [x, theory, 'r'], xlim: [-0.05, 0.05])
GR.savefig('gaussian.png')
```
Ionic Horizontal & SideMenu Navigation in ReactJS
Tags: ionic, react, tutorial, javascript
Published: 2020-08-22 03:56:48

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

###The Magic..

We listed for this event, `MediaQueryListEvent` and we get an object that looks something like this back.
```json
MediaQueryListEvent : {
  isTrusted: true, 
  media: "(min-width: 768px)", 
  matches: true,
  ...
}
```
We are looking to see if we get a match from the query and if so, then we want to take action.

Let's set up our state variable `mQuery` using [`useState`](https://reactjs.org/docs/hooks-state.html) and initialized it by getting the current window innerWidth.
```react
const [mQuery, setMQuery] = React.useState<any>({
  matches: window.innerWidth > 768 ? true : false,
});
```
In our component we will listen for this event, from the `window` object by calling [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
```react
  useEffect(() => {
    let mediaQuery = window.matchMedia("(min-width: 768px)");
    mediaQuery.addListener(setMQuery);

    // this is the cleanup function to remove the listener
    return () => mediaQuery.removeListener(setMQuery);
  }, []);
```
the `addListener` calls our setState function to hold the results, and the changing of the state variable will cause the component to rerender.

Based on the state variable we will render the hamburger menu or the list of buttons that correspond to the side menu items

#### Full source for `NavButtons` component
```react
// NavButtons.tsx
export const NavButtons = () => {
const [mQuery, setMQuery] = React.useState<any>({
  matches: window.innerWidth > 768 ? true : false,
});

  useEffect(() => {
    let mediaQuery = window.matchMedia("(min-width: 768px)");
    mediaQuery.addListener(setMQuery);

    // this is the cleanup function to remove the listener
    return () => mediaQuery.removeListener(setMQuery);
  }, []);

  // MediaQueryListEvent { isTrusted: true, media: "(min-width: 768px)", matches: true ...}

  return (
    <div>
      {mQuery && !mQuery.matches ? (
        <IonMenuButton />
      ) : (
        <>
          <IonButton routerLink={"/home"}>Home </IonButton>
          <IonButton routerLink={"/page-1"}>One </IonButton>
          <IonButton routerLink={"/page-2"}>Two</IonButton>
        </>
      )}
    </div>
  );
};
```

Then we use the component in the `IonToolbar` of our pages, see an example below
```react
// Home.tsx
const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>HOME</IonTitle>
          <IonButtons slot="end">
            <NavButtons/> // <== OUR COMPONENT
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
      </IonContent>
    </IonPage>
  );
};

export default Home;
```
{% youtube S7whj93SGsA %}

### Full Source Code for the Project In GitHub
{% github https://github.com/aaronksaunders/sidemenu-topnav-ionic-react %}
5 Telegram Channels for Data Science Enthusiast
Tags: community, telegram, datascience, ai
Published: 2020-08-22 09:07:20

---
title: 5 Telegram Channels for Data Science Enthusiast
published: true
date: 2020-08-22 03:55:49 UTC
tags: community,telegram,datascience,ai
canonical_url: https://medium.com/nerd-for-tech/5-telegram-channels-for-data-science-enthusiast-3a1f742868d1
---

Telegram is one of the fastest Growing Messaging apps with over 400 Million Users. An interesting feature of Telegram is you can create a Telegram Channel for Unlimited Audiences.

5 Telegram Channels that worth to join in. Personally, I’m using these Channels for a long time to stay up to date and learn something new in Data Science Field.

In the end! I will also add some honorable mentions.

### 1. Data Science by [ODS.ai](http://ods.ai/)

[Telegram Link](https://t.me/opendatascience) — 36K Subscribers

This channel talks about the latest concepts or trends in Data Science, AI, Big Data, Machine Learning.

and also it is maintained by [OpenDataScience](https://opendatascience.com) Community

### 2. Data Science,ML & AI

[Telegram Link](https://t.me/KDnuggets) — 12k Subscribers

This Channel is maintained by the KDnuggets. KDnuggets is one of the popular blog sites for Data Science, Machine Learning, AI.

In this channel, they share some popular blogs from their site and Some Course Recommendation

### 3. datascienceinfo

[Telegram Link](https://t.me/data_science_info) — 13k Subscribers

This Channel is my favorite one. Cause it shares some of the difficult concepts with simple Info-graphic pics. You will also find Ebooks, PDFs of some researches. And high recommend you join in this Channel.

### 4. Data Flair

[Telegram Link](https://t.me/dataflair) — 16k Subscribers

This channel is meant to provide the updates on latest cutting-edge technologies like Big Data, Hadoop, Spark, Data Science, Python, R, AI, ML, DL & many more.

Mainly this channel focus on Python and projects on it. Share some of the best Articles on Python, Data Science from their Blog

### 5. Learn.MachineLearning

[Telegram Link](https://t.me/LearnDotMachineLearning) — 7k Subscribers

This channel pushes you to learn Machine Learning 100 Days. They send every day what should we learn today with Resources as well. Recently they started Deep Learning as well in the same channel. If want to learn Ml join in this channel.

### Some Honorable Mentions

LearnDataScience

[Data Science, ML & AI Nugget Chats](https://t.me/DatascienceChats)

Both of these Channels are for discussions on Data Science, ML, AI. Cause whatever you learn at the end of the day still some questions been unanswered in our mind. This Community Chat group is very useful in Such Cases.

**If you're interested in Tech stories**. Check out this Post:arrow_down:

{% post https://dev.to/maheshthedev/maya-by-spotify-344o %}

Hope you will learn some useful topic from these Channels.
Thanks for Reading, [MaheshtheDev👨‍💻](https://www.google.com/search?q=MaheshtheDev) .

* * *
the worst of js: %
Tags: javascript
Published: 2020-08-22 03:45:28

Javascript has a lot of weird features. 

Non-transitivity of equality is one pretty weird thing about js, see this meme:
![non-transitive](https://dev-to-uploads.s3.amazonaws.com/i/c6x79wc877pzeskb1cr7.jpg)

But I have to say, for me the most infuriating thing about js is that it has a **fake modulus operator**.

In literally every other language: python, C/C++, Julia, Java, whatever,  `x%y >= 0` is always true. This is just **so** useful, because for me the biggest use case of the modulus operator is cycling through elements of a list, in which case I really want 

`0 <= (x-1)%n < n`
`0 <= (x+1)%n < n`


I dunno I find it really annoying that js says things like `-1 % 5 = -1`.

It's typical in math to denote the set `Z\nZ` by `{0,1,\ldots, n-1}`.

Of course it's true that `-1 = n-1 \mod n` but I want the  reasonable value, not the negative one!

-Aelk
How to apply rendered property of a div or element into another div or element in angular
Tags: angular, html
Published: 2020-08-22 03:25:40

---
title: How to apply rendered property of a div or element into another div or element in angular
published: true
description: 
tags: angular, HTML
---

**Notes**: This article was initially published at [https://isamrish.com/how-to-apply-rendered-property-of-a-div-into-another-div/](https://isamrish.com/how-to-apply-rendered-property-of-a-div-into-another-div/)

## Problem: how to apply rendered property of a div into another div

Sometimes we want to use the rendered property of an HTML element such as height, width, etc.. to set the property in another HTML element.


## Solution: use ngAfterViewChecked lifecycle

This can be easily done in Angular using lifecycle hook `ngAfterViewChecked`.

Here is the proper solution:


**demo.component.html**

```html
<div #div1 class="div1">
  <p>Div1</p>
</div>

<div #div2 class="div2">
  <p>Div2</p>
</div>
```

**demo.component.css**

```css
.div1 {
  background-color: lightblue;
  height: 100px;
}

@media screen  and (max-width:  767px) {
  .div1 {
    height: 500px;
  }
}

.div2 {
  background-color: lightgreen;
}
```

**demo.component.ts**

```js
import { Component, OnInit, ViewChild, Renderer2,AfterViewChecked, HostListener } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit, AfterViewChecked {
  @ViewChild('div1') div1;
  @ViewChild('div2') div2;

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
  }

  @HostListener('window:resize', [])
  onResize() {
    this.setDivHeight();
  }

  ngAfterViewChecked() {
   this.setDivHeight();
  }

  setDivHeight() {
    let height = `${this.div1.nativeElement.offsetHeight}px`;
	  this.renderer.setStyle(this.div2.nativeElement, 'height', height);
  }

}
```

### Working Example

[https://stackblitz.com/edit/set-rendered-height-of-div-to-another-div](https://stackblitz.com/edit/set-rendered-height-of-div-to-another-div)

I hope that you like the article.

Keep coding and keep learning and keep building stuffs..
Simple Full Text Search in Rails
Tags: rails
Published: 2020-08-22 03:05:55

**No gems, no dependencies, no complexity. Here’s a basic full text search to use on simpler, smaller rails apps.**

Don’t get me wrong, I love ElasticSearch, or Ransack for larger more complex projects. But sometimes you just need something simple. This website for example.

At the time of writing this I’ve implemented search using plain old Ruby. This example not only does “full text” search, but it also searches the full text across multiple attributes, lastly, it also supports searching within ActionText rich text blocks as well.

Here's the basics for Searching the Post model within my blog: 

I have a before_action for the controller to a set_scope method: 

```
before_action :set_scope, only: :index
```

Here's that set_scope method: 

```
  def set_scope
    @posts = Post.all
    if params[:search]
      basics = search_basics
      body = search_body
      tags = search_tags
      post_ids = basics | body | tags
      @posts = @posts.find(post_ids)
    end
  end

  def search_basics
    @posts.where(
      "title ilike ? OR description ilike ?",
      "%#{params[:search]}%","%#{params[:search]}%"
    ).pluck(:id)
  end

  def search_body
    @posts.joins(:action_text_rich_text)
      .where(
        "action_text_rich_texts.body ilike ?",
        "%#{params[:search]}%"
      ).pluck(:id)
  end

  def search_tags
    tags = params[:search].split(" ")
    Post.tagged_with(tags, :any => true).pluck(:id)
  end

```

Here's how I render my basic search bar at the top of my posts index to wire it up in the view: 

```
<form id="search" action="<%= posts_path %>">
  <div class="input-group">
    <%= text_field_tag :search, params[:search], id: 'content_search_term',class: 'form-control', placeholder:'Search...' %>
    <div class="input-group-append">
      <button class="btn btn-primary" type="submit" id="button-addon2">Search</button>
    </div>
  </div>
  <% unless params[:search].blank? %>
    <small><%= pluralize(@posts.count, "post", "posts") %> found for search "<%= params[:search] %>" <a href="<%= posts_path %>" class="text-muted pl-2 text-decoration-none"><i class="fas fa-times"></i> Clear Search</a></small>
  <% end %>
</form>
```

### Bottom Line
This is not the cleanest or most performant way to do search in rails, but sometimes simpler is better. If you only have a few dozen records to search and don't need "sloppy" search, this hack will probably suffice. Otherwise, there's plenty of resources out there on Elastic search and search-kick.
[Video] Ionic Framework ReactJS Modal Tutorial
Tags: ionic, javascript, react, video
Published: 2020-08-22 01:46:46


{% youtube Ez-1P8VhQiQ %}

This is a short video showing how I manage state when creating `IonModal` Components in a ReactJS application using [Ionic Framework](https://ionicframework.com/react)

I am focusing on how to manage state when rendering the modal and also how to use the same modal for creating and editing an object