teleren/devto huggingface dataset:
Responsive Navigation Menu using HTML & CSS Only
Tags: css, html, webdev, codenewbie
Published: 2020-09-16 11:20:04

Navigation Menu is an essential part of any website design. It helps the viewer to navigate around the website by clicking the nav items. The website designer uses a responsive navbar for the user who visits their website from small devices. It needs to look aesthetic as mobile users are increasing day by day. So we need to take extra care when we make the navbar responsive. For Responsive design, I used CSS media queries to make the navbar responsive and also added a smooth CSS transition effect to make it look better for the viewer.<a href="https://www.codingflicks.com/2020/09/responsive-navigation-menu-using-html-css.html">Download the code</a>
Constructors in Python (__init vs __new__)
Tags: python, programming, 100daysofcode
Published: 2020-09-16 11:10:31

Most object-oriented programming languages such as Java, C++, C#..etc have the concept of a constructor, a special method that creates and initializes the object when it is created. Python is a little different; it has a constructor and an initializer. The constructor function is rarely used unless you're doing something exotic. So, we'll start our discussion with the initialization method. 

The assumption in this article is that you already know the basics of classes and objects in python. 

The constructor function in python is called  `__new__` and `__init__` is the initializer function.

Quoting the python documentation,  `__new__` is used when you need to control the creation of a new instance while `__init__` is used when you need to control the initialization of a new instance.

`__new__` is the first step of instance creation. It's called first and is responsible for returning a new instance of your class.

In contrast, `__init__` doesn't return anything; it's only responsible for initializing the instance after it's been created. In general, you shouldn't need to override `__new__ `unless you're subclassing an immutable type like **str, int, Unicode, or tuple.**

**NOTE:** 
Never name a function of your own with leading and trailing double underscores. It may mean nothing to Python, but there's always the possibility that the designers of Python will add a function that has a special purpose with that name in the future, and when they do, your code will break.

## Example 1: Using ``__init__``
```
class Point:

    def __init__(self, data):
        self.num = data

    def print_num(self):
        print(self.num)



obj = Point(100)

obj.print_num()
```


**Output:**

`100`

**Note:** The self parameter is a reference to the current instance of the class and is used to access variables that belong to the class.

## Example 2:
```
class Person:

    def __new__(cls):
        return object.__new__(cls)

    def __init__(self):
        self.instance_method()

    def instance_method(self):
        print('success!')

personObj = Person()
```

Notice that `__init__` receives the argument self, while `__new__` receives the class `(cls`). Since `self` is a reference to the instance, this should tell you quite evidently that the instance is already created by the time `__init__` gets called, since it gets passed the instance. It's also possible to call instance methods precisely because the instance has already been created.


Thank you for reading. :smile:
END!!!
6 benefits of mobile app development using React Native
Tags: android, webdev, javascript
Published: 2020-09-16 11:08:52

What is React Native

React Native is an open-source programming language used for developing cross-platform applications. It is created by Facebook so that you can create native apps for both Android and iOS using JavaScript as their programming language. Code reusability, hot reload, bridging are some of the features that attract developers to use this. 

Benefits of using React Native for mobile application development

Saves time and money


Developers can build 2 apps within the time frame to built a single application because 90% of code is shared between iOS and Android apps. It not only saves time but also the cost of development. You can develop both the applications with a single team who are proficient enough with the set of technologies and thus you can save the overhead cost on resources. Also, you can use pre-built components while developing so that development can become speedy.

Code reusability


No more worries if you want to move your application to another framework. With react native, you can move your code to Android Studio or Xcode and start from there. This code reusability features distinguish React Native from others.

Hot reload


With the hot reload feature, developers can immediately view the changes made in existing code and this is extremely helpful while working on the front end part. 

Publish updates for your apps faster


Publishing updates are much easier while using react-native. You can update your app while users are using it and also single source code changes will make an update on all platforms.

Large community support


The community support for React Native is huge after making it open source. You get huge and free access to documentation and individual experiences through the community. Whenever a developer gets stuck in between, he can always look for support. Git Hub react-native community is one such space for developers.

Bridging


You can bridge with other platforms even while you are building an app with react native. This helps to use other technologies like swift objective c, especially when you want to add a third party application build on another platform. One such example is blending payment to the shopping apps.

