teleren/devto huggingface dataset:
What is Jekyll? 
Tags: webdev, html, wordpress, codenewbie
Published: 2021-08-11 10:28:30

While developing WordPress websites, developers may encounter several issues. 

Unfortunately, some situations are not under their control. This is where Jekyll comes in to sort out complex issues. 


Jekyll is a perfect static site generator to solve complicated web issues. Without giving database access to anyone, you can operate it simply and easily. 

4 pros of Jekyll that'll make you fall for it:

- It is fast and easy to operate. 
- It does not require any content management system.
- It does not require daily updates.
- There is no need to set up database systems in Jekyll. 

You can read further about Jekyll at: https://tiiny.host/blog/what-is-jekyll-a-complete-guide-by-tiiny-host/
Page Read Scroll Percent Calculator with JavaScript
Tags: javascript, css, webdev, frontend
Published: 2021-08-11 10:59:25

![Page Read Scroll Percent Calculator with JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtxqcjf8h0zp0cp6gbhf.png)

Hi developer,

Ever wondered how the scroll percent is measured and displayed for readers to see where they are and what is left.

Here is how I achieved the same using JavaScript and a  little CSS.

![Scroll percent in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46xc2lbtm7lwsqkmomba.png)


Like, Follow, and let's collaborate.
[https://codepen.io/asombachinonso/full/jOmdyJb]
Higher order functions and closures example in Javascript
Tags: javascript, codever, snippets
Published: 2021-08-11 10:37:11

First with "normal" functions:

```javascript
//closures and higher order function
function salute(salutation) {
  return function(firstName) {
    return function(lastName) {
      console.log(`hi ${salutation} ${firstName} ${lastName}`)
    }
  }
}

salute('Mr.')('John')('Wick')

//output
hi Mr. John Wick

```

The shorter variant with arrow functions:

```javascript
const saluteArrowFunction = (salutation) => (firstName) => (lastName) => console.log(`hi ${salutation} ${firstName} ${lastName}`);

saluteArrowFunction ('Mr.')('Johnny')('Cage')

//output
hi Mr. Johnny Cage
```

<hr>
Learn more about:
- [closures on mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
- [higher order functions on Composing Software](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99)

<hr>
> Shared with :heart: from [Codever](https://www.codever.dev/snippets/6113a246f52006531138ff57/details). &nbsp; :point_right:  &nbsp; use the [**copy to mine**](https://www.codever.dev/snippets/6113a246f52006531138ff57/details) functionality to add it to your personal snippets collection.
[Package] Simpler Url Shortener for Laravel
Tags: laravel, php
Published: 2021-08-11 10:21:30

Hello! Marc here.

I've just released a new laravel package. It's very simple, but hope it will help you in some projects.

Thank you! All PRs and suggestions will be welcome!

[https://github.com/magarrent/laravel-url-shortener](https://github.com/magarrent/laravel-url-shortener)

# Laravel Url Shortener

![Laravel Url Shortener](https://user-images.githubusercontent.com/6561770/128169387-4c192224-79e6-46fc-a75b-ed18981e74e3.png)

![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)
![Package Size](https://img.shields.io/github/languages/code-size/magarrent/laravel-url-shortener)

## Install
`composer require magarrent/laravel-url-shortener`

## Usage
Import the UrlShortener in your php file.

    use Magarrent\LaravelUrlShortener\Models\UrlShortener;

Then you can use the Url shortener package to redirect **internal and external links.**

    UrlShortener::generateShortUrl("https://www.kodio.tech")
    
    UrlShortener::generateShortUrl("/my-next/local/page")

Ex. Redirection:

https://your.url/H8g9Jx => https://www.kodio.tech

-----
You only have to send the Url To param to the UrlShortener model:

    public  static  function  generateShortUrl(String $toUrl):  String


## Roadmap

- Add custom configuration for url key characters (Currently 6)

## Changelog
1.0 - First version

## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

## Credits

- [Marc Garcia Torrent (Kodio Technologies)](https://github.com/Magarrent)
- [All Contributors](https://github.com/Magarrent/laravel-url-shortener/contributors)

## Security
If you discover any security-related issues, please email magarrent@gmail.com instead of using the issue tracker.

## License
The MIT License (MIT). Please see [License File](/LICENSE.md) for more information.
Improve SEO In React Sits's
Published: 2021-06-28 08:56:08

When using React-JS in web development we face issue in SEO because of react is rendered on client side.
So when a crawler or a bot visit are site. It does not find any html code. 
Because crawler's ignore JS code.
So we have to render are site on server so that crawler's can see the html.

For that we can use Next.js and If are site is in production then we can use some tools like react-helmet for dynamic head component and we can render the site on server.


#Some links to refer

{% medium https://blog.bitsrc.io/improving-seo-of-react-apps-with-react-helmet-7b79fb8774f4  %}

- [`ABOUT SEO IMPROVEMENT`](https://www.peerbits.com/blog/build-seo-friendly-web-apps-using-reactjs-redux-nextjs.html)

- [`React-Router SSR`](https://www.digitalocean.com/community/tutorials/react-react-router-ssr)

{% link https://dev.to/joelvarty/prerender-your-spa-using-netlify-for-better-seo-3h87 %}

{% post https://dev.to/colbyfayock/crafting-a-react-next-js-single-page-application-optimized-for-seo-54fk %}

{% youtube -B58GgsehKQ %}
Vote in Chat based Application in Ionic 4. ✨
Tags: ionic, angular, chat, beginners
Published: 2021-08-11 10:06:26


Hey,  


I thought of writing a blog. 
This is my first blog.
The topic that, I'm going to cover is poll (Vote) chat based application in ionic 4.
>My professor asked me why did I add this feature or what is the one feature that stood your app out. I bluntly blurred out the Vote feature. 
>You'll ask why? Because I have always wanted it in my Applications that I use in daily life.

>Friend 1 : Hey lets go to ABC Café. Friend 2: No, Lets go to DEF Café. ME: Just vote it out guys.. That's when it was clicked oh! why isn't there any feature of vote. Would have made my life easier.

**But when my teacher asked I said, So that we can vote if we want the test or not without you knowing that I want the test or not.**
So, this project was done by me in my Masters final year program. 
Today we will code for UI and further in the next blog(If I remember to write this). I'll add the connectivity with UI + firebase.

Let me cut this shot if you want to know what is Ionic and what is Angular just head to the official website. (Because no one is going to read the blog).

Let's go slowly!! See you in my next blog 😉
Rust SDK - DJI Tello Drone
Tags: rust, drones, dji, sdk
Published: 2021-08-11 10:01:55

![Tello Drone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypl2tzrvmf5l9p3zliz8.jpg)

I got this Tello Drone for Christmas a while back. Flying in circles was quite fun, but the control via the mobile phone was unfortunately not comfortable for me and I couldn't see anything on the small screen.

It quickly became boring and what does a developer do when he can't sleep at night: hacking.  

## 🤓 Hacking

I first found the public text-based API. It was quite simple to integrate and I tried to control the drone with my GamePad. Unfortunately, movements like "20 cm to the left" are not compatible with a joystick. After some time, however, I came across https://tellopilots.com/. Some clever people took the trouble to dissect the API and document it. (https://tellopilots.com/wiki/development/) 

Even though the Go implementation is probably the source of truth, the documentation is very good. Now there was only one problem. I want RUST. 

After a few more hours of hacking, two broken propellers and luckily no fly-away, the time had come. Usable as SDK and implementable in any home-automation project. Who doesn't want drones to swarm out when someone rings the doorbell or comes in the driveway. 🙈 

## 💡 Use it

The repo is on github: https://github.com/Alexander89/rust-tello with an example app to fly around with a joystick. You can easily receive the video stream with VNC.

Here is a small example of how the drone can be controlled via rust.

```rust
use tello::{Drone, Message, Package, PackageData, ResponseMsg};
use std::time::Duration;

fn main() -> Result<(), String> {
    let mut drone = Drone::new("192.168.10.1:8889");
    drone.connect(11111);
    loop {
        if let Some(msg) = drone.poll() {
            match msg {
                Message::Data(Package {data: PackageData::FlightData(d), ..}) => {
                    println!("battery {}", d.battery_percentage);
                }
                Message::Response(ResponseMsg::Connected(_)) => {
                    println!("connected");
                    drone.throw_and_go().unwrap();
                }
                _ => ()
            }
        }
        ::std::thread::sleep(Duration::new(0, 1_000_000_000u32 / 20));
    }
}
```

Happy Hacking and stay tuned
Terraform Trello integration
Tags: showdev, tutorial, productivity, devops
Published: 2021-08-11 09:12:43

![amazing go](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtag4node77raa5hfk38.png)

Hi everyone, today we are going to watch my first open-source terraform custom provider in collaboration with Runelab (an italian custom software and project agency).

but first what do this provider?

allow you to create a workspace,board and custom list when you create a normal project on terraform!

this automate the process of creating a trello workspace, board and lists when you create a normal project.

see an example:
```
#other resources creations like server and cloudfront

  required_providers {
    trello = {
      source = "marco-bertelli/trello"
      version = "0.2.3"
    }
  }
}


resource "trello_board" "my-board-name" {
    key = "your-key"
  token = "your-token"
  workspace_name = "terraform-trello"
  board_name = "test"
  cards = ["new","todo","custom"]
}
```
> you must put this code into main.tf

how you can see you need a trello api key and a trello token of the account in who you want to create the workspace and board (you can find key and token here [link](https://trello.com/app-key))

and later chose a name for workspace the board name and the lists names and is all! 
run:
* terraform init
* terraform apply 
and you will see all online

here the result:
![final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vf8n301hixuhlmk7n7e1.png)

if you like this like and share to the community!
To Branch or Not To Branch?
Published: 2021-06-27 14:05:15

As I’ve been learning more about development, and working with different groups of people: branches in terms of git are foreign concepts to many people, especially those just starting out.

Is branching necessary? No, not really. If you’re working on your own you can easily manage your own changes and just use the main branch. If you’re only pushing changes once you’re done with a section, it’s similar to merging a section of content. If you make a mistake somewhere, or other changes were made you can stash the changes you made and pull where you can bring back or disregard what you stashed. It isn’t the most ideal situation, but it works.

Why branch?
* Branches are really great organizational tools. Theoretically you can create an unlimited amount of branches and use one for anything you’re working on.
* Branches are segregated. If you’re working on a couple features at once, having different branches for each will allow you to work on one without any bugs from another effect your environment.
* Great for working in teams: each person can work in their own branches and save Main for things that have been tested to work.

Branches are also good for use with Pull Requests (PR): request for code to be merged into the main code (or other branch in the repository).

If you’re working on a group project or in open source: owners are often the only ones that are capable of merging some changes into the Main. Collaborators can work directly with the repository but would need to use branches to stage their changes and make a PR to have them incorporated. If you aren’t authorized as a collaborator, you can fork the repository and make a PR from anywhere in your forked repository (the main, or a branch) to the original repository.

As you work with larger bodies of code, and with more people: using Git Branches becomes an even more ideal part of your workflow, and can actually become necessary to use. Try learning about using Git Branches early!
Smart VS Dumb Components
Tags: react, questions, interview, javascript
Published: 2021-08-11 09:19:40

## I was giving an interview some days back and every thing was going great .
**Then the interviewer asked *"Can you tell me the difference between a smart and a dumb component?* "**

I had although worked in a product based company for about 3 months then but had no idea what makes a component smart or dumb.

Obviously you don't have to go that road because today i am going to share with you what is the difference between a smart and dumb component in react.
This question will not be asked to a junior but i believe everyone should have a fair understanding of the concepts.

So lets get going 

**Dumb Component**
Dumb component as the name suggests is "dumb" 
meaning that it doesn't care about anything just itself.
It does not change any state or anything else .
Its just dumb
Dumb components are mostly made just for the UI based work.
Here is an example of a Dumb Component
```
<input label={label} type={type} onChange={onChange}/>
```

As you can guess that all the things that it needs that are changeable like label or type or a onchange callback is given as props and all it does is show the UI.
You can use it wherever you want to 
You just have to pass the props it has and it will work like a breeze.
**Smart Component**
> Smart components (or container components) on the other hand have a different responsibility. Because they have the burden of being smart, they are the ones that keep track of state and care about how the app works.

Smart Components has there own state inside of the components itself.
Its can also then send down the same state to the dumb components so they can work as expected without worrying about the state.

* A good example of a smart component can be the _root_ of the app which handles a lot of the state and can also pass along the state to other components as well.

So thats the comparison between smart and dumb components .
I hope you guys got something to learn from it .

Want to encourage me to create posts like this more 
[Buy me a coffee]('https://www.buymeacoffee.com/jshahcodes')
Hi, Just wondering how to transition elements like this in android studio
Tags: android, ux, xml, jetpackcompose
Published: 2021-08-11 09:13:33

https://dribbble.com/shots/5721735-InVision-Studio-Spaced-App?utm_source=Clipboard_Shot&utm_campaign=JoAccord&utm_content=InVision%20Studio%20-%20Spaced%20App&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=JoAccord&utm_content=InVision%20Studio%20-%20Spaced%20App&utm_medium=Social_Share

CHeck this animation and transitions, if anyone has any idea how to do it or libraries to use, let me know
What can I do if a stack overflow occurs in a quick app?
Tags: android, quickapp, huawei, stackoverflow
Published: 2021-08-11 09:10:36

When content obtained through $element('id') is assigned to a member variable, a stack overflow (RangeError: Maximum call stack size exceeded) may occur and the program will crash. If member variable references exist for a DOM, and a member variable changes, a stack overflow will also occur. The sample code is as follows:

{% gist https://gist.github.com/devwithzachary/ac353e6b7f64b64565d49f341de5a412 %}

The reason is that value assignment will lead to massive data changes. As a result, an internal abnormal loop occurs, causing a stack overflow.

#Solution
To prevent a stack overflow, you can assign data obtained through $element('id') to a local or global variable rather than a member variable. The sample code is as follows:

{% gist https://gist.github.com/devwithzachary/6b535915e59165b301560e7b38db55c8 %}
client side react routing in production
Published: 2021-08-11 09:09:04

How to navigate to my react web app from email link.
for eg: i send a mail from node app like
return {
    to: receiverEmail,
    from: 'from email',
    subject: 'Verify Email',
    text: 'please click on the link to get verified',
    html: `<a href="https://domain/sign-up?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MjczMDU3OTB9.DQ9nsruwmhndiU5yOguDjW3Z54fPEdnhmIqGZwTdVmI"> please click on the link to get verified </a>
    <p>The link expires in 20 minutes</p>`,
  }

In my react app , i have /sign-up route. so i want to show this sign-up page when i click on email link i receive from above .
how to achieve this.
UI Dev Newsletter #69
Tags: html, css, javascript, a11y
Published: 2021-08-11 09:07:54

**Links**


- [Frustrating Design Patterns: Disabled Buttons](https://bit.ly/3s12S28)
Vitaly Friedman tries to answer how we can make disabled buttons more inclusive, when they work well, when they fail on us, when we need them, and how to avoid them.


- [On the <dl>](https://bit.ly/37w5kUU)
Ben Myers explains everything about the underrated description list element plus some real-life uses of name-value pairs.


- [Pseudo-classes](https://bit.ly/3s03jKg)
A lesson about CSS pseudo-classes and different states of it, like interactive, validation states, and more.


- [Foundations](https://bit.ly/3lMa2pW)
Jeremy Keith explains why web browsers shouldn't remove older features from new releases and why the web is meant for everyone to build, not only professional web developers.


- [Visualizing a codebase](https://bit.ly/2WZxeqn)
Amelia Wattenberger explores ways to automatically visualize a GitHub repo and how that could be useful.


- [what devs need](https://bit.ly/3AotWeF)
Paul Haedrich introduces an open-source project for discovering developer tools to boost your workflow without ads, cookies, tracking, popups, or signups.


- [gridless.design](https://bit.ly/3xBFE3Q)
Donnie D'Amato introduces a thesis about the design grid and getting rid of it for web design experiences.


- [bit](https://bit.ly/3xwqWLG)
Chris Walz introduces Bit, a modern Git CLI.



Happy coding!

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
Help me decide, which logo do you prefer?
Published: 2021-08-11 09:07:07

I'm designing a logo for an app I'm building. I'm a developer, not a designer so have that in mind :P

**Context:**
App for tracking my climbing. Tracks the climbs I have done, and when/where. Also tracks how many attempts/sessions it took (_this is called redpointing in climbing lingo_). Additionally it will provide the climber with stats, so he can evaluate his progress.

**Now, which one do you prefer:**

![Logo choices image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h88i5lnle6xw4uisgd4v.png)

> I'm open to any kind of feedback!!
Geeks UI 2.2.0 — Start designing websites with Bootstrap 5 Theme
Tags: javascript, bootstrap, webdev
Published: 2021-08-11 09:01:26




Today we are very excited to introduce [Geeks UI](https://bit.ly/geeksui) 2.2, this release comes with some amazing new features we know that you are going to love!
 
## What we update in Geeks UI. Below is the list.

* **SaaS Landing page:** Improve your conversion rates with a powerful first impression with these modern and clean [landing page](https://codescandy.com/geeks-bootstrap-5/pages/landings/landing-sass.html)s for your SaaS product.

* Pricing compare plan
* Career overview
* Job Listing
* Job Opening
* Contact us page


## Our Goal

Geeks update with new landing and marketing pages for marketing websites. Our goal is to support web design agencies and web developers to quickly start their project with component driven Geeks UI libraries.

## What we have done

We are working to aspire to lead with greater impact. Last month, we achieved a total 250+ sales in Geeks theme, continuing updates in the Geeks bootstrap theme with more application UI Dashboard and marketing design.

Demo — [Geeks UI](https://bit.ly/geeksui)

Thank you for reading. Give your precious time to us.
First Release Article - [Read Here](https://dev.to/imjituchauhan/geeks-bootstrap-ui-kit-courses-admin-dashboard-2i8i) -
Applications of Python
Published: 2021-08-11 08:57:47

It is well established that Python has become one of the most popular programming languages. Created by Guido Van Rossum in 1989, it is beginner friendly and easy to read. Python is also portable, extensible and embeddable, object-oriented and functional, and an interpreted high-level language. There are a lot of areas Python can be used and in this article, I will be talking about some of the applications. 

#### 1. Data Science.
Python can also be used to perform data analysis for specific purposes, extract, and draw insight from data. Libraries like Matplotlib and Seaborn to create beautiful graphs. Pandas for data manipulation, can be used.

#### 2. Machine Learning/AI.
In this field, Python is the most popular language used. With great libraries like Pandas, Numpy, TensorFlow, Matplotlib, Keras and the likes built with Python, ML applications are created with relative ease. Also, AI/ML applications require a language that is stable, secure, and flexible. Python has all these qualities.

#### 3. Scripting.
Scripting is used to automate the execution of tasks that could be done by humans. Since the languages used for scripting are rather interpreted than compiled, Python comes in handy as it is known for speed. 

#### 4. Web Development.
When it comes to web development, Python can be your go-to tool. Why? This is because Python web frameworks are known for scalability, security, and flexibility. There are tons of libraries for web development but the most popular ones are: Django and Flask. We have other frameworks such as Bottle, Pyramid, Web2py, and CherryPy.

#### 5. Web scraping.
For extracting information from the web, Python comes in handy for that. It is easy to use and has great tools for that. Some of them are: BeautifulSoup, Scrapy, Selenium, and Urlib.

#### 6. Game development.
For developing interactive games, there are libraries for that in Python. PySoy (a 3D game engine that supports Python 3) and PyGame are two Python-based libraries used widely for game development.

#### 7. Desktop GUI.
Python offers many Graphical User Interfaces (GUIs) toolkits and frameworks that can be used in desktop application development. PyQt, Kivy, Tkinter, PyGUI, and PySide are some of the best Python-based GUI frameworks that allow developers to create highly functional GUIs.

#### 8. Cybersecurity.
Python is an extremely useful programming language for cybersecurity professionals because it can perform a multitude of cybersecurity functions, including malware analysis, scanning, and penetration testing.

#### 9. Raspberry pi.
As Python is known for its versatility, it can also be used to program a Raspberry pi. The Raspberry Pi Foundation specifically selected Python as the main language because of its power, versatility, and ease of use. Python comes preinstalled on Raspbian, so you’ll be ready to start from the get-go.

With this article, it is safe to say that Python is very versatile and can perform almost any development.

Picking it as your main language is highly recommended as it would make it easy to delve into or switch to any field without hassle.