teleren/devto huggingface dataset:
Test your deployment tasks
Tags: ci, cd, devops
Published: 2020-06-16 07:45:22

The great part of a CI/CD pipeline is the headache which can be removed from deployments.  Manual deployments are painful, but deployments as a whole don't need to be.  Automating deployments is a great way to avoid human error, and to be able to deploy with consistent results.

The trouble is, what works on one project might not translate fully to another.  Even with only a small change to the tech stack.

Being a bit of a dinosaur, I started a new project lifting and shifting the Gulp task runner from one project to another to save time.  If it ain't broke, don't fix it!  But I never checked the full Gulp task ahead of it running as part of the deployment - when it failed!

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

The new project was a greenfield project, with performance being a requirement of it.  I wanted to make use of the readability and performance which can be gained from using ES6 JavaScript.  Everything worked during the development and early testing phases of each release cycle, but not so much when the deployment to staging took place.  Receiving an e-mail stating "Pipeline failed" at a deployment stage seemed crazy.  Issues which had never been seen by me before were suddenly in the code base.  What was happening?!

It turned out to be really simple, the deployment to staging ran the "release" gulp job, which did minification of the JavaScript to improve performance.  Minification using the gulp-minify module doesn't work with ES6.  It either needs to be run through a babel to translate it, or not be ES6.  This had not been noticed before as the release build had always worked on the other project, where no ES6 code existed.

The lesson I took from this was simple.  Check each task which will run later at a non-critical point.  I'd rather know early on that the deployment will fail than have my lunch or sleep interrupted by a failed deployment and system down notifications.

Placement of this job in the CI/CD pipeline is a tricky one to work out.  How critical is it compared to others?  That's a judgement call for each project I think.  Personally I put this checking task ahead of all of the long jobs, as I have limited pipeline minutes (on the free Gitlab plan), and would rather fail fast through the jobs than know everything is fine with the code, just to fail at a pre-deployment check.

If the checks take place after the unit tests, then the JavaScript unit tests may pass as individual files, but they may fail when they are combined in a single file.  All these things need to be considered as part of the pipeline, and order of running.