Apps Build on React Native

Facebook


Facebook ad manager is built on react native and it is the first cross-platform application that used react native. 

Wallmart


Wallmart switched to react-native as the demand for a scalable solution arose when there was a huge user demand.
Will This Code Work? What's Wrong With Most Web Scraping Code
Published: 2020-09-16 09:42:33

This code scrapes Airbnb listings and prints them out.
When you save it as scrapeAirbnb.py and run it, it will get your the details.
So is the job done? Finito?

Far from it. If this needs to go into production, at any decent level of scale, you will need all sorts of mechanisms to make sure this can function without breaking.

You will need to handle website timeouts
You will probably need to download images
You will need to pretend to be a web browser very well using User-Agent strings and other techniques
You will need to rotate user-agent strings
You will need to read the Robots.txt and respect it
You will need to send asynchronous requests if you have a lot of URLs to scrape
You may need distributed servers to handle the load if this has multiple domains to be crawled all asynchronously
You will need monitoring, tracking, and alerting mechanism for when the crawler breaks for any reason.
You will need to handle the incoming data at large quantities, detect the finish of a job, send out alerts, and make data available for download or further consumption in various formats like XML, CSV, or JSON.
You may need to handle cookies that the web server sends.
You will need to handle CAPTCHAs and other restrictions that the website will impose after crawling a few hundred URLs
You will need to handle total IP Bans.
The list goes on. Web crawling is amazingly complex, frustrating even in the beginning.

It can be extremely rewarding once you have established a reliable, schedulable, and manageable crawler/scraper setup that has all of the things above finally in place.

Use this as a checklist in your future web crawling projects and comment below if you have other items to add to this.

If you want a cloud-based crawling software that can do all of that and more behind the scenes in a reliable fashion, you can consider using our product TeraCrawler.io for crawling large sets of URLs. For overcoming IP bans, I recommend using our other product Proxies API, which is a rotating proxies API that can route your requests through a pool of over 2 million IPs making IP bans almost impossible.
Typewriter effect typed js🏕
Tags: beginners, html, css, javascript
Published: 2020-09-16 11:02:17

Hi, coding people 👋,
I know you are learning something new here on DEV Community 🧠 That's nice clap for your own 👏 by the way in this dev tutorial we are going to learn this amazing typewriter effect with [typed.js](https://github.com/mattboldt/typed.js/) which is javascript libraay. And one surprising thing i have made this efect in just 3 Minutes, Yes just 3minutes 😎

