teleren/devto huggingface dataset:
Full Stack Web Application Generator By Flatlogic
Tags: javascript, react, vue, angular
Published: 2021-08-30 16:27:47

---
title: Full Stack Web Application Generator By Flatlogic
published: true
description: Create your web application in a few steps with a full stack web application generator. Make a demo version of your app for free!
tags: javascript, react, vue, angular, 
//cover_image: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw2b4i3t7kcpmluie0f0.png
canonical_url: https://flatlogic.com/blog/full-stack-web-app-builder/
---

Hello there! 

I am thrilled to announce to you our new tool called Flatlogic Web Application Generator. 🔥

It is a compilation of more than 7 years of our professional knowledge in web software development.

The idea is really simple and consists of a few steps only:

1) Choose the stack for your web application (React, Vue or Angular for front-end, Node.js for back-end and PostgreSQL or MySQL as a database),
2) Define a database schema,
3) Choose a design, and that’s it!

Then you get a working web application – you can even generate a live demo to preview the app and modify it if needed. The application is a sort of CMS for the entities defined in the database schema. It has a front-end, back-end, and database completely ready to use and download.

Now you can work with React, Vue, and Angular as a front-end, Nodejs as a backend, and PostgreSQL or MySQL as a database. We have Java, Python (Flusk), and PHP versions under development.

As for the design, we offer several options to choose from: Google Material, a classic one, transparent, etc.

You can use a free version of the web app generator, or buy a subscription that starts from **$19** per month.

Tap to watch our tutorial video:
{% youtube ekw1KxDmf3c %}