---
This article was originally posted on my blog at [https://www.garybell.co.uk/test-your-deployment-tasks/](https://www.garybell.co.uk/test-your-deployment-tasks/) on 8th January 2020
Import Excel spreadsheet into mysql database in Laravel

Tags: laravel, excel, tutorial, spreadsheet
Published: 2020-06-16 07:37:08

In some of the businees houses in which there are many large number of data has been stored in Excel, and after storing that data, they want some application which helps them to store in web application database, that means to import into web application database. Then at that time if your web application has been made in PHP Laravel framewor then this post will help you to make importing excel file data feature in Laravel application by using Maatwebsite package.

In this tutorial, you can find how to import Excel spreadsheet data and insert into mysql database in Laravel. Here for importing Excel file data here we will use Laravel Maatwebsite package. By using this package we can easily import data from Excel sheet and insert into table in Laravel application.

{% youtube Q2AUH9w9XaA %}
> [Laravel Excel Import to Database](https://www.youtube.com/watch?v=Q2AUH9w9XaA "Laravel Excel Import to Database")
Just a friendly reminder: You have less than 6 months to move out of any product that still use Flash.
Tags: webdev, security, news
Published: 2020-06-16 07:34:21

After December 2020; Adobe, editor of Flash, will remove Flash Player installers from his web site, all major Web browsers will remove it, and Users will be prompted by Adobe to uninstall Flash Player on their machines.

https://www.adobe.com/products/flashplayer/end-of-life.html
Eligant restaurant website 🍣
Tags: octograd2020, html, javascript, opensource
Published: 2020-06-16 07:32:16

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## Lasagna restaurant website


## [Demo Link](https://roll-of-lasagna.netlify.app/)
 

## [Link to Code](https://imojo.in/2hnrreb)

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## When i was started learning to code, then after some day I was dreamed about to start building website template. This is my first template which i have made from scratch with HTML, CSS and little bit of javascript.

The lasagna restaurant theme is a one-page template for any type of restaurants, bistros, sushi bar, fast food, casual dining, fast-casual, buffet, pop-up restaurants, and much more.

Lasagna theme is a clean and modern HTML, CSS, and Javascript theme for cafe & restaurant and any food-related business website built with the core HTML, CSS, and javascript tech stacks. Lasagna theme supports responsive layout so it looks great on all devices. It has predefined styling for modern cuisine restaurants, Asian food restaurants, and elegant food restaurants which is now ready for a sushi bar restaurant 🍣🍥 but you can customize it according to your business and restaurant.

###***Features***
-Clean & commented modern codes
-100% responsive
-Free font, icons, and images
-Documentation included both online and offline
-Unique Design
-Parallax scrolling
-Single page
-Easy to customize
-Header side navigation
-Developer friendly
-[4 Second load time](https://atulprajapati.in/wp-content/uploads/2020/05/Lasagna-restaurant-theme-speed-report.pdf)
-Supporting for all Browsers
-Page loader
-24/7 support

## Additional Thoughts / Feelings / Stories
I have written a [Dev article](https://dev.to/atulcodex/i-made-a-free-theme-1j0f) and good documentation for this website [check out](https://atulprajapati.in/lasagna/doc/) that too 🤞

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
10 Best TYPO3 Local Development Tools & Techniques
Published: 2020-06-16 07:28:12

Do you know which are the popular ways for TYPO3 Local Development? Here, I would like to write down 10 tools & techniques to help you with the development of TYPO3 from beginners to advanced levels.

How do you prefer to develop your PHP or TYPO3 project’s development? Based on your experience and needs, you can choose the way to develop TYPO3 projects. This blog post will be a help to both TYPO3 beginners and advanced.

The detailed blog consists following topics

- Why should you perform TYPO3 local development?
- What are basic system needs to run TYPO3 CMS?
- What’s an ideal way for the TYPO3 development?
- DDEV: TYPO3 Community Loves It
- Docker: Most Modern TYPO3 Development Tool
- *AMP: Traditional Technique for TYPO3 Development
- Native: TYPO3 Local Development Solution
- Vagrant: Build and Distribute TYPO3 Development Environment
- Virtual box: From Oracle
- VMWare: Build and Test TYPO3 Projects
- Homebrew: Cool Package Manager
- Macports: For macOS
- KVM: For Linux
- Windows Subsystem for Linux

Read detailed complete blog at - https://t3terminal.com/blog/typo3-local-development/
React Tutorials - Create Youtube Player - 2
Tags: react, javascript, webdev, showdev
Published: 2020-06-16 07:21:16

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel.
So, this is from my second blog. And here is my YouTube video. Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.

[![alt text](https://res.cloudinary.com/dxkxvfo2o/image/upload/v1592290455/youtube-player-2_i8k4q0.png)](https://www.youtube.com/watch?v=EM8BRehN-QM&t "Create Youtube Player - 2")


You can also read the complete blog here -

https://thewebdev.tech/create-youtube-player-in-reactjs-part-2
Animated Buttons 🤪
Tags: codepen, html, css, ux
Published: 2020-06-16 07:07:56

Hii coding people, hope you doing well and in this dev post we are going to see **How to make animated buttons** with only html and css. You just have to write some CSS transform property, See the code :)

{% codepen https://codepen.io/atulcodex/pen/dyGPOVv %}
Understanding Map in Javascript - Part 1
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-06-16 07:06:35

**This article was first published on [hackinbits.com](https://hackinbits.com/articles/)**

--- 

## What is Map

Map is a collection of key and value pairs, similar to Object. The main difference between a Map and an Object is that Map allows key on any type either primitive or an object.  

Let’s learn how to create a Map and do operations on it.


## Creating a Map

You can create a Map by using the new keyword

```javascript
let map = new Map();
```

This will create an empty Map. 

## Add a new element to Map

To set a key with the value we use **map.set(key, value)**

```javascript
map.set("1", "my key is a string");
map.set(1, "my key is a Number");
map.set(true, "my key is a boolean");
```

Map allows keys with different datatype rather than converting them to string. So, in above example,  "1" and 1 are two distinct keys. 

> We can also use objects as keys in Map.

```javascript
let myObj = {name: "John Doe"};
map.set(myObj, "my value");
```

## Access an element in a Map

To get the value, we use **map.get(key)** method.

```javascript
//output: "my key is a string"
console.log(map.get("1"));

//output: my key is a Number
console.log(map.get(1));
```

> We should not access Map using object syntax: map[key]. This will make Map behave similar to a javascript object with all the limitations of an object. 

## Remove a key-value pair in Map

To delete a key-value pair from a Map we use **map.delete(key)**.

```javascript
map.delete(true)
```

## Remove all key-value pairs from Map

To remove all key-value pairs from Map we use **map.clear()**

```javascript
map.clear()
```

## Count number of elements in a Map

To count the number of elements in Map we use **map.size**

```javascript
let map = new Map();
map.set(1, "one");
map.set(2, "two");

//output: 2
console.log(map.size)
```

## Check if a key exists in a Map

To check if a key-value pair exists in Map we use **map.has(key)**

```javascript
//output: true
map.has (1);
```

In this article, we learned basic operations that we can perform on Map. In the next article, we will learn how to iterate over Map and convert it to array and object and vice versa.
Git: Renaming the "master" branch
Tags: git, github
Published: 2020-06-16 07:02:23

Recently, the CEO of GitHub [responded to a Tweet](https://twitter.com/natfriedman/status/1271253144442253312) about renaming default Git branches from `master` to `main`, saying, "It's a great idea and we are already working on this!"  Now, you may or may not believe that terms such as `master`, `slave`, and `blacklist` are racially-charged or have undesirable connotations nowadays.  However, I hope we can all agree that it's always good to have the know-how and the tools to be able to change the names we use.  That goes for branch names as well.

Renaming Git branches isn't that difficult.  However, it gets a tad harder when you want to rename it both locally *and* upstream.  It gets even trickier for the *default* branch, because of an interesting fact about Git that I consider to be a design flaw:  **Git has no built-in method of changing the default branch remotely.**  It's up to the developer to go to where it's hosted (GitHub, GitLab, Bitbucket, etc.) to change it.

Therefore, I spent some time today coming up with a procedure for renaming branches, which I then used to rename around 60 public and private Git repositories that I maintain.  I thought I would post a write-up here about it, in case anyone is interested or needs to learn it themselves:

1. Rename your local branch.

    git branch -m master main

2. Push renamed branch upstream and set remote tracking branch.

    git push -u origin main

3. Log into the upstream repository host (GitHub, GitLab, Bitbucket, etc.) and change the "default branch".

4. Delete the old branch upstream.

    git push origin --delete master

5. Update the upstream remote's HEAD.

    git remote set-head origin -a

That's covers it on *your* end and where your repository is hosted.  Now what do you have to do if it's *someone else's repo* which renamed a branch, and you're left holding a "dangling" reference (so to speak) to a remote branch that no longer exists?

If you know the branch was renamed, there's nothing to fear.  The following steps will get you back on track:

1. Fetch the latest branches from the remote.

    git fetch --all

2. Update the upstream remote's HEAD.

    git remote set-head origin -a

3. Switch your local branch to track the new remote branch.

    git branch --set-upstream-to origin/main

4. Rename your branch locally.

    git branch -m master main

That's it!  Note that it gets much simpler if you have no remote/upstream.  It's just `git branch -m master main` to rename a branch.  The other commands are all concerned about matching local branches to remote ones (via tracking branches) and updating the HEAD reference to point to the "default" branch.

[EDIT: @eyqs made a neat tool to automate this process, including changing the default branch on GitHub so you don't have to do it by hand!  Of course, as always, use at your own risk, read the code yourself first to make sure you can trust it, etc.  [eyqs.ca/tools/rename/](https://eyqs.ca/tools/rename/)]
Use lodash.debounce inside a function component in React
Tags: react, javascript, lodash, debounce
Published: 2020-06-16 07:00:52

This is my second post.

In this post I'll explain how to debounce a function inside a function react component using [`lodash.debounce`] (https://www.npmjs.com/package/lodash.debounce). We'll create a search app that'll search only when there's a gap of 500ms.

Let's first create a basic search component.

``` javascript
    const [userQuery, setUserQuery] = useState("")

    const onChange = e => {
          setUserQuery(e.target.value);
    };

    return (
      <div>
         <input
             type="text"
             value={userQuery}
             onChange={onChange}
         />
      </div>
    )
```

We'll create a function `delayedQuery` that'll call the api after a gap of `500ms`.

Make sure you wrap it around `useCallback` to update the function only when `userQuery` updates.

``` javascript
const updateQuery = () => {
    // A search query api call.
    sendQuery(userQuery)
};

const delayedQuery = useCallback(debounce(updateQuery, 500), [userQuery]);
```


We'll call `delayedQuery` inside `useEffect` only when the value of userQuery changes. We should also return `delayedQuery.cancel` to cancel previous calls during useEffect cleanup.


``` javascript
useEffect(() => {
   delayedQuery();

   // Cancel previous debounce calls during useEffect cleanup.
   return delayedQuery.cancel;
}, [userQuery, delayedQuery]);
```

So, our debounced search is now implemented. Below is the complete code. There is also a codesandbox link for you to play around.


``` javascript
import debounce from 'lodash.debounce'
...

function searchApp() {
const [userQuery, setUserQuery] = useState("")

const updateQuery = () => {
    // A search query api call.
    sendQuery(userQuery)
};

const delayedQuery = useCallback(debounce(updateQuery, 500), [userQuery]);

const onChange = e => {
   setUserQuery(e.target.value);
};

useEffect(() => {
   delayedQuery();

   // Cancel the debounce on useEffect cleanup.
   return delayedQuery.cancel;
}, [userQuery, delayedQuery]);

return <input onChange={onChange} value={userQuery} />
}
```

{% codesandbox 816zy %}
Open source + proprietary code structure
Tags: discuss, opensource, help
Published: 2020-06-16 06:57:19

I am considering open sourcing a project that I've been working on. Ideally, I'd like to create a hybrid structure that allows for a community edition & enterprise edition (much like Kafka, Gitlab etc). The community version will have the basic features while the enterprise edition will have some premium features and workflows.

I'd love to hear from the community on how do we, as a team, split the code and/or how do we structure the code to keep the community versions & enterprise versions independent, clean and maintainable.

For reference, the technologies we use are Java11 & React.

Look forward to learning from your responses.
Writing JSON based REST APIs in Pure Django without using DRF or tastypie.
Tags: django, python, api
Published: 2020-06-16 06:33:02

I was seeing a lot of posts on Facebook, Reddit, LinkedIn, etc about how people are struggling with writing APIs in Django. Moreover, introducing DRF on top of the Django to write APIs, was, kind of, overwhelming for beginners. So I decided to write a post on the same for absolute beginners keeping in mind that that they have ZERO experience with Django.

In this article, I'm explaining how you can write pure JSON based RESTful APIs in Django without depending on any other third party library or framework such as DRF, Tastypie, etc. 

If you are a beginner and read this post, I'd appreciate if you provide me with feedback to add or explain things in more details to improve this article.

https://gauravvjn.medium.com/build-json-apis-in-django-without-drf-or-any-other-library-2c22af6105d7
Fun in upgrading the machine
Tags: laptop, learning, computers, system
Published: 2020-06-16 06:24:54

As a user with a fair amount of knowledge of computers, I would love to explore the new machine’s systems and how they work. As recently bought a new laptop ASUS Vivobook 15, a thinnest laptop I have ever bought, I thought I should do an upgrade of my machine.

>This laptop comes with default 8GB of RAM (DDR4) and 1TB HDD with an option to upgrade the RAM up to 16GB and storage up to 250GB of SSD with M.2 SATA.

I found that to upgrade the machine I have to carefully open up the components like wifi card, speaker connectors, and a whole lot of stuff like Keyboard connections which is a really delicate task to perform.

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

**Steps to find the motherboard where the new RAM and SSD have to be attached ( Differs from machine to machine)**

- Open up the screws at the bottom of the laptop
- Use a thin card to open up the lid
- The keyboard section will come up and disconnect the connectors of keyboard and touchpad
- Unscrew the wifi card, battery, speakers and the HDD which will allow you to lift the motherboard section 
- Unscrew the motherboard section
- Lift the motherboard to find the slots for RAM and SSD up-gradation
- Put the RAM and SSD in the slots and you are done and dusted


Follow the same process while putting things back and you are good to go.
Verify and check the BIOS to see if the up-gradation works fine or not.

*Happy learning !!!*
How to Acquire Best Website Design Services for Your Business?
Tags: webdesignservices, websitedesigncompany, webdevelopmentagency
Published: 2020-06-16 06:21:46

---
title: How to Acquire Best Website Design Services for Your Business?
published: true
tags: WebDesignServices, WebsiteDesignCompany, webdevelopmentagency
---
![](https://dev-to-uploads.s3.amazonaws.com/i/i41yhpas66teted31hwl.jpg)

Let your business website talk about your brand! The success of a business in the online gleam urge for a powerful website. There are uncountable web designing Companies available in markets that offer web design services. A clean and professional website is a backbone for your online business to get maximum leads. The more your business website will be interactive, the more it will attract potential customers. If you are willing to acquire a [professional website designing service] (https://www.sparxitsolutions.com/web-design.shtml) for your business growth then contacting a well-established web design agency that has created a remarkable history will be profitable. Hiring a professional web development agency can help you out to introduce your business online.

**Let's talk about some true tactics for acquiring web design service for your business:**

1. Initiate with search engine search. Search engines are the top way to find anything you are looking for. It is the fastest mode of communication with the world. You can find out the list of top trusted web design service providers for your business needs.

2. Getting delayed is better than reaching the wrong destination. Make a list of some selective companies just to optimize your selection criteria. Take your time and go through each company's review individually.

3. Do not make instant decisions. Go through the pros and cons of the company you want to hire. 

4. Experienced and highly educated employees are the building blocks of the best web designing company. You can expect quality deliverable only when the company will have great tech ninjas.

5. Go through the services offered. Be clear that the services offered by the firm are according to your requirement.

6. Cost for the services. Of Course, you have a pre-planned budget under which you want all your needs met. Better to know about the charges of each firm and then only move to the next step.

7. Effective communication. The most remarkable thing before hiring a firm is whether they are involved in regular communication or not. A professional web development company keeps its client in the loop of a complete web development cycle.

8. Every entrepreneur seeks the ultimate website which can trigger the business goals. It's not a big deal to invest your capital amount to promote your business but it is a big deal when the investment is not coming back as a good result. 

9. Before finalizing the website design service provider for your business, keep in mind the above-mentioned points. It will take you to the right place in search of an end-to-end web development solution provider.
Week 5 JavaScript Discussion
Published: 2020-06-16 06:13:48

<h1>What is an element in a form?</h1> – Ways a user can interact with a website with elements such as form, input, text area, label, buttons, etc.

<h1>Which properties and methods exist for input boxes?</h1> – For input boxes, there are many ways to customize them, for example, you can change the color, dates,  image, text,  etc.

<h1>How do you display the current date in a form?</h1> – <br>
\<input type="text" id=”date” name=”date”>\</input>
\<script type=”text/javascript”>
document.getElementById(‘date’).value = Date()
\</script>