{% codepen https://codepen.io/atulcodex/pen/poyZbar %}
Java StringBuilder Demystified 
Tags: java, cod, tutorial, leadership
Published: 2020-09-16 10:55:05

Let's understand what makes every lead developer say that you should know how to create your own StringBuilder if you plan to modify your strings.
And most of all - what is the difference between string concatenation vs using this pattern. 

Simply put what we want to do is - an efficient management of space and performance.

This is the simplest of all the implementations with core characteristics of a StringBuilder
- .append()
- .length()
- .toString()


### MyStringBuilder
```java
import java.util.Arrays;

public class MyStringBuilder {

    private static final int INIT_CAPACITY = 16;
    private static final float LOAD_FACTOR = 0.75f;
    private static final int MULTIPLIER = 2;

    private int currentCapacity = INIT_CAPACITY;

    // store the total number of characters in our string builder
    private int count;

    // storage area for our characters
    private char[] chars;

    public MyStringBuilder() {
        chars = new char[INIT_CAPACITY];
    }

    public MyStringBuilder(String str) {
        this();
        append(str);
    }

    public MyStringBuilder append(String newStr) {

        final int length = newStr.length();

        // check if resized or not
        boolean inflated = ensureCapacity(length);

        if (inflated) {
            final char[] newBuffer = new char[currentCapacity];
            // copy current content
            System.arraycopy(chars, 0, newBuffer, 0, count);
            // copy new content
            System.arraycopy(newStr.toCharArray(), 0, newBuffer, count, length);

            // update the store array
            chars = newBuffer;
        } else {
            // add the new content to the remaining array space
            System.arraycopy(newStr.toCharArray(), 0, chars, count, length);
        }

        // update the count of chars
        count += length;

        return this;
    }

    private boolean ensureCapacity(int newLength) {
        boolean isInflated = false;
        // ensure the new length is properly accommodated
        while (Float.compare((float) (count + newLength) / currentCapacity, LOAD_FACTOR) >= 0) {
            currentCapacity *= MULTIPLIER;
            isInflated = true;
        }

        return isInflated;
    }

    public int length() {
        return count;
    }

    @Override
    public String toString() {
        return new String(Arrays.copyOfRange(chars, 0, count));
    }
}

public class MyStringBuilderDriver {

    public static void main(String[] args) {

        var sb = new MyStringBuilder();

        sb.append("Hi").append(" ");
        sb.append("Saurabh").append(",").append(" ");
        sb.append("how are you today ?");

        System.out.println(sb);
        System.out.println(sb.length());
    }
}
```

If you feel it's cool - let me know which Java language framework object I should demystify.
Typewriter effect Javascript☃
Tags: beginners, html, css, tutorial
Published: 2020-09-16 10:47:33

Hey coding people 👋,
Hope you all doing well, In this late dev post tutorial, we will learn how to make this typewriter typing effect with HTML, CSS and JAVASCRIPT. So Checkout this codepen to learn how to make typewriter effect 👇👇

{% codepen https://codepen.io/atulcodex/pen/bGpjeLw %}
How to run WGET in background on logout
Published: 2020-09-16 10:42:43

When transfer large files from one server to another we usually use WGET command to download it, but when network speed is slow on specific server it gets stopped on logging out.

```
wget http://path-to-url/file.zip
```
-b : Go to background
-q : Turn off wget’s output aka save disk space.
-c : Resume broken download i.e. continue getting a partially-downloaded file

```
wget -bqc http://path-to-url/file.zip
```


## Nohup command

Nohup prevents the processes or jobs from receiving the SIGHUP (Signal Hang UP) signal. This is a signal that is sent to a process upon closing or exiting the terminal.

```
nohup wget -qc http://path-to-url/file.zip & 

```
Java 15 features that every Java developer should know
Tags: java, java15
Published: 2020-09-16 10:39:53


Only 4 out of the 14 features introduced in Java 15 are 'must know' for java developers.
Here is an explanation of the features...
https://fullstackdeveloper.guru/2020/09/16/java-15-features-every-java-developer-should-know/
GitHub Actions workflow for building & managing React Native libraries
Tags: actionshackathon
Published: 2020-09-16 10:39:15

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)
### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)
I built a workflow which will help React Native library maintainers to build & manage their library based on my experience in building libraries in my open-source organization [React Native Toolkit](https://github.com/react-native-toolkit)

The workflows are currently used in two of my libraries,
- [React Native Better Image](https://github.com/react-native-toolkit/react-native-better-image) - [workflow code](https://github.com/react-native-toolkit/react-native-better-image/tree/master/.github/workflows)
- [Rex State](https://github.com/react-native-toolkit/rex-state) - [workflow code](https://github.com/react-native-toolkit/rex-state/tree/master/.github/workflows)

### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)
**Maintainer Must-Haves**

This is a workflow to help maintainers of React Native JavaScript libraries. It can also be easily modified for React.js libraries too.


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github https://github.com/react-native-toolkit/react-native-better-image %}

{% github https://github.com/react-native-toolkit/rex-state/ %}


### Additional Resources / Info

I have written detailed posts on how to use these workflows in the DEV Community ﹣

1. [Getting started with your React Native library](https://dev.to/dani_akash_/getting-started-with-your-react-native-library-3c3a)
2. [Automating your React Native library's build process](https://dev.to/dani_akash_/automating-your-react-native-library-s-build-process-ml3)
3. [Automating the review process of your React Native Library's PRs](https://dev.to/dani_akash_/automating-the-review-process-of-your-react-native-library-s-prs-4457)
4. [Automatically publish an update to NPM when you create a release in GitHub](https://dev.to/dani_akash_/automatically-publish-an-update-to-npm-when-you-create-a-release-in-github-464f)
「100日後に転職する男」1日目
Published: 2020-09-16 10:38:06

お疲れさまです。

本日の成果の発表です。

・PHPの練習（ユーザー登録システム）途中まで

具体的には一通りのHTMLとCSS、PHPの記述が終わった段階で、DB接続関連に関しては動画をざっと確認したところまでです。

本日の収穫としては、

・電車内でも意外とコードが書ける
・夜のファミレスには近寄らない
・サブディスプレイの有難みを知る

の三点ですかね。

まず、電車でのコーディングですが、これがまたはかどるはかどる。

今までやっていなかった自分に「なにをしていたんじゃい」を喝を入れたくなります。

今後もこれは継続で。エンジニアとして活動し始めた後もずー−−っとやります。電車最強。

次に夜のファミレスですが、マジでしくじりました。

安価なところにはそれなりの人間が集まるわけで、カフェを「勉強場所」として捉えるならば下手に金をケチってはならんな、と改めて痛感した次第です。

次からはファミレスじゃなくて、そこそこ静かそうなカッフェにします。

最後ですが、サブディスプレイのありがたみ、これは今日イチででかい収穫でした。

家でやっていると、今まではだらけてしまったり、何かと理由をつけてサボってしまうことが多々あったのですが、今日から「どこでもコーディング」を実践してみて、「家で2画面でガッツリコーディング出来るなんて...天国やないか...」と思わず涙を流してしまうほどに思い知らされました。

また、休日にコーディングが出来るありがたさも改めて実感。

こんな気持ちになっているのに、どうして休日である明日に美容院と眉毛サロンの夜お役をいれてしまったんじゃ...(3ヶ月放置しているから近日中に髪を切らなきゃいけないのは確かなんですが)

休日、かつ予定がある日の過ごし方の練習と思って、明日も全力で過ごしていきまっす。

とりあえず今日は寝るまで2画面の有難みを噛み締めながらコーディングして、明日に備えます。

終わり。
12 Useful Resources for Junior Web Developers
Tags: useful, resources, list, programming
Published: 2020-09-16 10:23:22

Hi! My name is Jorge, I'm a junior web developer based in Spain. My *path* started one year ago, when I decided to jump into my real dream as a web dev. I had previously programmed but I decided to take it seriously.

A few months later, my skills was improved so far. 99.9% of *my improvement* was thanks to a lot of resources I found on internet.

## List of Resources

* [Diagrams](https://app.diagrams.net) | This is such a great web for draw a lot of **diagrams** you need. I use it for my databases as long as I need to share with my peers.
* [Aww App](https://awwapp.com/#) | A useful **whiteboard** for share your ideas. Perfect for collaborative drawing.
* [Docusaurus](https://docusaurus.io/) | A good tool for maintain Open Source **documentation websites**.
* [CSS Section Generator](https://wweb.dev/resources/css-separator-generator) | If you want to take your website design to another level, this separator generator allows you to create different **sections** for your web.

![CSS Section Generator](https://dev-to-uploads.s3.amazonaws.com/i/khxno1051qfowekixjnh.PNG)

* [Grid by example](https://gridbyexample.com/) | The perfect place if you need to understand how **grid layout** works.
* [Sweet Alerts](https://sweetalert.js.org/) | A beautiful tool for replacement **alerts**. It's a ```npm pakage``` so you need to install it as a dependencie.

![Sweet Alerts](https://dev-to-uploads.s3.amazonaws.com/i/gxbd0n4x1hlawlekf8dk.PNG)

* [Regular Expressions](https://regexr.com/) | For those who want yo **learn**, build and test [regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).
* [JSFiddle](https://jsfiddle.net/) | If you need to test your code and you don't want to open VS Code, JSFiddle brings you the possibility to use an **online** editor.
* [Gitignore](https://www.toptal.com/developers/gitignore) | Node modules? logs? Try this tool to autogenerate a *.gitignore* file that includes all the directories and files you don't want to push into GitHub.
* [Carbon](https://carbon.now.sh/) | Since SnapCode (and Polacode) stopped working on VS Code, Carbon was my first choice for create and share **images of my code**.

![Carbon](https://dev-to-uploads.s3.amazonaws.com/i/fzm65xudxr5ho2p4bqg8.PNG)

* [Typora](https://typora.io/) | A minimal **markdown** editor (free during beta version). 
* [Improving your Vim skills](https://www.barbarianmeetscoding.com/blog/2019/02/08/boost-your-coding-fu-with-vscode-and-vim) | That's an incredible-long post about **Vim**. If you want learn vim as a pro, you need to check it out.

That's was my first post here! so sorry if I made grammar mistakes. I hope you will find it interesting. Feel free to correct any mistakes I have made. 🙂

<small>*Cover photo by [Christina](https://unsplash.com/@wocintechchat) on [Unsplash](https://unsplash.com/@wocintechchat?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*</small>
Managing GitHub large repository issues with Durable Functions - Part 2
Tags: azure, webdev, tutorial, serverless
Published: 2020-09-16 10:18:44

#### 📺 022 - Maxime Rouiller 🎙️ Frank Boucher

{% youtube ZKksVd4Fqjw %}

---

Maxime is joining Frank in live stream to continue his cool project. The goal is to manage GitHub large repository issues using the power of Azure Durable Functions. In the [previous episode](https://blog.allaroundazure.com/post/2020-06-30-lets-play-with-the-azure-durable-functions/), they didn't have the time to deploy to Azure, so that will be the starting point this time.

Maxime will demonstrate how to deploy using [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=allaroundazure-devto-marouill) and explains the each selected properties along the way with their impact. 

Once deploy, Maxime will then shows how Application Insights could be useful to track the [Durable Function](https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-types-features-overview?WT.mc_id=allaroundazure-devto-marouill), explains how to improve our performance and talk about different architecture applicable to Durable Function.

---

### Useful Links

🔗 [Durable Functions](https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-overview?tabs=csharp&WT.mc_id=allaroundazure-devto-marouill)

🔗 [Durable Functions - Create First C#](https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-create-first-csharp?pivots=code-editor-vscode&WT.mc_id=allaroundazure-devto-marouill)

🔗 [Durable Functions Overview](https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-types-features-overview?WT.mc_id=allaroundazure-devto-marouill)

🔗 [Durable Functions Orchestration](https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-orchestrations?WT.mc_id=allaroundazure-devto-marouill)

🔗 [Durable Functions Code Constraints](https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-code-constraints?WT.mc_id=allaroundazure-devto-marouill)


### Learn more about Maxime Rouiller

🔗 [@MaximRouiller](https://twitter.com/maximrouiller)

🔗 [Bio](https://developer.microsoft.com/en-us/advocates/maxime-rouiller)

<br />
☁️
Would you use a mobile device with no App Store, where you could only use apps you wrote yourself?
Tags: ios, android
Published: 2020-09-16 10:06:41

I’ve been enjoying this discussion about why there’s [no Linux distros for mobile](https://dev.to/akashkava/why-isn-t-mainstream-linux-available-for-mobile-188e/comments) and wondering about a device where your favourite dev environment was available, but there was no App Store. Probably a silly idea to be honest but I think I’d be able to create basic versions of most of the apps I routinely use.

Would you use such a device? Do you think it could be popular with devs?
The best example to understand virtual DOM
Tags: webdev, javascript, react, vue
Published: 2020-09-16 09:59:56

> The virtual DOM is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM.

So generally libraries and frameworks which provide virtual DOM functionality implement virtual tree of UI nodes and on change or re-rendering process, it will check the new node tree with the older node tree that is virtual DOM and then call browser DOM API to re-render only the part that has been changed.

Let's understand this by actual example.
{% codepen https://codepen.io/Mau1ik/pen/QWNBxRw default-tab=js,result %}

The above example is simply re-rendering the content in the div element with root Id. So if we see in the developer tools of the browser, we see something like this
![GIF](https://dev-to-uploads.s3.amazonaws.com/i/19hz4b3pglbhm12v0tbk.gif)


So, the whole root content is getting re-rendered every time.
Now let's use react to do the same
{% codepen https://codepen.io/Mau1ik/pen/RwaBBWv default-tab=js,result %}

It's time to check the element rendering in the developer tools of the browser and see what we get...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n9bsyz1rhstn1h8vkd1w.gif)

Guessing you have seen the virtual DOM magic in the above example. Frameworks and libraries like Vue and React use virtual DOM for this purpose.

Virtual DOM provides us optimized update process and the freedom to not think much about the rendering process (Even if we are re-rendering the whole UI it will actually re-renders the change) but as there is always price to pay and here the price is in the form of high-memory consumption of storing the copy of dom and checking the difference every time something re-renders.