teleren/devto huggingface dataset:
Responsive Contact Us Form In HTML & CSS
Tags: contactusform, contactuspage, contactufordesign, contactuspagedesign
Published: 2021-02-11 07:06:53

Hello Readers, today in this video we will create Responsive Contact Us Form In HTML & CSS. Earlier blog I have shared <a href="https://www.codinglabweb.com/2020/12/responsive-footer-html-css.html">How To Create Responsive Footer Section For Website<a/>, now it's time to make responsive contact us page.

In simple language, contact us form means the medium to contact or connect specific owner of a website. In this form, users have to fill their some personal details like email address, name, phone number, message, and other information as required on the form.

As you can see on the given image of this program [Contact Us Page or Form] on the webpage, There is one image on the right side and the form is on the left side. All the contact forms are like this, designs may different but the main motive is the same. This given image of a contact form is in image form, actually, I have added various animations on that input field and button, and this contact form is fully responsive.

**You Might Like This:**

<a href="codinglabweb.com/2020/12/create-website-in-html-css-only-design.html">How To Create A Website</a>
<a href="https://www.codinglabweb.com/2020/12/side-bar-menu-using-html-css.html">Sidebar Menu In HTML & CSS</a>
<a href="https://www.codinglabweb.com/2020/12/responsive-neumorphism-navigation-bar.html">Responsive Navigation Menu</a>
<a href="https://www.codinglabweb.com/2021/01/responsive-website-with-html-css-glass.html">Glassmorphism Website Design</a>

**Responsive Contact Us Form [Source Code]**
You can download all source code from the given link. <a href="https://www.codinglabweb.com/2021/02/responsive-contact-us-form-in-html-css.html">Click Here To Download All Source Code</a>
Console.log on Chrome for iOS
Tags: chrome, ios, webdev
Published: 2021-02-11 06:41:49

Did you know it's possible to see console.logs on Chrome for iOS?

I was astonished at first, but it can be really helpful to debug console.logs you placed directly from the device.

Of course, you already can debug iOS on Safari, but Safari has its own rendering and might behave differently, so the Chrome team decided to build in a logger for all tabs even!

How it works:

![Chrome iOS console log](https://cdn.hashnode.com/res/hashnode/image/upload/v1612624732869/EC8QonfNP.gif)

## Viewing console.logs on Chrome for iOS

To enable this feature, open Chrome and type the following URL.

```bash
chrome://inspect
```

This will open up a tab looking like this. You can then tap the "start logging" button.

![Chrome inspect tab on iOS](https://cdn.hashnode.com/res/hashnode/image/upload/v1612624974716/gjdFmdlV4.png)

> Note: The site is not responsive. That's why it looks so tiny.

It's important not to remove this tab, so open a new tab with the website you want to log.

In my example, I use a Codepen. That's always just retuning one console.log.

The results will come in like this:

![Chrome console.log on iOS result](https://cdn.hashnode.com/res/hashnode/image/upload/v1612625017613/mtdHjv8vF.png)

And there you go, a super simple but effective way to console.log on your iOS device.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Effective Java: Minimize The Scope of Local Variables
Tags: java, effective, scope, architecture
Published: 2021-02-11 05:58:45

---
title: Effective Java: Minimize The Scope of Local Variables
published: true
description: A dive into chapter 57 of Effective Java
tags: java, effective, scope, architecture
series: Effective Java Review
canonical_url: https://blog.scaledcode.com/blog/effective-java/minimize_scope_of_local/
---

This chapter begins a new section of the book that focuses on general programming. This particular chapter focuses on a pretty basic concept, minimizing local variable scope. The benefits we get by following this include improved readability, better maintainability, and reduced chance of bugs. 

One of the tips that we can follow that can help us is to make sure we initialize local variables when we declare them. This can be useful for a number of reasons. For one we reduce our chances of null pointer exceptions as we are initializing the variable off the bat. There is also the benefit in that we need to wait far enough into the method until we have enough information to initialize. This being said there are situations where we won't be able to initialize our variables when we declare them. For example, when we are using a `try-catch` and the variable is used after the catch we need to declare it before the variable is initialized in the `try`. That being said, we work to initialize the variables when we declare them when possible. 

Another topic that comes up is preferring `for` loops to `while` loops. The reasoning for this being that for loops come with their own location for variable initialization that has a tight scope that is scoped just to the loop. An example of how while loops can cause issues is as follows:

```java
Iterator<Element> i = c.iterator();
while(i.hasNext()) {
  doSomething(i.next());
}

Iterator<Element> i2 = c2.iterator();
while(i.hasNext()) {
  doSomethingElse(i2.next());
}
```

The problem with the above is that it is wrong and doesn't do what was intended but does compile and doesn't even have a runtime exception. Compare this to the for loop version:

```java
for(Iterator<Element> i = c.iterator; i.hasNext();) {
  Element e = i.next();
  // Do something with e and i
}

for(Iterator<Element> i2 = c2.iterator(); i.hasNext();){
  Element e2 = i2.next();
  // Do something with e2 and i2
}
```

The above won't even compile because `i` has been scoped down to just what it needs. The above can even be improved even more by reusing the variable names (since they are in different scope) and even better, if you aren't using the iterator directly you could use a foreach loop. 

The final tip for keeping scope small is to keep the whole function small. If your whole function is small then your local variables have to have a small scope.
How to Install Hyper Terminal for MacBook
Tags: hyper, terminal, coding, hyperis
Published: 2021-02-11 05:51:09

Hey Guys!

Want to know how to Install Hyper Terminal for MacOS?

Let's get started:

#### First, head over to <a href = "https://hyper.is/">their website</a>:

![Screen Shot 2021-02-11 at 11.04.54 AM](https://dev-to-uploads.s3.amazonaws.com/i/vyr9jdz21ov1ktz4pb7o.png)

#### Then, click on the download button and the download will begin

![Screen Shot 2021-02-11 at 11.06.26 AM](https://dev-to-uploads.s3.amazonaws.com/i/7cc4clwrrr10amcwly5c.png)

#### Next, Double Click on the DMG File
![Screen Shot 2021-02-11 at 11.07.47 AM](https://dev-to-uploads.s3.amazonaws.com/i/2yvapj4daum9xqmkfdze.png)

#### After that, drag Hyper Terminal into the Applications Folder

![Screen Shot 2021-02-11 at 11.10.13 AM](https://dev-to-uploads.s3.amazonaws.com/i/6lyb0mqz18tshuwhl5s4.png)

#### Then, Open The Application in Your Finder or Launchpad

![Screen Shot 2021-02-11 at 11.12.13 AM](https://dev-to-uploads.s3.amazonaws.com/i/w5hny90402p6od8wgfd2.png)

#### Then, click on the Open button in the Prompt that shows up

![Screen Shot 2021-02-11 at 11.14.38 AM](https://dev-to-uploads.s3.amazonaws.com/i/b23g2vpsjbmotjnj2wq6.png)

#### To test whether Hyper is working, type <code>pwd</code>

 ![Screen Shot 2021-02-11 at 11.16.40 AM](https://dev-to-uploads.s3.amazonaws.com/i/qr09u0u8dqby6gfeql3f.png)

#### If it shows you the path of the laptop, then BRAVO it's working. If not, do reach out to me in the comments.

![Screen Shot 2021-02-11 at 11.17.46 AM](https://dev-to-uploads.s3.amazonaws.com/i/rtjb0ptu85wmfk7a3pd2.png)

Hoped You liked this tutorial and hope it worked out for you.

If you liked this blog, please do like this blog and comment.

Don't forget - 

## Keep Coding Y'All 👨🏻‍💻
Side project ideas?
Tags: help, webdev, discuss
Published: 2021-02-11 05:22:08

I working on a couple of little side projects to test out a JS templating framework, form/popup generator, and CSS framework that I am working on. So far I have made a search engine for common JavaScript functions or solutions, a time management app, and a document editor this week. I plan to write an article about the projects I have done this week at the end of the week.

Does anyone have any good front-end app ideas that don't require a server?
Learning what VueJS is and how to use it!
Tags: javascript, vue, codepen, beginners
Published: 2021-02-11 05:21:13

Hey guys! This week I'm gonna be talking about Javascript and VueJS. This is something I'm extremely new to and don't have much experience with, but found after some practice and application it actually isn't that hard to grasp! 

Javascript is comparatively a lot more on the logical side in regards to HTML and CSS. It is dynamic whereas HTML is static. Changes to the application can be made a lot easier and are more friendly with multiple users using a web application. 

VueJS can be described as being a framework to build web applications. There are different elements that Vue adds that makes it easier and more applicable to use in certain situations. Using Vue, you can use templates to dynamically display and change HTML content based values from your JavaScript code.

I created a video giving a tutorial on how to use Javascript and Vue using the resume I made last week with HTML and CSS. My video gives a brief overview on my personal code and how it functions to create what I made! 

I would like to mention a few additional details pertaining to my code. The v-for code I used in my HTML is a for loop, meaning the code will repeat. Using v-bind in HTML allows you to dynamically assign and update HTML attributes based on the JavaScript values. Also, in my code where I use target="_blank" this is so that a new tab is created for my Youtube channel to pop up instead of leaving the CodePen page. 

Link to CodePen: https://codepen.io/TechnologyKatie35/pen/GRNNKON 
Link to Youtube tutorial: 
https://youtu.be/WF2mjudzUZA
Make life easy... VueJS
Published: 2021-02-11 05:20:48

##*What is VueJS?*
Basic VueJS is an implementation using JavaScript to make programming easier to write and read. VueJS has multiple possibilities that are not mentioned in this activity but just as (if not more) useful than I will show you.

##*Using VueJS in HTML*
Once you learn the basics of VueJS you will be able to structure your programs so all of the important data is in one spot. 

####*Example*
Say we want our program to write out a list of three fruits and two vegetables all in paragraph elements (`<p></p>`). The traditional way with normal (boring) HTML would be to make five paragraph elements with a fruit or vegetable in each. Then if we would want to change a fruit or vegetable, we would have to find our paragraph elements and change them there. With VueJS, however, we are able to put all the fruits and vegetables in one area separate from the HTML and call from that list of fruits and vegetables to print our data.

####*Reasoning*
A small example, like the one above, may seem like it would take more time to use VueJS than to normally write it but if we were to implement this process into a large scale program such as, a world-wide shipping conglomerate with thousands if not millions of products, then we could see how keeping all the products separate in a structured format could be extremely useful.

##*Still Lost?*
![John Travolta Lost Meme](https://i.imgur.com/zHcFUlL.gif)
Watch [this](https://youtu.be/JwLA3-4CCJA) video of a real world implementation or check out this [code](https://codepen.io/mikewagner24/pen/NWbbKXw) in the "Work Experience" section.
Continuous Integration for Documentation
Tags: technicalwriting, ci, continuousdeployment
Published: 2021-02-11 05:08:56

In the software industry, documentation is started usually after a developer writes code and the bugs are fixed. This approach's prevailing problem is that documentation is an afterthought and long release cycles more likely result in inaccurate docs. 

What we need to understand is that documentation is not overlooked; however, the workflow is. To document, you need to switch tools. Hence, this switch of context pushes the whole process of documentation to the very end. As of now, the integration of documentation in a continuous workflow is of utmost importance.

*Continuous integration (CI)* means code is continuously tested, integrated, and merged. While *Continuous Deployment (CD)* means code is continually deployed with each patch. For documents, CI and CD include the building, testing the content, reviewing, versioning, and publishing the full artifact for each patch.

When we treat documents like code, the integration of them becomes faster. Nowadays, source code based documentation generator like *markup languages*, *latex*, *pydoc*, and *javadoc* is gaining popularity. Documents like code are always versioned and stored in the version control system. Also, the artifacts for the documents are automatically generated. Furthermore, document files are meticulously reviewed and tested for their accuracy and functionality in the continuous workflow. Overall, there is less human intervention.

To sum up, this practice results in the creation of uniform documents. It also promotes collaboration with the developers by tracking each documentation mistake as a bug. So, applying the software engineering practice to documentation empowers developers to start documenting, which makes the collaboration convenient.
Merge Sort
Tags: javascript, html, css, webdev
Published: 2021-02-11 05:04:38

---
title: Merge Sort  
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---


                       -Merge Sort: Introduction
                       -Merge Arrays: Implementation

                     
  

###Merge Sort: Introduction

Merge sorting is a combination of merging and sorting, works by decomposing an array into smaller arrays, also known as a divide and conquer strategy. The process split up larger array into smaller sub arrays all the way down until get to 0 or 1 element, then building up a newly sorted array. 

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






###Merge Arrays: Implementation


####Merge Sort Example 

```javascript 

function merge(arr1, arr2){
    let results = [];
    let i = 0;
    let j = 0;
    while(i < arr1.length && j < arr2.length){
        if(arr2[j] > arr1[i]){
            results.push(arr1[i]);
            i++;
        } else {
            results.push(arr2[j])
            j++;
        }
    }
    while(i < arr1.length) {
        results.push(arr1[i])
        i++;
    }
    while(j < arr2.length) {
        results.push(arr2[j])
        j++;
    }
    return results;
}
merge([100,200], [1,2,3,5,6])


```

####Most merge sort implementation use recursion. 



```javascript 

function merge(arr1, arr2){
    let results = [];
    let i = 0;
    let j = 0;
    while(i < arr1.length && j < arr2.length){
        if(arr2[j] > arr1[i]){
            results.push(arr1[i]);
            i++;
        } else {
            results.push(arr2[j])
            j++;
        }
    }
    while(i < arr1.length) {
        results.push(arr1[i])
        i++;
    }
    while(j < arr2.length) {
        results.push(arr2[j])
        j++;
    }
    return results;
}

//Recrusive Merge Sort
function mergeSort(arr){
    if(arr.length <= 1) return arr;
    let mid = Math.floor(arr.length/2);
    let left = mergeSort(arr.slice(0,mid));
    let right = mergeSort(arr.slice(mid));
    return merge(left, sright);
}

mergeSort([10,24,76,73])

```
Flatpak packages from end-user  perspective
Tags: linux, watercooler
Published: 2021-02-11 05:03:20

In this post, I would like write few words about package format for Linux based operating systems Flatpak, which is from my point of view one of the best thing which was introduced into Linux ecosystem in last few years. I will not go into the technical details of the format itself, rather then I would like to focus on how good is Flatpak in terms of practical usage of end-users.

In almost every Linux distribution, we always have some package manager which we usually use for installation and update software for the particular distribution. Packages are maintained by distribution's developers and historically users rely on packages in the repository of distribution as the only way how to get the software (of course, except you can compile software from source code). The problem which happened to me several times in the past was, that I would like to have the latest major version of my favorite application, but in distribution's repository was the older version. This is exactly the situation that Flatpak solved for me.

Flatpak offers an easy way how to install the latest version of applications on your distribution (in case of that distribution support Flatpak, more https://www.flatpak.org/setup/). Application in Flatpak format doesn't rely on versions of libraries in your current Linux distributions and brings all it needs itself. Updates are handled by the application's creators and not by distribution maintainers, so you are getting all new features when they are developed. This is also less headache for developers because they will pack the application once and it will run on any distribution. 
    
Currently, the easiest way how to find applications in Flatpak format is to look and Flathub(https://flathub.org/home), which is the repository where any developer can publish applications. You can browse applications by category and find there also description and screenshots from applications.
    
If you want to use Flatpak on your distribution of choice, just install `flatpak` package and add the Flathub repository. Some distributions have Flatpak support implemented out of the box like Fedora, Linux Mint or Elementary OS.
    
    
I can imagine, that a lot of core Linux users (even I'm one of them) can probably find some technical issues or other disadvantages, but I tried to explain Flatpak in positive way to motivate users (especially beginners) to try this and see the benefits. Also, there are other alternatives like Snap or AppImages, but from my personal point of view, Flatpak is currently the best solution how to easily install new applications into my system.
Infra1: Service Discovery, Cloud Native Proxy и деплой
Tags: consul, traefik, docker, ruby
Published: 2021-02-11 05:00:00

Мы в RNDSOFT решили гармонично совместить процесс написания документации с выпуском [цикла статей](https://blog.rnds.pro/+infra?utm_source=devto&utm_medium=social) по подходам, используемым на многих продуктах, инструментам и особенностям нашей инфраструктуры. Тут будет и про consul и про traefik и про многое другое. [Читать тут](https://blog.rnds.pro/005-infra1?utm_source=devto&utm_medium=social). 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2wfj27m8ttm65zbamvub.png)
Mastering The Database - Node.js, Express.js, MongoDB - Series #09
Tags: node, express, mongodb, database
Published: 2021-02-11 04:54:18

## Intro

Let's retieve some random items from a database collection

```js
app.post(apiEnum.api_find_artists_random, async (req, res) => {
  res.json(await mgArr(dbEnum.nlpdb, collEnum.songsColl,
    randomSample(50),
  ));
});

```

## Notes

1.
We are using MongoDB's aggregation framework to retrieve a random sample of artists.

2.
This query has one aggregation stage, called "randomSample", which is just a functional wrapper around the $sample stage operator:
```js
/**
@func
retrieve a random sample of docs

@param {number} lim
@return {object}
*/
export const randomSample = lim => ({ $sample: { size: lim } });
```

3.
Notice our query is already wrapped in an Express Route. Any registered client call that hits that route will retrieve the results.


## Client Call
Here is our client call:
```js
const fetchArtistsRandom = async () => {
 const r = await fetchArrNoParams(apiEnum.api_find_artists_random);
// ...
};
```

## Client Call Notes

1.
Notice the custom fetch wrapper func.

2.
The "NoParams" portion of the name means we do not pass up any parameters to the server.

3.
the "fetchArr" means it returns an arr of results. (as opposed to just a single doc, which is called fetchObj).

4.
Notice we pass in only the URL segment of the API. This fetch wrapper func will retrieve the server base url. This url is set at build time. The build tool will modify the config file with the proper base url to the server.

5.
The fetch wrapper func will call axios using the POST method. All calls use the POST method to avoid the disadvantages associated with the passing of data over the URL.

6.
The fetchArtistsRandom event handler func can be called from the onMount lifecyle func, or from a wired up click event.
eg:
```js
on:click={fetchArtistsRandom}
```


## Example UI Display

![Random Artists example](https://dev-to-uploads.s3.amazonaws.com/i/0ie5yr7o2q4mbs7geuq8.jpg)


## What's next

Here we've shown an example querying data from an API Route, from the User Interface.
It takes just a matter of a minutes to set up a query for the User Interface once you have a set of tools in place.

If you have any questions, let me know.



## Resources

Select random items using the $sample stage operator:
https://docs.mongodb.com/manual/reference/operator/aggregation/sample
A Tutorial To Vue.js
Tags: vue, javascript, html
Published: 2021-02-11 04:44:58

# What is Vue?
Vue.js is an interesting framework that I see as the "cross" between vanilla JavaScript and a framework like React or Angular. It's used for building websites, user interfaces, apps, and more, with the big feature being that it's incrementally adoptable, meaning that you can slowly migrate over your code from vanilla HTML and CSS to completely using Vue.js. 

The core library, according to the website, focuses on the view layer only, and it's easier to pick up than other frameworks out there. However, it's also powerful enough to be used to power dynamic and powerful webpages when used in tandem with other libraries and tooling.

I set out to upgrade my resume with Vue.js, at first converting the static variables to be dynamic, allowing me to quickly change the data on my resume website if need be. I set up a very basic Vue component, with just data held inside it, and implemented it in the existing HTML code, which honestly wasn't too hard.

Check out my video on it here: https://www.youtube.com/watch?v=9VU321sXKxo