teleren/devto huggingface dataset:
Status Update: 2020-July
Tags: update, status, phalcon
Published: 2020-07-06 20:31:13

---
title: Status Update: 2020-July
published: true
date: 2020-07-06 20:08:18 UTC
tags: update, status, phalcon
canonical_url: 
---

It has been a while… A quick status update for the community.

Certainly the virus and all the lock down, opening up, lock down again have introduced unnecessary stress to all of us and our families. A lot of us had to adjust to a new reality of working from home along with other changes.

These events have thrown a curve ball as they say in the US. Phalcon is not an exception. The team has been trying to adjust to the new reality, taking care of our families first of course. There are so many hours in the day as one can imagine, Phalcon development became a less of a priority compared to our families - and this is how it should be really.

Ruud has been extremely busy, trying to adjust his business to the new reality, since the WuHan Corona Virus managed to eliminate the business model he has been working on for these last few years. Happy to announce that he is recovering his business and moving forward.

Serghei has been working from home and busy as ever. He had to address some issues at home and increased work requirements. Also, holiday season came so time with the family is essential.

Anton also started working from home and equally busy as the rest of the team. He did manage to push some updates to the incubator, devtools and other repos.

Finally, Nikos has been attending to family mostly, survived the Corona Virus, and is looking forward to the first family vacation in the last 5 years. It is going to be a blast.

In short, we are here, we have not abandoned the project. Summer is always a slow period for a lot of projects due to holidays etc. Once we all come back with batteries recharged you will see more activity in the project.

As usual, huge thanks to the community for helping out this time with suggestions, patches, document translations and more.

* * *

Chat - Q&A

