teleren/devto huggingface dataset:
Parkè - Online Parking Space Booking
Tags: discuss, startup, showdev, testing
Published: 2020-12-23 16:11:58

![image](https://assets.devfolio.co/hackathons/bfedfa89e30645b68a7145c312d3da12/projects/3dde2c9692654982b4df0202b9bae5c3/picnpnumggwa.png)

## Parkè is an online parking space booking app/website, you can also rent out your spaces and earn money. 

### We are seeking support and small contributions if possible. Check out our submission [here](https://devfolio.co/submissions/parke-3).


Website: https://park-e.github.io, App: [Download](https://raw.githubusercontent.com/park-e/cdn/main/Apps/finder.apk), will be uploaded on PlayStore once we get funding.


#### Screenshots:
![image](https://assets.devfolio.co/hackathons/bfedfa89e30645b68a7145c312d3da12/projects/3dde2c9692654982b4df0202b9bae5c3/picozlpbb1do.png)
![image](https://assets.devfolio.co/hackathons/bfedfa89e30645b68a7145c312d3da12/projects/3dde2c9692654982b4df0202b9bae5c3/picz5xtqa5s4.png)
![image](https://assets.devfolio.co/hackathons/bfedfa89e30645b68a7145c312d3da12/projects/3dde2c9692654982b4df0202b9bae5c3/picguyc868g8.png)

### Team
<table>
   <tbody>
      <tr>
         <td align="center"><img width=100px src ="https://avatars2.githubusercontent.com/u/38937943?v=4"><br><a href="https://github.com/malakar-soham/"><sub><b>Soham Malakar</sub></b></a><br> <a target="_blank" href="https://www.linkedin.com/in/malakar-soham"><img width=28px src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a></td>
         <td align="center"><img width=100px src ="https://avatars1.githubusercontent.com/u/27128838?v=4"><br><a href="https://github.com/abhishekraj272"><sub><b>Abhishek Raj</sub></b></a><br> <a target="_blank" href="https://linkedin.com/in/abhishekraj272"> <img width=28px src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png" > </a></td>
         <td align="center"><img width=100px src ="https://avatars1.githubusercontent.com/u/41292531?v=4"><br><a href="https://github.com/malakar-swastik"><sub><b>Swastik Malakar</sub></b></a><br> <img width=28px src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png" ></td>
         <td align="center"><img width=100px src ="https://avatars0.githubusercontent.com/u/33422449?v=4"><br><a href="https://github.com/amanv8060"><sub><b>Aman Verma</sub></b></a><br><a href="https://www.linkedin.com/in/amanv8060"><img width=28px src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png" ></a></td>
         <td align="center"><img width=100px src ="https://avatars2.githubusercontent.com/u/56654568?v=4""><br><a href="https://github.com/singh-pk"><sub><b>Pratik Kumar Singh</sub></b></a><br> <img width=28px src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></td>
      </tr>
   </tbody>
</table>

#### I would request everyone to support this project.
Cracker Jokes as a Service with Python
Tags: python, webdev, christmas
Published: 2020-12-23 15:56:22

Christmas crackers from the local supermarket often have the worst jokes. We say, 'there must be a better way'. Save up your favourite jokes this Christmas and hear the sound of guffaws 🤣 , not the silence of cringing faces 😬 .

It's database-backed, it's on the Web, it's in Python...and we didn't have to write a line of Javascript -- yep, we used [Anvil](https://anvil.works):

![The sample data is the most interesting part, really](https://anvil.works/advent/img/cracker-jokes/jokes.gif)


## Canvas Component

The anvil [Canvas](https://anvil.works/docs/client/components/canvas) component gives us access to the browser's drawing APIs, along with easy mouse events -- so that seemed like the perfect way to build this app:

```python
def draw_background(self):
    img = URLMedia('_/theme/cracker.png')
    c = self.canvas
    m = self.margin
    c.draw_image(img, m, 0, c.get_width() - 2*m, c.get_height())

def canvas_mouse_up(self, x, y, button, **event_args):
    """This method is called when a mouse button is pressed on this component"""
    if (x < self.margin):
        self.idx = (self.idx - 1) % len(self.jokes)
    elif x > self.w - self.margin:
        self.idx = (self.idx + 1) % len(self.jokes)
    self.write_joke()
```



## Batteries Included

Anvil's [Python in the browser](https://anvil.works/blog/python-in-the-browser) comes with Python's [batteries included](https://www.python.org/dev/peps/pep-0206/) philosophy, from your favourite python libraries to f-strings.


```python
import itertools
import textwrap
import random


class TellJokes(TellJokesTemplate):

    def __init__(self, **properties):
        self.init_components(**properties)

        self.jokes = list(app_tables.crackers.search())
        self.idx = 0
        self.QorA = itertools.cycle('QA') # switch between Q and A
        self.margin = 80
        self.laughing = '🤣😂😹😆🙈'
        self.text = 'Click To Start Telling Jokes 🎅'

    def write_joke(self, text=None):
        if text is None:
            QorA = next(self.QorA)
            text = f"{QorA}. {self.jokes[self.idx][QorA]}"
            if QorA is 'A':
                text += ' ' + random.choice(self.laughing) # add a random laugh emoji
    
        # wrap lines for readability
        wrapped_text = textwrap.wrap(text, int(self.canvas.get_width() - 2*self.margin)/35)))
        ...
```


## Share the laughter

I used the Anvil [Data Tables](https://anvil.works/docs/data-tables) service to create a database, then built a UI with a [DataGrid](https://anvil.works/docs/client/components/data-grids) component. Now I can send the app to the family -- let's hope they come up with some better jokes than I did 🙄 .

![](https://anvil.works/advent/img/cracker-jokes/add_joke.gif)


## View the source code

Want to play with the app yourself? Check out the source code:

#### [Open source code >>](https://anvil.works/build#clone:77LQJTEIQFXI52UP=MJSVCAHRUNQNUIKKYGFFUF44)
Deploy Potatizer to DigitalOcean
Tags: dohackathon, digitalocean, deploy, staticsite
Published: 2020-12-23 15:56:09

In this post, I tell you the last steps to be able to see our little potatizer online 😍

## Deployment in DigitalOcean App platform

With App platform, uploading our project has been a piece of cake.
After registering with GitHub and then linking it to App Platform, in two clicks I had the web live!

![DigitalOcean log in screen](https://dev-to-uploads.s3.amazonaws.com/i/pogb7en1ou1fjxkmccco.png)

The only things we have to take into account are:

- Choose the service that suits your website, how to render it. In my case: **static sites**.
- Choose the branch that we want to run the autodeploy when we make changes (CD: Continuous Deployment).
- Choose the command that will build our project: `yarn generate`.
- If you have any environment variable, add them manually in the key-value pair inputs.

Once you pass the process, you hit deploy and you can forget about it 💜

You can see the live result here - 🎇[Potatizer live demo deployed](https://potatizer.dawntraoz.com/)🎇

## Deploy Button (extended)

One thing that has driven me crazy about DigitalOcean 🤯, has been the idea of implementing a button that allows another person to deploy my project in their environment!

![Deploy to DigitalOcean button](https://dev-to-uploads.s3.amazonaws.com/i/ll8pduqolj8abaei40e0.png)

A fantasy, just adding a *deploy.template.yaml* file in a folder called *.do* in the root of my project with the following 'spec':

```yaml
spec:
  name: cd
  # Service type: Static sites
  static_sites:
    - environment_slug: html
      # Nuxt generate to build our project
      build_command: yarn generate
      git:
        # CD branch and url to the code
        branch: main
        repo_clone_url: https://github.com/Dawntraoz/potatizer.git
      name: potatizer
```

And to make it run, we simply use the code [DigitalOcean provide](https://www.digitalocean.com/docs/app-platform/how-to/add-deploy-do-button/) to add it to the web (in html) or to the readme (in markdown):

```md
[![Deploy to DigitalOcean](https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=<repo_url>/tree/<branch>)
```

being `repo_url` the github repo link, in my case https://github.com/Dawntraoz/potatizer, and the branch you've chosen (main). 

## Repository

If you want to take a look at the code, here is the repository.

{% github Dawntraoz/potatizer no-readme %}

---

I hope you liked the journey and that we have a few potaters laughs together 🥔

Thanks for sharing these stupid ideas with me, happy to have you 🤗
Day-0: 30 days of code- Hackerrank
Tags: webdev, javascript, help, codenewbie
Published: 2020-12-23 15:52:38

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

Hello guys. I have started to solve the 30 days of code challenge on HackerRank using javascript. I'm gonna post the solutions of all the challenges with some key points to understand the solution.
So let's get started.

###Day-0
####Task:- 
'To complete this challenge, you must save a line of input from stdin to a variable, print Hello, World. on a single line, and finally print the value of your variable on a second line.'

####Solution:-
```js
function processData(inputString) {
    // This line of code prints the first line of output
    console.log("Hello, World.");
    
    //Write the second line of output that prints the contents of 'inputString' here.
    console.log(inputString)
}

```

####Explanation:-
1. Here just the basic console logs are used.
2. The second console log prints the content in the 'inputString' which is given as a parameter to the function.

Thank you!! Stay tuned!!
Starting to code the Blogfinder app
Tags: dohackathon
Published: 2020-12-23 15:49:46

I decided to take the plunge and code a web-app for the hackathon. I started a couple of days ago with a blog aggregator app. The aim of the app is to attract viewership for personal blogs. Users of the site can submit summaries of their blog posts and they will appear on the site for all to see. The site is also a social platform where users can follow each other and like each other.

Tech stack - Quart (Python), Vue and Bulma
Database - Postgresql

So far I have built the route to view all posts and set up the database models.

I have decided to develop with Docker using VS Code's Remote Containers extension.
Amin bd
Tags: aminbd
Published: 2020-12-23 15:44:52

## What I built

### Category Submission: 


### App Link


### Screenshots


### Description
 

### Link to Source Code

### Permissive License


## Background
(What made you decide to build this particular app? What inspired you?)

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)


### Additional Resources/Info
Paging | Operating System - M05 P09
Tags: linux, devops, beginners, tutorial
Published: 2020-12-23 15:41:13

**This is a multipart blog article series, and in this series I am going to explain you the concepts of operating system. This article series is divided into multiple modules and this is the fifth module which consists of 26 articles.**

_In this article we will learn about the concept of paging in operating system._

### Paging
- Suppose we have a process `P1`, which is divided into pages.
- We have a problem while executing `P1`. CPU will call for `P1` but the CPU doesn’t know that paging is done in main memory. So to remove this problem we use the concept of mapping.
- Mapping is done with the help of MMU _(memory management unit)_, MMU does it by using page table, and page table contains the frame number where the process _(page)_ is situated/ present.
- Every process has its own page table. The entries in page table are equal to number of pages a particular process has.
- When CPU make a call to access byte number `3` then first we will check that in which page that byte is present and then we will check that in which frame that page is present. 
- For example if CPU wants to access byte `3` then as we can see that byte `3` is present in page number `1` and page number `1` is placed in frame number `4`, hence CPU now know that it can get byte `3` from frame number `4` of main memory _(RAM)_.
- CPU always works on **logical address**. Logical address consists of two things **page number** and **page offset**.

_So this was a brief explanation of paging in operating system. Hope you liked it and learned something new from it._

If you have any doubt, question, quires related to this topic or just want to share something with me, than please feel free to contact me.

### 📱 Contact Me

[Twitter](https://twitter.com/r_mishra10)
[LinkedIn](https://www.linkedin.com/in/rahul-mishra-66210b185)
[Telegram](https://t.me/rahul_mishra10)
[Instagram](https://www.instagram.com/rahul_mishra10/?hl=en)

### 📧 Write a mail
<rahulmishra102000@gmail.com>

#### 🚀 Other links

[GitHub](https://github.com/rahulMishra05)
[HackerRank](https://www.hackerrank.com/rahulmishra10201)
Scrimba 24 challenges
Tags: scrimba, javascriptmas, javascript
Published: 2020-12-23 15:35:16

---
title: 
published: true
description: 
tags: #scrimba #JavaScriptmas #Javascript  
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/abzb7na65nsbh929jofn.jpg
---
Hi,
My name is **Alpha**,

I thought my journey to life will be much more interesting than it is right now, but I know if I give up right now I will never know what is this thing called success, that why I made a promise to my self to never give up, to never loose hope and to always do my best in everything I do.

I came across scrimba one year ago while I was looking for a beginner react course, it was new to me and awesome at the same time this way of interacting with the instructor code, since then I have followed many free courses from the platfrom and they are all great, when starting this challenge I was fair a bit nervous but this is what I said to my self.

If you have the fear of trying new things you'll never progress, and this pushed me to try, and I've solved all challenges to date.

here they are
 
**Day 1.**  [Candies](https://scrimba.com/scrim/co37d4a4cb2109c355be40c4d)

**Day 2.** [Deposit Profit] (https://scrimba.com/scrim/co70a4858bdf61a5bc4d3bb64)

**Day 3.** [Chunky Monkey](https://scrimba.com/scrim/co8da4d708adb4c7c2ea78794)

**Day 4.** [Century From Year] (https://scrimba.com/scrim/codfd4486a262cea479e6cd0b)

**Day 5.** [Reverse String] (https://scrimba.com/scrim/cocf94ebcb857ebbcafd15c24)

**Day 6.** [Sort By Length] (https://scrimba.com/scrim/co28a47fda81d16efdd0827dc)

**Day 7.** [Count Vowel Consonant] (https://scrimba.com/scrim/co84f4d3ab6962b44f54e3b3f)

**Day 8.** [Rolling Dice] (https://scrimba.com/scrim/co048490a9e405e1634806164)

**Day 9.** [Sum Odd Fibonacci Numbers] (https://scrimba.com/scrim/co8f148239b4958c29bc6dd8f)

**Day 10.** [Adjacent Elements Product] (https://scrimba.com/scrim/co26443b1a06fe874fe950f99)

**Day 11.** [Avoid Obstacles] (https://scrimba.com/scrim/cod6745c8a8bede2fa6b759d7)

**Day 12.** [Valid Time] (https://scrimba.com/scrim/cob84412d805538392b550724)

**Day 13.** [Extract Each Kth] (https://scrimba.com/scrim/coac143299a223961574a2ae0)

**Day 14.** [Maximal Adjacent Difference] (https://scrimba.com/scrim/cof014251a306e48c071ef8fe)

**Day 15.** [Javascript Carousel] (https://scrimba.com/scrim/co5694f6a90a5c651c7c5944e)

**Day 16.** [Insert Dashes] (https://scrimba.com/scrim/co0af4a8784c921afc7bffd79)

**Day 17.** [Different Symbols naive] (https://scrimba.com/scrim/coe634648851dc27045f8508d)

**Day 18.** [Array Previous Less] (https://scrimba.com/scrim/co0584e7ba23515215df16a18)

**Day 19.** [Alphabet Subsuquence] (https://scrimba.com/scrim/co44243d38ebd4fe0b7099c7d)

**Day 20.** [Domain Type] (https://scrimba.com/scrim/co8404c8ba81eb8f798e03078)

**Day 21.** [Sum of 2] (https://scrimba.com/scrim/coec04d7fafba654bc09666e8)

**Day 22.** [Extract Matrix Column] (https://scrimba.com/scrim/co6a4406f8a7a1eafa1317331)

**Day 23.** [Twitter Input Component] (https://scrimba.com/scrim/coa1040e89df2b761a94819f8)

**Day 24.** [Test Your Agility] (https://scrimba.com/scrim/co67b481bb896029bf65b7e2c)
Create really fluid loop slide with Tiny-Swiper
Tags: javascript, github, webdev, html
Published: 2020-12-23 15:32:38

Slide me 👇

{% stackblitz tiny-swiper2-demo-freemode view=preview %}

## Intro

[Tiny-Swiper](https://github.com/joe223/tiny-swiper) is an ingenious open-source JavaScript Carousel powered by wonderful plugins with native-like experience. 

It's lightweight yet extensible. You can import plugins as needed, no more, no less. Just like this:

```javascript
import Swiper, {
    SwiperPluginLazyload,
    SwiperPluginPagination
} from 'tiny-swiper'
```

## Usage

### Installation

```shell
# via npm
$ npm install tiny-swiper --save

# via yarn
$ yarn add tiny-swiper
```

If you prefer CDN

```html
<script src="https://unpkg.com/tiny-swiper@latest"></script>
```

### Initialization

Html code:

```html
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>
```

JavaScript/TypeScript code:

```javascript
import Swiper, {
    SwiperPluginLazyload,
    SwiperPluginPagination
} from 'tiny-swiper'

Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])

const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)
```

- `new Swiper()` - initialize swiper with options.
- `Swiper.use()` - Register plugin.
- `swiperContainer` - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
- `parameters` - object with Swiper parameters. Optional.


You also can load full-featured Tiny-Swiper:

```javascript
import Swiper from 'tiny-swiper/lib/index.full.js'
```

```html
<script src="https://unpkg.com/tiny-swiper@latest/lib/index.full.js"></script>
```

## Demos

### Default Setup

{% stackblitz tiny-swiper2-basic-demo view=preview %}

### Loop mode

{% stackblitz tiny-swiper2-demo-loop-mode view=preview %}

### Pagination

{% stackblitz tiny-swiper2-demo-plugin-pagination view=preview %}

### Lazyload

{% stackblitz tiny-swiper2-demo-plugin-plugin-lazyload view=preview %}

BTW, I'm Planing to create Vue/React/Svelte version of Tiny-Swiper. 
You can find me on [Github](https://github.com/joe223/tiny-swiper) Or [Homepage](https://joe223.com/) if there are some ideas and suggestions :)
Scrapping Google Map Data With Puppeteer
Tags: puppeteer, scrapping, node, mysql
Published: 2020-12-23 15:18:45

Scrapping Google map data and reviews with Puppeteer and saving data in mySql.

My First Puppeteer Project.

{% youtube nlMGZnOvJ_E %}

-- [Spider Techs](https://spidertechs.net/)
high level design vs low level design.
Published: 2020-12-23 14:41:50

Lets talk about high level design vs low level design.


##high level design

it refers to the overall system design. It includes the description of system architecture, database design, services, platforms and relationship among modules. It is created first before low level design


##low level design

 it refers to component level design process. It describes detailed information of each and every module which means it includes actual logic for every system component and it goes into each module specification. it is created after high level design.

**features of High level design**


1. overall system design
2. shows brief functionality of each module
3. it is created by solution architect
4. input criteria is software requirement specifications
5. output criteria is database design, functional design and review record.

**features of low level design**

1. component level design process
2. shows detailed functional logic of the module
3. it is created by designers and developers
4. input criteria is high level design
5. output criteria is program specification and unit test plan.

Low level design is very useful for going to next level of becoming a good developer. This is helpful when you are looking at requirement and you're actually thinking about how to code them out. There will be ordering, cache eviction and much more.

While high level design gives a brief overview for whole implementation process. Simply it converts the business/client requirement into high level solution.
Prophotos.ru: developing a media portal for photo equipment & photography
Tags: ruby, portfolio, programming, webdev
Published: 2020-12-23 14:15:48

Prophotos.ru portal publishes reviews on photo equipment and articles about photography. The primary goal of the portal is to be the first to test equipment and publish independent assessments of cameras.

The Prophotos team wanted to make the portal the most respected Russian source of information about cameras. To do this, they developed a special assessment methodology and wrote detailed, multi-page reviews to give readers a complete picture of the products before buying.

The combined Prophotos & Evrone team had to provide support for the existing monolithic Ruby application, as well as introduce new features outlined by the business model, including mechanics for voting in contests and other interactions with the portal’s audience.

[Read the full case study.](https://evrone.com/prophotos)
( YouTube Tutorial ) Codeless IAP for Unity3D.
Tags: unity3d, tutorial, gamedev, mobile
Published: 2020-12-23 14:14:19

So you have been working hard on finishing your mobile game and preparing for release. All those months or years of hard work finally coming to fruition. You are dreaming of all the money you gonna make and then it dawns on you! That *ONE* task that you have been procrastinating on is still in the back burner section of your Trello list. You finally, with a heavy heart, drag the 'Implement IAP' card into the In Progress section. And so, the hunt to learn *'How to Implement IAP in Unity'* begins!

I am happy to announce that I have made a tutorial on implementing **Codeless IAP** in Unity. Codeless IAP makes it really easy to get in-app purchasing working in your projects without the need to write complex IAP code. You can implement purchasing and restoring of IAP products by just adding *IAPButtons* in your game. For the complete video tutorial follow the link below.

**P.S : I would subscribe :)**

[Codeless IAP Unity Tutorial](https://www.youtube.com/watch?v=zWvH4cWKRQ4)