Join to start using it, click on the [Generate app](https://flatlogic.com/generator) button on the generator page.

For more than a year we have been using the generator internally to boost the development process and now we are happy to share it with you.

Send us your feedback: concerns, questions, requests, etc., — we want to continuously improve the product we have built for you.

Thank you!
How to check resolution of laptop/computer using JavaScript?
Tags: javascript, webdev, html, wordpress
Published: 2021-08-30 16:15:09

Hi guys,

Today we will see how to check resolution of laptop/computer using JavaScript.

To check screen width and height, we have default functions in JavaScript.

They are:

1.screen.width - to check the screen width

2.screen.height - to check the screen height

```javascript
<script>
var width = screen.width;
var height = screen.height;
//prints output in console
console.log(width+"x"+height); // my output: 1366x768
</script>
```
Read: <a href="https://wordpress.org/plugins/increase-upload-limit/" target="_blank">How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?</a>

In this way, we can check the user laptop/computer resolution.

Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. 

Social Profile : <a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/">LinkedIn</a>

Have a Nice Day!
Displaying Pandas DataFrames Horizontally in Jupyter Notebooks
Tags: pandas, jupyternotebook, html, datascience
Published: 2021-11-30 14:13:33

---
title: Displaying Pandas DataFrames Horizontally in Jupyter Notebooks
published: true
date: 2021-08-30 15:47:28 UTC
tags: pandas,jupyternotebook,html,datascience
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/600/1*0IUBppT2cvgmNN8_xlStOA.png)](https://medium.com/dunder-data/displaying-pandas-dataframes-horizontally-in-jupyter-notebooks-32bf5545a1d6?source=rss----c2aa71d9ec41---4)

[Continue reading on Dunder Data »](https://medium.com/dunder-data/displaying-pandas-dataframes-horizontally-in-jupyter-notebooks-32bf5545a1d6?source=rss----c2aa71d9ec41---4)
How do we re-think the software development process?
Tags: softwaredev, startup, devcrm, developer
Published: 2021-08-30 15:43:41

Hey Dev friends 👋

A few weeks ago our company [DevRev](https://devrev.ai/news/devrev-launches-with-dollar50-million-in-seed-funding-and-a-dev-centric-crm-for-the-product-led-growth-era) came out of stealth.

We are building a Developer CRM based on the premise that the current software development process is disjointed and deprives the makers/developers of the joys of creation.

We believe that the current coding, bug fixing, feature, and capabilities building process has pulled the developers further and further away from the end-users and the customers. We feel there is a better way to build, operate, support, and grow a product and have a few hypotheses around pain points and solutions.

We would love to hear from you, the community of Developers, about what you think are some of the pain points and the things you dislike about the current software development process (from requirements gathering, prototyping, building, releasing, fixing bugs to growing the customer base).
Please feel free to respond here, or better still, take our 3 min survey [here](https://dvrv.ai/0) or join our community of [Developers Entrepreneurs](https://devrev.ai/circle) and get a chance to influence our roadmap.

Happy making!
What is semantic HTML and why does it matter?
Tags: html, beginners
Published: 2021-08-30 15:32:24

There are two ways you can write an HTML file:
```html
<div>
  <h1>This is a header</h1>
</div>

<div>
  <p>This is a nav bar</p>
  <ul>
    <li>first thing</li>
    <li>second thing</li>
  </ul>
</div>

<div>
  <p>this is the content</p>
</div>

<div>
  <p>this is a footer</p>
<div>
```

Or you can do this instead:
```html
<header>
  <h1>This is a header</h1>
</header>

<nav>
  <p>This is a nav bar</p>
  <ul>
    <li>first thing</li>
    <li>second thing</li>
  </ul>
</nav>

<main>
  <p>this is the content</p>
</main>

<footer>
  <p>this is a footer</p>
<footer>
```

Both files do the exact same thing, however if you have a long html file, writing it in the way we write the first one can quickly get messy. Whereas in the second way, it provides a bit more structure to your html.

So second file is called a semantic HTML. The advantages are:
- It improves readability of your code, someone else can look at it and quickly figure out what you are doing. If you write a website in the first way, in 15 minutes you are going to forget what you did and hate yourself for that.
- It makes CSS this much easier. You don't have to rely on loads of ids.
- It improves your SEOs, not all divs are created equal and by writing your HTML in a semantic way it tells Google (or ... Bing) how they should rank your website. Which part is more important etc.
- It helps the accessibility of your website. Not all of us use internet the same way. This way of writing your HTML file helps in situations such as if your audience is viewing your website using a speech reader.

There you go, hope you find this useful!

Happy coding :)
MySQL query
Published: 2021-08-30 14:58:45

Student 1 has grade: A

Student 2 has grade: C

Student 3 has grade: B

Student 4 has grade: F


SELECT 
 CASE 
 WHEN SCORE<20 THEN CONCAT("Student ",id,"has grade: F " ) 
 WHEN score>=20 and SCORE<40 THEN CONCAT("Student ",id,"has grade: D " ) 
 WHEN score>=40 and SCORE<60 THEN CONCAT("Student ",id,"has grade: C " )
 WHEN score>=60 and SCORE<80 THEN CONCAT("Student ",id,"has grade: B " )
 WHEN score>=80 THEN CONCAT("Student ",id,"has grade: A " ) 
 end 
 from student order by id;
console.log('Hello World');
Published: 2021-08-30 14:57:41

##Hello, how are you?
My name is Rafael Santos, but you can affectionately call me Krollitte, I'm a Full Stack Developer, but my great passion is the front-end, but precisely mobile development, I use JavaScript as a language and react-native as a framework. I've been in the market for 3 years and I believe I'm a junior on the way to being full, my goal here is to write at least one post a day talking about my daily life as a mobile developer at Ringa Soluções Móveis, to help someone who is going through the same situations that I and to help me better organize my ideas in a linear way. I hope you feel welcome here and that I can help you in some way, until next time!
Ever: a callback-less event reactor for Ruby
Published: 2021-08-30 14:55:48

---
title: Ever: a callback-less event reactor for Ruby
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
[Ever](https://github.com/digital-fabric/ever) is a new libev-based event reactor for Ruby with a callback-less design. Find out more [here](https://github.com/digital-fabric/ever).
1UpBlitz – A SaaS Starter for Blitzjs
Tags: blitzjs, nextjs, react
Published: 2021-08-30 14:45:36

---
title: 1UpBlitz – A SaaS Starter for Blitzjs
published: true
description: Feel confident with your next SaaS project. Save 60+ of work.
tags: blitzjs, nextjs, react
cover_image: https://www.1upblitz.com/images/og.png
---

After working on this product for a few months, I promised to release 1UpBlitz on August 31st. But instead, I'm 1 day early!

This is me working over the weekend, while I was a cottage. Where I was supposed to relax and chill.

![Me Working](https://i.postimg.cc/2837FyHZ/E-Cgvy-QWUAc-IEx-E.jpg)

1UpBlitz is my first product that's been relatively successful.

What is 1UpBlitz? 1UpBlitz is a SaaS starter built with blitzjs that will save you 60+ hours of work.

What's Blitzjs? It's a full stack react framework. Think ruby on rails, but for React. You can learn more about it here https://blitzjs.com/ 

1UpBlitz comes with the following:

- Create multiple plans

- Plan upgrading and downgrading

- Roles & Permissions for workspaces

- Invite users to a workspace

- File upload api routes and an included react-dropzone form component

- Smart slug generator

- Search & Paginated table component

- End-to-end tested with cypress

---

I'm having a release sale of 25% off over at producthunt. Check it out https://www.producthunt.com/posts/1upblitz
Promise.all() in JavaScript 
Tags: javascript, webdev, beginners
Published: 2021-08-30 14:39:34

How promise.all method works?


The <b>Promise.all</b>method takes an iterable of promises as an input, and returns a single Promise that resolves to an array of the results of the input promises.

Check the video where Promise.all explained with realtime examples and eror handling. 

Guess the output ?
<code>
const promise1=Promise.resolve("First Promise");
const promise2=new Promise((resolve,reject)=>{
   setTimeout(() => {
     reject("Second Promise");
   }, 1000);
});

const promiseAll=Promise.all([promise1,promise2]);
promiseAll.then((values)=>{
  console.log(values[0]);
  console.log(values[1]);
});

</code>

{% youtube NvzlOeRzKNE %}
My Raw Notes for the Week of 8-23-2021
Tags: javascript, eventdelegation, frontendmasters, notes
Published: 2021-08-30 14:38:36

ENGLISH:

Holt: "Whatever you put into the DOM and whatever you get out of it are going to strings, every time."

Event Delegation/Bubbling.
Definition according to one guy (paraphrased):
A way to add an event listener once (on the parent) for multiple elements (children) with support for adding extra children later on.
Put another way:
You don't need to add an event listener for each child inside the parent. Instead just put it on the parent and it works for each child. And this also works when you add a new child through DOM manipulation (the whole `createElement()...` process).
An article recommended by Robert:
https://programmingwithmosh.com/javascript/javascript-event-bubbling-and-event-delegation/
Holt and JM say common interview question.

To basically understand how to use `event.stopPropagation()` (not practiced in code below), go here: https://www.youtube.com/watch?v=UWCvbwo9IRk.

CODE:
```
// HTML
<ul class="myList">
    <li>Apple</li>
    <li>Banana</li>
    <li>Carrot</li>
</ul>

// JS
const myList = document.querySelector('.myList')

// Point 1: Note that here you're putting the event listener on the PARENT of the elements you want to turn red upon click, and it works.
myList.addEventListener('click', function(e) {
    const target = e.target
    // FYI the 'matches' method returns a boolean (and here it evaluates to 'true', and we know this because each of the elements DOES turn red upon click)
    if (target.matches('li')) {
        target.style.backgroundColor = 'red'
    }
})

// Point 2: This NEW 'li' element ALSO turns red in the UI upon click. 
const newLi = document.createElement('li')
newLi.textContent = "Delegation"
myList.appendChild(newLi)

// The lesson: You don't need to add an event listener for each child inside the parent. Instead just put it on the parent and it works for each child.

//-------------------------------------------------------------------

// HTML
<div class="button-container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>

// JS
document.querySelector('.button-container').addEventListener('click', function(event) {
    // The below line is only here to disable being able to click on the parent element (div with class 'button-container') which then gives an alert that reads 'You clicked on button 1 2 3 4 5', which is not what we want.
    // Note also that 'BUTTON' has to be in all uppercase because that's what tagName returns.
    if (event.target.tagName === 'BUTTON') {
        alert(`You clicked on button ${event.target.innerText}`)
    }
})
```
Creating an alias for deleting useless git branches
Tags: git, bash, linux
Published: 2021-08-30 14:30:39

Sometimes, deleting branches that we are no longer working on can be tedious. For this, you can create an alias to do the hard work for you.

All git aliases are located at the `~/.gitconfig` file:

```bash
...
[alias]
  cm = commit # Example alias
```

The custom alias we will create will delete all branches except master and the current one:

```bash
git branch | grep -v "master" | grep -v "^*" | xargs git branch -d
```

At `~/.gitconfig`:

```bash
...
[alias]
  del-branches = !git branch | grep -v "master" | grep -v "^*" | xargs git branch -d
```

Finally, you just have to call the alias at your repository directory as a normal git command:

```bash
git del-branches
```
Get Weather {Day -17}
Tags: 100daysofcode, javascript, webdev, beginners
Published: 2021-08-30 14:21:54

#100daysofcode { Day - 17 }

Today I created a common temperature site using the OpenWeatherMap API. Just enter the name of your city and see the temperature.

Preview: https://smart-weather.netlify.app
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1zigbf6t131npq4qt14.png)
#javascript #programming #devcommunity #webdev
Cool Button Hover Effect Using HTML & CSS
Tags: html, webdev, css, beginners
Published: 2021-08-30 14:20:53

Hello, today I created an Amazing button hover Using HTML & CSS. I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/RwgrRqQ %}
Start of a List
Published: 2021-07-29 04:41:53

Elixir has a _lot_ of ways to get the first thing in a list. One of the first things you learn from the basic syntax guide on the Elixir website is that `hd(foo)` gets the first thing in a list, and `tl(foo)` gets the rest. You also learn `[ head | tail ] = foo`.

But what happens when it's an empty list?

```elixir
iex(1)> foo = []
[]
iex(2)> hd(foo)
** (ArgumentError) argument error
    :erlang.hd([])
iex(3)> tl(foo)
** (ArgumentError) argument error
    :erlang.tl([])
```

Those first bits of syntax you learned will throw errors if given empty lists. That means you need to only use them after confirming the list has stuff in it, such as with a conditional or by pattern-matching.

If you aren't guaranteed the list has anything at all in it (such as after piping through an `Enum.filter/2` or `Enum.reject/2`), you need to go deeper into the standard library.

Three ways I know to get the first item are `Enum.at/2`, `List.first/1`, and `Enum.take/2`. At this point the question is: **what kind of output do you need?**

If you want to get back the actual item itself (like you'd get from `hd/1`), two ways to ensure you get `nil` (instead of an error) when it's empty are to use `Enum.at/2` or `List.first/1`.

```elixir
iex(1)> foo = []
[]
iex(2)> Enum.at(foo, 0)
nil
```

or

```elixir
iex(1)> foo = []
[]
iex(2)> List.first(foo)
nil
```

If, on the other hand, you need a list (albeit, a potentially empty one) to make later functions in your pipeline happy? In that case, try `Enum.take/2`

```elixir
iex(1)> foo = []
[]
iex(2)> Enum.take(foo, 1)
[]
```

(`Enum.take/2` will return a list with length _up to_ the number you specified, as available from the list. Give it a list of length 3 and ask for 5? You'll get all 3 items back.)
Sphinx Documentation as PDF on Ubuntu 18.04/20.04
Tags: python
Published: 2021-08-30 14:02:11

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

I've been using Sphinx for sometime to document the source code and I decided to generate a PDF this time rather the HTML and I faced a lot of missing dependencies, the article will show how to handle that on Ubuntu 16.04/20.04.

First, to generate a pdf in sphinx use

`make latexpdf`

The following steps for Ubuntu 18.04

1. Install latex
  `sudo apt install latexmk`

2. Adding some recommeded packages and fonts

   `sudo apt-get install texlive-latex-recommended texlive-fonts-recommended texlive texlive-science texlive-formats-extra`
Practical use-cases of Vue.js mixins
Tags: vue, javascript
Published: 2021-08-30 13:32:32

I love [Vue.js](https://vuejs.org), as I guess you do too (yeah, because you want to read this article). I poured this same love into the reading of the [official documentation](https://vuejs.org/v2/guide): a love commensurately reciprocated by the Vue docs team.

> If you can, by all means possible, you should be using [Vue 3 in your new projects](https://learnvue.co/2021/05/explaining-the-new-script-setup-type-in-vue-3-major-takeaways-from-the-rfc/)

However, for some reasons that are beyond the scope of this post (/coughs/ laziness /coughs/) I somehow almost always consciously skip the [mixins](https://vuejs.org/v2/guide/mixins.html) section. That weird voice in my head always whisper things like "here goes all these unnecessary framework over-complication stuff"

So, if you are like me, you have been using Vue for a while now, and you absolutely have not used mixins nor considered using it, then these 2 reasons are the advantages I have gained in using mixins in my Vue 2 projects:

**1. De-congestion of Single File Components (SFCs)**
When I code SFCs, I like to keep the `<script>` section as lean as possible. I like keeping the cognitive load of parsing my SFCs to the minimum, and mixins help a lot in this regard. Immediate advantages of this practise include:

- Better code organisation
- Perfect for [filters](https://vuejs.org/v2/guide/filters.html) (for Vue 2)
- Icing on cake: easier modular development

**2. Escape route for better TypeScript support**
Well, Vue 3 brings better support for TypeScript. For Vue 2, the most optimal TS experience is gotten by setting up [Class-Style Components](https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components).

However, with mixins, I can have a `.ts` mixin file and do all my Safe Coding™️ there without worrying about limited TS support in SFC files.

These above are the strongest reasons I have for using mixins in my Vue 2 projects.

I hope you learned something in this piece, too.
EmbedIO como deserializar Json camelCase para objetos em PascalCase 😸
Tags: dotnet, csharp, webdev, português
Published: 2021-08-30 12:43:42

Durante a realização de um projeto na [empresa](https://wlssistemas.com.br/) onde trabalhava na data da publicação desse artigo, encontramos a necessidade de criar uma **API** dentro de um projeto **Windows Forms**, assim dando a possibilidade do navegador acessar o app **desktop** para configurá-lo e termos uma comunicação entre ambos.

Nesse contexto utilizamos o EmbedIO para solucionarmos esse problema e assim criarmos essa interação, entretanto, trabalhamos com objetos Json em camelCase pela [convenção da Google.](https://google.github.io/styleguide/jsoncstyleguide.xml?showone=Property_Name_Format#Property_Name_Format)

O EmbendIO ainda não suporta a mesma configuração de serialização e deserialização do [Newtonsoft](https://www.newtonsoft.com/json) sendo necessária a utilização do mesmo para podermos fazer essa configuração do [EmbedIO.](https://unosquare.github.io/embedio.html)

Essa necessidade de usar o Newtonsoft veio após encontrar a seguinte [issue](https://github.com/unosquare/swan/issues/240) no git deles, sendo assim tive que buscar por meios de como fazer e sendo um dev estágiario ainda sou muito apegado a buscar soluções no Google tendo a certeza que vou encontrar tudo, porém pela primeira vez na minha vida eu não encontrei nada. 😿

Após algumas tentativas e erro encontrei uma solução que é simples e prática e pode ser usada como um helper para uma aplicação que será usada multiplas vezes.

No site do EmbedIO não é mencionado que você pode trazer o body de uma requisição como uma string da seguinte forma: 
`var bodyAsString = await HttpContext.GetRequestBodyAsStringAsync();`

Feito isso agora temos uma string que é fácilmente deserializada pelo Newtonsoft:
`var config = Json.Deserialize<ConfigurationsRequestDto>(bodyAsString, JsonSerializerCase.CamelCase);`

Passando o `JsonSerializerCase.CamelCase` como parâmetro e assim resolvendo o mistério do título! 😼