- [Discord Chat](https://phalcon.io/discord)
- [Forum](https://phalcon.link/forum)

Support

- [OpenCollective - Support Us](https://phalcon.io/fund)
- [Store - Merchandise](https://phalcon.io/store)

Social Media

- [Telegram](https://phalcon.io/telegram)
- [Gab](https://phalcon.io/gab)
- [MeWe](https://phalcon.io/mewe)
- [Parler](https://phalcon.io/parler)
- [Reddit](https://phalcon.io/reddit)
- [Facebook](https://phalcon.io/fb)
- [Twitter](https://phalcon.io/t)

Videos

- [BitChute](https://phalcon.io/bitchute)
- [Brighteon](https://phalcon.io/brighteon)
- [LBRY](https://phalcon.io/lbry)
- [YouTube](https://phalcon.io/youtube)

<3 Phalcon Team
DOM Manipulation Sandbox
Tags: codepen, beginners, codenewbie, javascript
Published: 2020-07-06 20:04:14

So I've been learning how to work with JavaScript to manipulate the DOM and create interactivity on web pages. During this time, I found that despite all of the videos I watched on the subject, it didn't really sink in until I just started having a mess about and experimenting. It got so much easier after this! I created this DOM Manipulation Sandbox on Codepen to help me practice, and I hope it helps you out too!

Check out the examples I've put on there and then start adding your own and seeing what you can do with it. :)

{% codepen https://codepen.io/tiaeastwood/pen/XWXEbvg %}
"Family count" error when trying to restore database in SQL Server
Tags: sqlserver, database
Published: 2020-07-06 20:02:09

In the process of migrating a SQL Server LocalDB database to MySQL, one of the steps involves restoring the database in SQL Server Management Studio. The LocalDB database was first created in Visual Studio and to migrate it over to MySQL the database had to be setup in SQL Server Management Studio beforehand. Initially I recreated the database in Management Studio by using the T-SQL generated in Visual Studio. Along the line I had to move the database from my work computer to my home computer due to needing admin privileges to run certain tasks.

This is when I encountered an error of "Family count:2. Missing family sequence number:1" when in the middle of the restore process. After some digging, the cause was from having more than one file path listed when performing the backup. I backed up the database a second time with just one file path listed under the Destination section and the Backup Type set to 'Full'. The database was restored with no errors. Success! Here is a [blog post](https://sql-compass.blogspot.com/2015/05/sql-server-media-set-has-2-media.html) from SQL Compass with some helpful screenshots.
How to use React Suspense and lazy for code splitting
Tags: react, splitting, suspense, lazyload
Published: 2020-07-06 19:47:22

---
title: How to use React Suspense and lazy for code splitting
published: true
description: How you can optimize suspended state for lazily loaded component.
tags: reactjs, splitting, suspense, lazyload
//cover_image: https://direct_url_to_image.jpg
---

React `Suspense` and `lazy` is a great way to split your code 🚀. It does all the magic and splits your codes into smaller bundle files. This would help in reducing the load time on the frontend and will load chunk only when the component/page is rendered. I am writing this post to share my learning about the `Suspense` and `lazy`, which can add flickers to your UI if not used correctly. 

I have been using it with various other projects where I had to split code into chunks based on the routes. So a common practice to do that would be

```jsx
const Home = React.lazy(() => import('./Home'));
const Messages = React.lazy(() => import('./Messages'));

const App = () => (
 <Suspense fallback={<Loading />}>
    <Switch>
      <Route path="/">
        <Home />
      </Route>
      <Route path="/messages">
        <Messages />
      </Route>
    </Switch>
 </Suspense>
)
```

and that works completely fine. It will create 2 `.js` chunks, one for `Home` component and another one for the `Messages` component.

But what happens when you start importing components lazily in the `Home` component or `Messages` component. It would still work but you might see UI keeps flickering with the `Loading` component. If the generated chunks are smaller in size, the UI flickers look bad, as before even rendering the `Loader` component, it would hide that and render the new component.

**Example**

{% codesandbox peaceful-montalcini-l9dkq %}

Click on individual buttons in the above example and observe the flickers that occur to the previously loaded Messages.

### Why it flickers?

With the help of my friend [Divyanshu](https://twitter.com/divyanshu013) I was able to learn and debug the reason behind this flicker. It happens because we have wrapped the Messages component in single Suspense which is at the root level, i.e. `App.js`. So whenever a child component is lazily loaded, the entire Messages component is suspended.

Since the loading happens pretty fast the fallback is rendered very briefly which causes a flicker (entire Messages component is suspended and then resumed back).

### How to stop UI flickers?

There are 2 approaches to this.

1. Use Suspense with each of the lazily loaded components, this means it will only suspend the state for that particular component

  **Example**

  {% codesandbox practical-jones-j56dy %}

2. While discussing this issue with another friend [Yash Joshi](https://twitter.com/jyash97) one more solution came up, i.e. to preload a component in `componentDidMount` or `useEffect`.

  **Example**

  {% codesandbox peaceful-payne-gtlef %}

Great learning over the weekend 🎉 #reactjs #optimizations #learninpublic
Fetch with Promise.all and async / await
Tags: javascript, babel
Published: 2020-07-06 19:56:23

# **Fetch with promise.all and async / await**

``This article is focusing on showing a brief explanation of how to use Promise.all in a real example that I used in one of my recent projects.``

You can check the project in the following [github repository](https://github.com/ViriCruz/basic-catalogue-react).


## What is Promise.all

Executes promises in parallel and it waits until all of them are ready. Promise.all takes an array of promises and returns a new promise.

## The scenario we are going to use and why Promise.all is useful in this example.

### _Public API we are going to use to fetch data:_
https://pokeapi.co/api/v2/type/

Check the [official docs](https://pokeapi.co/docs/v2) for more information.

### _What do we want to achieve_
We want to show a list of pokemon with the name of the pokemon with its respective image.

  
### _Obstacles_
https://pokeapi.co/api/v2/type/1 returns a list of pokemon that contains the name but not the image URL, instead, it returns a URL where we can fetch more details of the pokemon including the image.

![](https://i.imgur.com/SfF9CnY.png)

  

### _How to solve this case using ES6_

One way to solve this is using *<code>Promise.all</code>*, as we need to wait for all the promises to resolve (we are talking about fetching to the URL that we retrieved in the first fetch) to populate the list of pokemon with the name and the respective image.

 **How to combine Promise.all with fetch, map, async and await to make a cleaner code**

```js
const fetchPokemon = async () => {
	const initial = await fetch('https://pokeapi.co/api/v2/type/1')
	const initialJson = await initial.json()
	//console.log(initialJson.pokemon) // data array

	const detailsData = initialJson.pokemon.map(async i => {
		const preFetchData = await fetch(i.pokemon.url)
		return preFetchData.json()
	})
  
	// uncomment this code if you want to see how it looks await Promise.all(detailsData)
	// const response = await Promise.all(detailsData)
	// console.log(response)
  const payload = (await Promise.all(detailsData)).map(data => ({
		name: data.name,
		image: data.sprites['front_default']
	}))
  console.log(payload)
}

fetchPokemon()
```

With the code above, we'll have an array of objects which contain the name and image in each item. This array is ready to use to create a list with HTML and achieve what we pretend.

#### Live Code
{% replit @ViriCruz/fetch-from-pokeapico %}

I hope this can help you, there is a ton of use cases where you can apply <code>Promise.all</code>, this is just one of them and, feel free to comment on this article if you like.
How to add free SSL certificate to GoDaddy shared hosting
Tags: sslcertificate
Published: 2020-07-06 19:41:31

I began researching adding a SSL certificate to my personal website after founding out Google would start flagging HTTP sites as 'not secure' back in 2018. Naturally GoDaddy offers their own SSL certificate for 79 dollars a year. You can install your own SSL certificate but GoDaddy offers very little help. I called them to ask questions about how to do it and they tried to discourage me from going on my own. The customer support rep reminded me if I install my own SSL certificate I would have to  manually renew it every 90 days. This was after they said they weren't sure if it was possible on my plan. The rep was correct about the manual renewal although a CRON job can be set up to automatically renew the certificate.

After going through multiple tutorials that didn't apply to my particular situation I found an easy-to-follow post by Steve Phillips. It covered everything on how to install a SSL certificate on GoDaddy shared hosting using a Windows machine and even how to have the certificate automatically renew. It can be found [here](https://tryingtobeawesome.com/encryptdaddy/). The hard part was enabling the SSH access and configuring PuTTy, an SSH client. I used a different way in generating the SSH keys than what is described in Steve Phillips' post. I used PuTTy's built-in key generator. I completed the entire process, including setting up PuTTy in about an hour.
Deploy com Docker + Tomcat
Tags: tutorial, docker, tomcat, war
Published: 2020-07-06 18:36:50

Vou mostrar um exemplo simples e rápido de como configurar e rodar o seu war no tomcat usando o docker.

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

Estou levando em consideração que já tenha instalado o docker na sua máquina, hein!!!

1 - Você precisa baixar a imagem do tomcat: 

**docker pull tomcat:jdk8**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/43wrm1459520jovdv33u.png)


2 - Pegar o IMAGE ID:

**docker images**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ay44baxysoyq76fbzyoe.png)

3 - Executar a imagem (substitua o valor da sua IMAGE ID):

**docker run -p 8080:8080 b79665757bae**
*Você pode alterar para a porta que quiser suaporta:8080* 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/obuh6x1nsvih5q0cy4i0.png)

4 - Pegar o CONTAINER ID:

**docker container ls -a**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b17cotojnxq101eblskt.png)

5 - Baixar um war de exemplo:

[simple.war](https://tomcat.apache.org/tomcat-7.0-doc/appdev/sample/sample.war)

Você pode usar  qualquer war que tenha.

6 - Copiar o war para dentro do tomcat:
**(o container precisa está em execução e substitua o valor do CONTAINER ID)**

**docker cp 'D:\sample.war' 0a88e221ced7:'/usr/local/tomcat/webapps/'**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yeera2d36l6ufcisazdh.png)

7 - Agora é só ver qual o ip default da máquina e acessar o exemplo pelo browser:
[http://192.168.99.100:8080/sample/](http://192.168.99.100:8080/sample/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/30iydeseau1dspnkii21.png)
TIL: HTML <label> elements, what are they `for`?
Tags: html, webdev, a11y, frontend
Published: 2020-07-06 18:54:50

# TIL: HTML \<label\> elements, what are they `for`?
Today I learnt that `<label>` elements aren’t just semantic html tags used to make your code a bit more understandable, or “well structured”.

Besides just representing the caption for a specific piece of your interface, labels can give you a few benefits when used correctly to associate the label with an input (or any other [labelable element](https://html.spec.whatwg.org/multipage/forms.html#category-label)).

There are 2 methods of associating a label to an input
### 1. Using the `for` attribute
To get this working you need to:
- give the `<input>` an `id` attribute
- give the `<label>` a `for` attribute that is the same value as the input’s id
```html
<div class="form__group">
  <input class="form__input" type="text" id="name">
  <label class="form__label" for="name">Full name</label>
</div>
```

### 2. Having a [contained control element](https://www.w3.org/TR/html4/interact/forms.html#h-17.2.1)
All this requires is placing the input inside of the label, and it will be associated implicitly.
```html
<div class="form__group">
  <label class="form__label">
	<input class="form__input" type="text">
	Full name
  </label>
</div>
```

## Benefits
#### Accessibility
Assistive tech, such as screen readers, will be able to read out the label when the user is focused on the input. This is a small use-case, but accessibility is always important. A small win that could go a long way.
#### User Experience
A user, on desktop or mobile, can click on either the input or the label to focus/activate the specific input.

## TL;DR and Examples
Labels can be used to activate/focus on an associated input.

{% codepen https://codepen.io/unathi/pen/oNbpEGy default-tab=html,result %}
How to open a project/folder with your favorite IDE from command line
Tags: vscode, javascript, terminal, npm
Published: 2020-07-06 18:50:32

The esiest way to open a project/folder from terminal is to use [open-ide](https://www.npmjs.com/package/open-ide) npm package. Here is how:

### 1) Installation
Install open-ide globaly from npm:
```npm
npm i -g open-ide
```

### 2) Add your editors
```npm
open-ide add <alias> <path>
```
Example:
```npm
open-ide add vscode C:\PATH\TO\VSCODE\Code.exe
```

### 3) Enjoy
Now, you can execute open-ide in any folder, and it will be opened inside of your editor. If you have multiple editors, you can specify the one you want to use by passing it as first argument to the command:
```npm
open-ide vscode
```

Otherwise open-ide will ask you to choose the editor (from a list)

Note: if you have only one editor declared, it will be used as default

open-ide is an open source project [hosted on Github](https://github.com/OleksandrDemian/ide_open)
Linked List - Python
Tags: python, computerscience, linkedlist, datastructureandalgorithm
Published: 2020-07-06 18:14:03

#### Goodies for Python lover.

#### DSA - https://github.com/skwebdeveloper/Python_DataStructure/blob/master/SingleLinkedList.py

Data structure and algorithms I personally worked on it just for you people. A basic understanding of Linked List. It covers -

1. How we can create a list.

2. How we can Delete a list.

3. How we Add a new list.

And a lot. You can simply check it out. You will definitely love this one. Run it on your code editor. 

Link - https://github.com/skwebdeveloper/Python_DataStructure/blob/master/SingleLinkedList.py

More coming soon.
I make my first Electron application to document my journey as Junior developer in a timelapse video
Tags: opensource, javascript, webdev
Published: 2020-07-06 18:03:34

Hey,



I'm a self-taught developer and I love watching speed coding videos and see how things are built-in timelapse video effects and I was inspired by Devon Crawford Video which he makes a script to automate his video editing process and it's built it with C and FFmpeg after that I come up with an idea for a cross-platform desktop app using Node js and FFmpeg



Features of Makerlapse:



Light files: We don't record a full-length video and then speed it up – instead, we record directly a time-lapse video. This means no heavy files on your hard drive and quicker exporting process.

Simple UI: We provide easy & clean UI with only necessary elements, with one click you can get the time-lapse video ready in a couple of seconds

Add your own soundtrack: You can upload your own soundtrack. So, you'll have a ready-made timelapse video to share

Cross-platform: You can use it both on Windows (Very soon will be available) and Mac OS

I'd love to hear your feedback about it
Thank You

Github Repo: https://github.com/IliasHad/makerlapse-app
I'm still using Firefox
Tags: webdev, browsers, watercooler, productivity
Published: 2020-07-06 18:03:13

I made this post a little while back...

{% link https://dev.to/ben/new-machine-new-browser-496l %}

I decided to switch to Firefox even though it _felt weird to be off Chrome_.

This isn't the world's most important news, but I'd like to make note that Firefox is now my default browser and just feels like my natural, normal browser.

In fact, when I go back to Chrome (which I still do plenty of, because I develop for that browser), it feels as weird as Firefox did when I first made the switch.

My muscle memory already thinks of Firefox as synonymous with "browser" in my normal desktop workflow.

Psychology and small user habits are generally what keep people from making consumer switches. Any campaigns to convince many folks to move to a new tool (either by that tool's own marketing or perhaps by third-party activists) should be acknowledging of how ingrained these habits can be, but also aware that the new thing becomes habit quickly enough.
Debugging Javascript Applications
Tags: javascript
Published: 2020-07-06 17:45:27

---
template: BlogPost
path: /debugging
title: Debugging Javascript Applications
thumbnail: "/assets/js.png"
metaDescription: Meta description for Hello World
---

Logging is an important aspect to debug simple and complex applications. This helps the developer to see what's going on in the application, how it is reacting to changes, where the code is breaking etc.

The most common and standard way to log the data is log() method of console object.

But, the console object has some other really interesting method to create logs like `warn` `info` `error` etc.

## log()

It is used to output messages in the console

![console.log()](https://dev-to-uploads.s3.amazonaws.com/i/h6c1zj92lnf7ieqqo5a7.png)

## warn()

It is used to output warning messages in the console.

![console.warn()](https://dev-to-uploads.s3.amazonaws.com/i/y6wywn1bv1npz9ij5gxz.png)

## info()

It is used to output informative messages in the console

![console.info()](https://dev-to-uploads.s3.amazonaws.com/i/dkgw6au7su0oxh9hijb0.png)

## error()

It is used to output error messages in the console.

![console.error()](https://dev-to-uploads.s3.amazonaws.com/i/qeup7zec6qbunmiwb4mu.png)
## table()

It is used to console output in a nice tabular format.

![console.table()](https://dev-to-uploads.s3.amazonaws.com/i/mb4cjojkwao7plxu61jb.png)

## dir()

It is used to display objects in a nice interactive manner. It lets us see the contents of child objects.

![console.dir()](https://dev-to-uploads.s3.amazonaws.com/i/apzp2c69y10x8h4t5q7l.png)

## tracing()

It is used to print the stack trace which helps to know and understand the code execution flow.

![console.trace()](https://dev-to-uploads.s3.amazonaws.com/i/pznhhoa50wt1v2uvn2zm.png)


## clear()

It is used to clear the console.

![console.clear()](https://dev-to-uploads.s3.amazonaws.com/i/g4u0ls863fe9588pj1kc.png)

## time()

It is used to track the time to take to execute the operation.

![console.time()](https://dev-to-uploads.s3.amazonaws.com/i/mb4cjojkwao7plxu61jb.png)

## count()

It is used to count the number of times the same response is recorded.

![console.count()](https://dev-to-uploads.s3.amazonaws.com/i/1c0wbs424ruzaympd4kn.png)


### How about styling the console??

The console can be made more interactive by adding colors to it. To add styling add %c into the message. Anything after %c will get styled by the properties specified in other arguments.

![styles](https://dev-to-uploads.s3.amazonaws.com/i/55rbhtzlfi29ylsaaq8t.png)

This blog was initially published [here](https://dikshagoyal.netlify.app/debugging)