teleren/devto huggingface dataset:
How do I center a logo in this position?
Tags: question, react, materialui
Published: 2020-02-20 19:38:38

---
title: How do I center a logo in this position?
published: true
description: Question
tags: question, react, reactjs, material-ui
---

You see the blockbuster logo in this position? I am using a generic <img> tag to display it. I've put it inside my <Drawer> component as the topmost item right above the first <Divider>. Here's my code:

```<Toolbar><img src={logo} style={{alignSelf: 'center'}} height="40px"/></Toolbar>```

I also tried this:

```<Toolbar style={{alignItems="center"}}><img src={logo} height="40px"/></Toolbar>```

Note: The use of <Toolbar> seems to have no effect. I just wasn't sure what it ought to be. 

As you can see in the photo -- it's definitely not centered. Any suggestions?
     

![Example](https://dev-to-uploads.s3.amazonaws.com/i/a4kvsqpxpw5vfnocexc2.png)
Community Showcase for GitHub Gists in VS Code
Tags: showdev, vscode, tools, webdev
Published: 2020-02-20 18:53:51

---
title: Community Showcase for GitHub Gists in VS Code
published: true
description: 
tags: showdev, vscode, tools, webdev
---

The developer community uses [GitHub Gists](https://gist.github.com) for a pretty diverse set of use cases. Since it effectively provides  "universal cloud storage", it enables you to manage everything from code snippets, reference materials/notes, and common utility scripts, all from a single location, that is available from anywhere (it's just GitHub!). When I built the [GistPad extension](https://aka.ms/gistpad) for VS Code, I wanted to simplify the process of adopting/using Gists, as well as extend the applicability of Gists in new and interesting ways (e.g. [interactive playgrounds](https://twitter.com/LostInTangent/status/1207718123241033728), [in-editor tutorials](https://twitter.com/LostInTangent/status/1228780570932498432)). So far, I've been pretty excited to see how folks are using it 🙌

However, to further spark the imagination of what can be done with Gists/GistPad, as well as highlight some of the awesome work that is happening across the community, I just shipped a new "community showcase" in the extension.

{% twitter 1230557047394992128 %}

The showcase itself is simply a [JSON file](https://github.com/vsls-contrib/gistpad/blob/master/manifests/showcase.json), which defines a set of categories and their associated gist IDs. As a result, my hope is to continuously update the showcase based on community engagement/submissions, as we redefine what is new/exciting in the GitHub Gists/GistPad ecosystem. So if you have a Gist that you use all the time and/or find extremely valuable, [let us know](https://aka.ms/gistpad-showcase)!

Furthermore, I'd love to hear whether folks would be interested in periodic "challenges", where we advertise a theme (via a [GitHub issue](https://github.com/vsls-contrib/gistpad/issues)?), you then create GistPad playgrounds based around that theme, and then submit them for consideration as comments on the theme issue.

In general, I want the showcase to shine a light on what's possible with Gists, and also, be a fun way for developers to demonstrate their work/ideas. So if you any and all thoughts on how to best accomplish that and/or make the GistPad/showcase experience more compelling, please let me know!
How to replace arbitrary portions of HTML?
Tags: webdev, html, javascript, help
Published: 2020-02-20 19:33:31

If I had a portion of html such as....

```html
<html>
  <head>
    some code...
  </head>
  <body>
    <header>
      Some text
    </header>
    <section>
      Some text
      <div>
        Some text
      </div>
    </section
  </body>
</html>
```

Could I replace this portion of the HTML using JavaScript without any concern for elements or nesting or any particular element's `innerHTML` etc?

```html
<html>
  <head>
    some code...
  </html>
  <body>
    <header>
      Some text
    </header>
    <section>
```

Looking forward to hearing about some ways this could be done. Thanks!
GraphQL Fragments
Tags: graphql, javascript, apollo, relay
Published: 2020-02-20 19:16:45

# Introduction

GraphQL Fragment is a reusable part of the query. Fragments let you construct sets of fields and then include them in different queries of your application. You can think of it as functions in programming languages, that are reusable units of your code. Here's an example of how you could solve the above situation using fragments and support of DRY practice in your queries and components.

# Fragment description

```graphql
# Fragment
fragment name on Type {
  id
  name
}
```

A fragment consists of parts:

- **Fragment name** (*name*)

This is the custom name of the fragment and every fragment will be with own name

- **Object Type** (*Type*)

This is a type of object where you use a fragment

- **Body of fragment** (*id, name*)

This defines the fields of the shared query

# How to use GraphQL Fragments

Let's use the Artsy API, artists and artworks collections:

```graphql
# Fragment of Artist
fragment artistInfo on Artist {
  id
  name
  bio
}
    
# Queries
{ 
  trending_artists(name: ARTIST_INQUIRY) {
    artists {
      ...artistInfo
    }
  }
  
  popular_artists {
    artists {
      ...artistInfo
    }
  }
}
```

The syntax of using a fragment is similar to the JavaScript spread operator. And the idea of a fragment is the same –– to assign the keys and values of one object to another object. `...` give GraphQL command assigns the fields from the custom fragment to the current selection set. In our example we are able to select the name, bio, and id in two different queries using one instance of a fragment, it's cool.

Playground of this example on [GraphQL Arty's](https://bit.ly/3bMw5W6).

## Why do you need to use GraphQL Fragments?

- **Reusable part of queries**

You can organize your queries into small units with reusable parts with fragments. This is the best practice for performance and components architecture of your application.

- **Caching**

The fragments are also frequently used in frontend caching clients like ApolloClient or Relay. ApolloClient provides methods for interacting with cached data ([https://www.apollographql.com/docs/react/caching/cache-interaction/](https://www.apollographql.com/docs/react/caching/cache-interaction/)). 

In Relay, we have the so-called fragment container, which defines the component’s data requirements of the component.

- **Static typing**

We can generate static types from GraphQL for TypeScript or Flow.

# Resources

- Official documentation from GraphQL Fragments –– [https://graphql.org/learn/queries/#fragments](https://graphql.org/learn/queries/#fragments)
- Interacting with cached data in Apollo –– [https://www.apollographql.com/docs/react/caching/cache-interaction/](https://www.apollographql.com/docs/react/caching/cache-interaction/)
- Public GraphQL APIs list –– [https://github.com/APIs-guru/graphql-apis](https://github.com/APIs-guru/graphql-apis)
- Artsy's GraphQL API –– [https://github.com/artsy/metaphysics](https://github.com/artsy/metaphysics)
How to create a to-do list app with Alpas
Tags: alpas, kotlin, webdev, todolist
Published: 2020-02-20 18:55:46

---
title: How to create a to-do list app with Alpas
published: true
date: 2020-02-20 18:52:45 UTC
tags: alpas,kotlin,web-development,to-do-list
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*a-ekDWQKF103LHcllUM5Xw.png)

I created a quick to-do list app to better familiarize myself with some of [Alpas’s](https://alpas.dev) key features and I want to share my example with you! 🚀

Here is a [quick-start tutorial](https://alpas.dev/docs/quick-start-guide-todo-list) that will help guide you though creating your very own to-do list app as well as giving you a tour through a few of Alpas’s features, such as:

- How to get Alpas setup and running on your local device
- How to connect with a MySQL database
- How to create database tables in Alpas and migrate them
- How to create, retrieve, update, and delete data in your MySQL database
- How to create a database entity object
- How to create a controller
- How to add routes
- How to interact with the MySQL database using Ozone
- How to protect your app against the cross site request forgery attacks
- How to connect an interactive front-end with the powerful Alpas back-end
- How to create a fun, yet useful to-do list! ✅

**Here is a snippet from the guide on how you can store a new to-do task to your database** (just to give you a taste 🍦 🙂).

```
// Let's create a function to store a new todo item that have been added via a form.

    fun store(call: HttpCall) {

        // Before we write the new todo task to the database, 
        // let's first validate to
        // make sure there is data with at least 2 characters. 
        // If validation fails,
        // a message will be sent back to the user with the failure 
        // reasons.

        call.applyRules("newTask") {
            required()
            min(2)
        }.validate()

        // If validation has passed, then create a new todo item in  
        // the database

        Tasks.create() {
            // Get the name of the task that was passed
            val taskName = call.stringParam("newTask")
            it.name to taskname
        }

        // If a new todo task has successfully been created and   
        // saved to the database,
        // let's send a success message back to the user to let them  
        // know.

        flash("success", "Successfully added to-do")
        call.redirect().back()
    }
```

* * *
How to Alternate Multiple Divs Using the jQuery Hide and Show Methods
Tags: javascript, jquery, latestposts, hidemethod
Published: 2020-02-20 18:53:14

---
title: How to Alternate Multiple Divs Using the jQuery Hide and Show Methods
published: true
date: 2020-02-20 18:47:37 UTC
tags: JavaScript,jQuery,Latest Posts,hide method
canonical_url: http://robdoylecreative.com/how-to-alternate-multiple-divs-using-the-jquery-hide-and-show-methods/
---

Have you ever wondered how to alternate multiple divs using the jQuery hide and show methods?. This can often come in useful when different links need to have a hover state that will show different content within the same container. A relevant example would be a home page that shows child page excerpts when you […]

The post [How to Alternate Multiple Divs Using the jQuery Hide and Show Methods](http://robdoylecreative.com/how-to-alternate-multiple-divs-using-the-jquery-hide-and-show-methods/) appeared first on [Rob Doyle Creative](http://robdoylecreative.com).
Upgrading to Angular 9 DI Error.
Tags: angular, typescript, javascript, npm
Published: 2020-02-20 18:39:24

## Some Context
Days after the release of Angular 9, I quickly and easily upgraded an enterprise application I've been working on for the better part of a year. Using the Angular CLI this was made super simple and painless using `ng-upgrade`. After the upgrade schematic ran I quickly ran an `ng serve` and wah-la! My app worked great and is running on IVY!.

Everything was great until about 2 weeks later another dev on my team pushed an update to a private npm package my app was consuming. That package was an angular library running in version 7. The library built just fine and passed all our CI checks and published it to npm successfully. Once I upgraded my enterprise app to pull in that minor update of that npm package my app completely blew up at run-time. My app built just fine but my view had nothing but a white screen and a very non-descript console error. 

After a few hours of debugging, I figured I would share my findings in case anyone else runs into this issue in the future. 

### The Error 
`Error: Can't resolve all parameters for ConfiguredLogger`

I reviewed my library module to verify I was providing the correct dependencies and reviewed the ConfiguredLogger itself. All looked good to me, so I thought maybe the library didn't bundle correctly before deploying. I reviewed the bundled files which looked good as well. After looking deeper into the stack trace I found the culprit!

<code>// InjectionTokens should have an injectable def (ɵprov) and thus should be handled above.
    // If it's missing that, it's an error.
    if (token instanceof InjectionToken) {
       throw new Error(Token ${stringify(token)} is missing a ɵprov definition.);
    }
</code>
I noticed the comment on like 16,829 of my angular core.js file! I then reviewed my ConfiguredLogger and found the culprit

<code>
export class ConfiguredLogger{
  constructor(
    @Inject(LOGGER_CONFIG) loggerConfig: LoggerConfig) {}
}
</code>

My Class was using an `@Inject()` decorator in the constructor but I didn't have an `@Injectable()` decorator on the class itself. (This must be one of the reasons why people dislike decorators!)


### Final Thoughts
Ultimately it was a very simple fix but something very easy to miss with the previous versions of Angular. It turns out this was most likely issue for a while but wasn't raised until upgrading to version 9. Ultimately I hope this quick write up will save you the time I lost!
⚔️ Moving from VScode to Webstorm ⚔️
Tags: webdev, vscode, productivity
Published: 2020-02-20 18:34:36

Yep it's one of those posts where I talk about how big my hammer is 🔨 and how much it wieghs and how many nails it can hit per hour... Oh right, nobody else really talks about tools like we do in this industry.

I personally don't get attached to editors and IDEs anymore, but I can say this, vscode is astonishingly good and I have used it since beta. It has come a long way.

So you might be thinking, vscode fanboy why are you switching?

There is nothing wrong with my #vscodesetup
But I now work with 99% java developers, and most of them are comfortable with jetbrains.

I decided to make a noble sacrifice for team productivity by getting hold of Webstorm. And it's quite a lot like my vscode setup, just out of the box. Sure it's missing some of my favourite features like ... Nothing, and it's not as pretty ... without a material skin, then it is pretty. Okay so it's about the same once customized, I recommend a vscode keymap and that's it really, it's fine.

What I gain is helpability, make it easier to be helped, that's how you should consider your editor.

At home, I may still use vscode, or just go all in. 

Have you ever made such choices, do you enjoy Webstorm or vscode? Maybe you think I'm an idiot, let me know in the comments 😅
Hire quick consultation on python refactoring
Published: 2020-02-20 18:25:29

Hello all;

I've inherited this large chunk of python code.
Although I'm experienced in basic refactorings, I'd like to have a quick consultation with some of you (experts) in the strategy and focus of refactoring for this particular chunk of code.

skype: jimmy_figueroa
email: jimmyfigueroa@me.com

Txs in advance
Jimmy
Webpack and collectstatic in CI - Building SaaS #28
Tags: python, django, saas, webpack
Published: 2020-02-20 18:04:39

{% youtube zRP7GvuyCV4 %}

In this episode, we updated Continuous Integration (CI) to run webpack and the Django collectstatic command.  This is part of the ongoing effort to simplify deployment by moving work to CI.

Show notes for this stream are at [Episode 28 Show Notes](https://www.mattlayman.com/building-saas/webpack-collectstatic-ci/).

To learn more about the stream, please check out [Building SaaS with Python and Django](https://www.mattlayman.com/building-saas/).
How to connect Node.js to IBM DB2 database - windows
Tags: ibm, node, db2
Published: 2020-02-20 17:18:28

It is good to connect with the right people. For months now I thought that we had to pay over 30k for the license to use DB2 with node. Today I contacted the right person at IMB. I sent a message to the main person on the node team through LinkedIn, he messaged me back right away and told me about the right tools to use. In less than 10 minutes, guess who connected node to DB2? Me.


I swear I have been googling this for months. Maybe I was typing in the wrong search terms because I wasn't finding what I needed, I kept seeing information about ibm-db.

------------

So if you come across this issue and you want to use IBM DB2 with node, what you need is one out of the following node modules. By the way, none of them have licensing fees:


## Choose one of the following (in order of preference):
**Note:**  The **odbc** option is most flexible and works outside of the i-series environment, on operating systems such as Windows and Linux.


 - [odbc](https://www.npmjs.com/package/odbc "odbc")

 - idb-pconnector

 - idb-connector



**Note:**  These package only installs on IBM i systems.
 - [idb-pconnector](https://www.npmjs.com/package/idb-pconnector "idb-pconnector")
 - [idb-connector](https://www.npmjs.com/package/idb-connector "idb-connector")

------------
# Connect Node to a DB2 Database
First of all, you will need a connection string

**If you have used php in the past **, your connection string might look like this:
```php
$dbconn = odbc_connect('usrProd', 'username1', 'password1', SQL_CURSOR_FORWARD_ONLY)
```



** But in node your connection string is like this**

`const cn = "DRIVER=IBM i Access ODBC Driver;SERVER=host;UID=user;PWD=password;DATABASE=dbname"`

If you already have a DNS setup on your system, you can shorten the connection syntax like so, by providing the DSN information and the username and password

`const cn = "DSN=datasourceName;UID=username;PWD=password";`

------------
You can learn more about how to install the odbc driver and setup the DSN by visiting [IBM/ibmi-oss-examples](https://github.com/IBM/ibmi-oss-examples/blob/master/odbc/odbc.md "IBM/ibmi-oss-examples") on github 



------------
#Sample code to connect Node to DB2

```javascript
const odbc = require("odbc");

const cn = "DSN=usrProd;UID=username1;PWD=password1";

odbc.connect(cn, (error, connection) => {
  connection.query(
    "SELECT * FROM QIWS.QCUSTCDT FETCH FIRST 6 ROWS ONLY",
    (error, result) => {
      if (error) {
        throw error;
      }
      console.log(result);
    }
  );
});
```

% post moyarich/how-to-connect-node-js-to-ibm-db2-database-16m6 %}
10 Top Listicles for React Developers in 2020
Tags: react, reactnative, javascript, webdev
Published: 2020-02-20 17:16:02

We all enjoy the shopping-like experience that listicles give us  - why not make a listicle of top listicles :astonished:

Here's my list of recommended listicles for ReactJS developers:


## **1.** 11 Top React Developer Tools

React developer tools you should add to your toolbox.

{% medium https://medium.com/bitsrcio/11-top-react-developer-tools-for-2020-3860f734030b %}

## **2.** 10 Useful React Components

Different React components for different occasions (written by yours truly).

{% medium https://medium.com/bitsrcio/10-useful-react-components-for-2020-35fd6af56909 %}


## **3.** 7 React Best Practices

ReactJS patterns and practices.

{% medium https://medium.com/@konstankino/2019-reactjs-best-practices-design-patterns-516e1c3ca06a %}


## **4.** 20 Best React.js Books You Have to Read

"The Road to learn React takes you on the journey learning React the pragmatic way. You will build a real world application, consume a real API, write tests for your application, implement exciting features such as caching and filtering, and deploy your application in the end..."

{% post https://dev.to/heshanfu/best-react-js-books-you-have-to-read-2367 %}

## **5.** 3 Ways to Build Your Own React Component Library

3 tools and methods for creating React component library.

{% medium https://medium.com/bitsrcio/3-ways-to-build-your-own-react-component-library-b4d00013a716 %}

## **6.** 6 Handy Regular Expressions Every Front-End Developer Should Know

Leverage the power of regular expressions to perform various text processing tasks.

{% medium https://medium.com/bitsrcio/6-handy-regular-expressions-every-front-end-developer-should-know-ac9e0c514b71 %}


## **7.** 11+ JavaScript Features You’ve Probably Never Used

11+ useful JavaScript features you might have missed.

{% medium https://medium.com/bitsrcio/features-of-javascript-you-probably-never-used-4c117ba3f025 %}

## **8.** 10 Ways to Optimize Your React App’s Performance

How to optimize performance to deliver an awesome user experience.

{% medium https://medium.com/bitsrcio/10-ways-to-optimize-your-react-apps-performance-e5e437c9abce %}

## **9.** 10 Top Javascript Libraries and Tools for an Awesome UI/UX

Recommended tools and libraries that will help you build stunning web apps in 2020.

{% medium https://medium.com/bitsrcio/10-top-javascript-libraries-and-tools-for-an-awesome-ui-ux-828a314752cc %}

## **10.** 10 Useful Web APIs for 2020

Awesome Web APIs for your next web app — with examples.

{% medium https://medium.com/bitsrcio/10-useful-web-apis-for-2020-8e43905cbdc5 %}
Code Kata: Calculate the sum of consecutive odd numbers
Tags: javascript, interview, codekata, challenge
Published: 2020-02-20 16:59:10

## Problem

Given the triangle of consecutive odd numbers:

```text
             1
          3     5
       7     9    11
   13    15    17    19
21    23    25    27    29
...
```

Calculate the row sums of this triangle from the row index (starting at index 1)

__Before looking at the solution, try solving the problem by yourself first.__

## Solution

In order to solve the above problem, we need to look at common patterns that the above triangle produces. The first one that I arrived at is the first value of each row follows a particular pattern. To get the first value of a particular row, we multiply the row by itself, then we subtract the result of removing the value 1 from the row. If __n__ is the row then to get the starting number we will use the following expression __(n * n) - (n - 1)__. From this formulae, we can get the odd numbers that are in a particular row by looping __n__ times and adding the values to an array data structure. We get the odd number by adding 2 to the current starting number value. The array data structure is used here to store the values and calculate the resultant sum.

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

## Refactoring the code

The above code logic can be reduced to one line. If you look keenly, the sum of the values in each row results in finding the cube of the particular row. The logic will resemble this:

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

That is all for the challenge. If you have any questions or suggestions, feel free to ask.
MERN BoilerPlate with auth
Tags: react, node, mongodb, express
Published: 2020-02-20 16:55:32

Are you looking forward a Mern boilerplate with auth included? This is the boilerplate for you!

[Github Repo](https://github.com/paolodelia99/MERN-Boilerplate)

## Techonologies

- MongoDb and Mongoose - MongoDb as a Database and mongoose as as a Object Data - Modeling library for MongoDB and Node.js
- Express - as a backend Framework
- React - as a Frontend Framework
- Node - as a Server
- Redux - for state Management
- JsonWebToken - for creating JSON-based access tokens
- bcryptjs - for hashing the user passwords

Feel free to report any errors or to give me some suggestions to improve it!
Happy coding to everyone!
Should senior software engineers be promoted to engineering managers?
Tags: discuss, healthydebate
Published: 2020-02-20 16:43:46

---
title: Should senior software engineers be promoted to engineering managers? 
published: true
description: Senior engineers are often great programmers, but does that really translate to being great managers? 
tags: discuss, healthydebate
---

I'm curious to hear what fellow members of the DEV community think about the typical career ladder for engineers. Personally, I think its odd that we train engineers to be technical individual contributors for years and then have them pivot into roles as managers that 

1. they may not want 
2. they may not like 
3. they may be unfit for

Curious to hear from devs who have been promoted to managers themselves, what kind of training is offered at your company for this transition, or alternatives to this career ladder that maybe would work better?