teleren/devto huggingface dataset:
LeetCode 409. Longest Palindrome (javascript solution)
Tags: algorithms, javascript
Published: 2021-03-29 02:27:05

###Description:
Given a string s which consists of lowercase or uppercase letters, return the length of the longest palindrome that can be built with those letters.

Letters are case sensitive, for example, "Aa" is not considered a palindrome here.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// "A palindrome consists of letters with equal partners, plus possibly a unique center (without a partner). The letter i from the left has its partner i from the right. For example in 'abcba', 'aa' and 'bb' are partners, and 'c' is a unique center.

// Imagine we built our palindrome. It consists of as many partnered letters as possible, plus a unique center if possible. This motivates a greedy approach." 
var longestPalindrome = function(s) {
  let longest = 0;
  let keys = {};
  
    for (const char of s) {
        // Keep track of character count in the keys object
        keys[char] = (keys[char] || 0) + 1;
        // If add 2 to the longest variable everytime we hit an even number count
        if (keys[char] % 2 == 0) longest += 2;
    }
    // If s.length is greater than longest then we know that we can add a unique char in the middle of the palindrome
    return s.length > longest ? longest + 1 : longest;
};
```
freeCodeCamp project done #4: A Technical Documentation Page
Tags: webdev, css, html, codenewbie
Published: 2021-03-29 02:16:30

Hey there! I finally finished my fourth RWD project and I'm now ready to show you my work
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqqhtu7f10zumtp8cctv.png)

<a href='https://codepen.io/babi-b/full/qBRdwjo' target='_blank'> CodePen Link</a>

<h1>Impressions from the project</h1>
<ul>
<li>
The first little obstacle I encountered on this project was thinking of the overall view of the page. Sure the user stories were provided but I didn't want to create something that has already been done. I wanted to go a mile extra
</li>
<li>
Then there was the color scheme. I think I need more tutorials on that😅. I always take a lot of time to brainstorm on that. I did not want to use, blue I see it everywhere😅.
</li>
<li>
Fixing the nav bar. I'd first used <code>flex</code> to display the nav bar and the main section side by side. That made it impossible for me to keep the bar stationary relative to the header so it does not scroll with the page. I had to refactor my code and use <code>float</code> instead. With that, I could use <code>position:sticky</code> to fix the nav bar relatively to the header.
<p><b>PS:</b> This took time😏</p>
</li>
</ul>

That said, what are <b>your</b> impressions?

Also I am open to any questions and <i>constructive</i> criticism.😊 

                                                    💞 Babi
Web Components
Tags: webdev, opensource, webcomponents, web
Published: 2021-03-29 02:13:16

## What is a a web component?

**Web Components** are features that provide a standard component model for the web.  In other words, this is something that can be written and then inserted into whatever one is working on.  These different bits of UI are important for many reasons.  This can be different themes, buttons, widgets, and almost any kind of design.

Recently **web components** have been altered to have a set of four browser standards.  All major vendors have adopted these standards.  Pretty much anywhere HTML loads so do web components. 

## So what are the four standards?


### Elements 
* This is a way to hold custom HTML tags 
* These need to be cloned by the JavaScript
* One can reuse them as many times once it is used once

### Custom elements
* These allow you to register a new HTML tag
* These can be used instead of the <div> and <span> tags
* Instead you can use a string for the name and are defined as a 
JavaScript class
* All of these must contain a dash
* All custom elements have their own custom attributes

### Shadow DOM
* Shadow DOM is a way to keep all of the CSS rules the same
* This is important when working as a team
* Shadow DOM isolates DOM nodes
* It makes the web components self-contained.

### JavaScript Modules
* These pull together the other three standards
* It makes all of the elements to function and be completed
* These can only strictly be used in the specific module unless exported otherwise


## Let's talk web

So what is actually the point of these **web components**?  Well there are a few answers to this.  First off, these improve accessibility tremendously.  It lets the company design their site however they desire.  By having this opportunity, it is on them to decide how accessible they make it.  The more accessible the site is, the higher the usability.


These also help improve the future proof development and improve transparency.  As stated above, once you create the four different elements, one can continue to use them down the stretch.  The components can be used anywhere regular elements are used.  Everyone uses these components already.  They have become the web standard.  
 

[Benny Powers](https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85) says all of this information best.  I would one hundred percent recommend checking out this page to learn more about **web components**.


All big business use **web components**.  All small business use **web components**.  If you are on a web site that uses HTML, it uses **web components**.  For example, companies like Google, GitHub, EA, and Mozilla all use them.


**Web components** are EVERYWHERE!!!


For more information about web components, check out my YouTube video below!

[Learning Web Components](https://youtu.be/aS0uwaEoFcw)
How do you unify TypeScript for both frontend and backend?
Tags: webdev, typescript, discuss, swagger
Published: 2021-03-29 02:07:54

As far as I know, there are only handful of frameworks doing this, e.g. [blitz.js](https://blitzjs.com) and [frourio](https://frourio.io).

However, I know another easy way - Swagger/OpenAPI + typegen + Nodemon.

```js
// nodemon.json
{
  "restartable": "rs",
  "execMap": {
    "ts": "yarn ts"
  },
  "events": {
    "restart": "yarn openapi || :"
  },
  "watch": [
    "server/"
  ],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "ts"
}
```

```js
// package.json
{
  "scripts": {
    "openapi": "wait-on tcp:$SERVER_PORT && curl -s http://localhost:$SERVER_PORT/api/doc/json -o ./assets/openapi.json && typegen ./assets/openapi.json > ./types/openapi.d.ts",
    "ts": "ts-node -r tsconfig-paths/register -O '{\"module\":\"commonjs\",\"noImplicitAny\":false}'"
  }
}
```

And `typegen` is [openapi-client-axios-typegen](https://github.com/anttiviljami/openapi-client-axios). (You can also try swaxios, but I failed to run it.)

With this approach, backend can be any programming languages that support OpenAPI or Swagger. Personally, I use [fastify-swagger](https://github.com/fastify/fastify-swagger); but it can also be things like Python's FastAPI or Golang's [Gin/Buffalo/Native](https://github.com/swaggo).
I'm on the way ...
Published: 2021-03-29 02:00:01

I came from Viet Nam and I'm always looking for a good job. I've always thought about going to become a programmer. But without experience and certification, my dream may hard come true.
Suddenly, one day, I got an offer from Amazon, my working place, a course software development from Flatiron school. This is really the thing I've been waiting for ! I took it without thinking twice. This is just beginning, my dream is still there, not coming true yet, and I have to work hard but I think I'm on the right track. With Flatiron school's support and instructor I'll go fast and far on the way to making my dream come true.
This is just the beginning, my dream job is still far away. With help from Flatiron school and my hard work, I think one day my dream will come true, that day, I will jump high as much as possible and say louder : "I GOT IT".
From Excel to VSCode
Published: 2021-03-29 01:56:11

Being an INFJ, I always have thousand of ideas running in my mind, from food recipes to shark tank ideas and everything in between. Years ago, while working at my e-commerce sales analyst position, I found myself constantly brainstorming ideas on how to optimize the tools that I used. I was trying to program in Excel to create tools to increase efficiency at work. I did end up creating a couple of tools using Excel, but the curiosity didn't stop there. 

The moment I realized all I need is a computer and a whole lot of googling and learning to digitalize my ideas, I made the biggest leap in my career journey, which is to learn software engineering. From coding my first "Hello World" on screen, I never looked back.

All the well-prepared resources and motivating testimonies I found on the internet have completely demolished my previous long-held perceptions that computer science is meant for men who are good in math and sciences. Some of my biggest inspirations have been ted talks about computer science and podcasts by women in tech and minorities in tech, for example, [Learn to Code With Me by Laurence Bradford](https://learntocodewith.me/podcast/) and [CodeNewbie by Saron Yitbarek](https://www.codenewbie.org/podcast).
The Case For Web Components
Tags: webdev, computerscience, a11y
Published: 2021-03-29 01:46:17

# What are web components?

Web components are, by definition; 
> "a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps"

_-[Webcomponents.org introduction](https://www.webcomponents.org/introduction)_

In terms of business, this means that the development team could create each _component_ of a website once and then anyone else who needs to use it can do so with ease.

For example, let's say we are building a site for an organization. This organization prioritizes **consistency** (as it should) and therefore wants certain components of their websites to be uniform; the header, footer, menus, and any other reusable components.

Brigham Young University has a great example of what an organization's codebase should look like [here](https://webcomponents.byu.edu/index.html).

With each component being built and modified as needed, websites can be set up and deployed exponentially faster and cheaper than traditional methods and short-lived JS frameworks. **Web components are here to stay**.

![major browsers support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsrqaz9h8zb0tfj2gxhk.png)

_-[Webcomponents.org](https://www.webcomponents.org)_

If you're looking for a more in-depth look into getting started with web components, check out [this 8 part blog series](https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85) by Benny Powers.


# So, who's using them?

### As mentioned before, **Brigham Young University:**
![BYU's header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbvspcobvaeumrmx5p90.png)
![BYU's header code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyhcj8jzqosw1q8pksku.png)


### Adobe

[Adobe](https://opensource.adobe.com/spectrum-web-components/) has been a big proponent in expanding the open source space for web components. They even have a playground space for you to try out:
![Adobe's web component playground](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djapm1issbbc8948kx6r.png)
_-[Adobe web components playground](https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/accordion--default)_


### YouTube
YouTube uses tons of web components throughout their site. This is thanks in part to Google being a huge driving force in making web components the new standard.
![YouTube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0xcuu5984qz3j3x8nc9.png)

If you want to watch a video explanation, I did make one, but bare with me as I was feeling under the weather:

{% youtube PDh93Xu01nU %}
Pure CSS Blockquotes
Tags: codepen, css, html
Published: 2021-03-29 01:34:49

## Overview

Developed using only CSS and HTML, these blockquotes examples offer a nice way to show off your site's accent color(s) without much extra work.

By using the natural breakpoints in the `border` and changing the `width` of the "negative space", I was able to create two nice angled versions. 

---

{% codepen https://codepen.io/killshot13/pen/MWJeOwE %}

---

## But How?

This is made possible by giving `border-bottom` and `border-top` the exact same color as `background-color`, creating a simulated angle that would otherwise be hard to achieve on such a narrow width.

I'm sure I cannot be the only one to have thought of this idea, but I have not yet come across it so I am quite proud to take credit for this version of the concept at least. 🙃🙃🙃

## Usage

Of course, anyone is free to use it or find ways to improve it. Just put a link back in the comments, please!

Don't forget to 💖 this article and/or leave a 💭. Even better, you can click my name below to 🎆subscribe🎇! 

Until next time...

  -- killshot13

---

{% user killshot13 %}

---
Why web components matter 
Tags: html, javascript, functional, tutorial
Published: 2021-03-29 01:31:44

# What are web components?
Web components are sets of application programming interfaces that allow users to create custom and reusable HTML tags in web pages and web apps. By using web components one can improve accessibility and help future proof development/improve transparency. Web components get their own Shadow DOM (Document Object Model), which is a set of Javascript application programming interfaces that provide the purpose of attaching encapsulated elements while also controlling functionality of said components. This aspect is kept separate from the main DOM, also known as the light DOM, in order to help keep the main clean which helps with the readability of the code. 

### How web components improve accessibility:
* Full control over web components so we can define/extend built in functionality  
* Instead of using standard button you can define an extension of that and then use that custom design repeatedly 
* *For example, instead of using standard button you can define a custom button that has all of the accessibility definitions embedded in it, and use that custom design repeatedly* 

### How web components help future proof development / improve transparency:
* Stable and predictable lifetime – no upgrade traps, no breaking changes
* They are based on official web standards
* Easy to learn and use 
* Reusability makes easier in import and export

### Examples of who’s using web components:
* EA SPORTS 
* Comcast 
* Byu 
* Youtube 
* Nintendo 
* *Nintendo has elements imported through the use of scripts*

# Why using web component approach is important 
* Reusability 
* Separate teams can focus on individual web components 
* Each sub team will only have to worry about their specific component concerns 
* Can manage organization better to work more efficiently 

# Helpful sources I found beneficial for understanding web components more in depth:
1. https://www.proudcommerce.com/web-components/why-you-should-use-webcomponents-now
2. https://www.w3schools.com/TAGs/
3. https://www.24a11y.com/2019/web-components-and-the-aom/
4. https://developer.mozilla.org/en-US/docs/Web/Web_Components

# Walk through video displaying websites with implemented web components:
[Link] (https://youtu.be/Q76aXAS21Xs)
All About Javascript Objects
Tags: javascript, webdev, beginners, firstyearincode
Published: 2021-03-29 01:30:19

### What are objects
![objects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaby9vjo48d4vj7p14i0.jpg)

Objects are things we can perceive with our senses like an iPhone, Apple Watch, or AirPods. 


In programming, objects are a representation of these very real things.
```
// this car variable is an object
car = 🚗
```

In Javascript, an object contains a collection of grouped behavior and characteristics called *properties* & *methods* that identifies the object. 

The Javascript language is made up of mostly objects with the exception of some primitive types(Numbers, Strings, Booleans, Undefined, Null, BigInts, and Symbols).   

### Object Oriented Programming 

Objected-Oriented Programming (OOP for short) is a programming paradigm of using classes of objects to implement large and scaling programs. This includes utilizing an object that interfaces with other objects to execute a task.

```
// Two objects working together 
laptop = 💻 
money = 💳 

// We can build a program to order burritos with objects!!!
burrito 🌯 = 💻 + 💳  
```

### How to work with objects in Javascript

```javascript 
// Two ways of creating javascript objects

// 1. Object Literal
const person = {
    name: "Jane Javascript", 
    age: 26
}

console.log(person.name) // output: Jane Javascript 

// 2. Object Constructor: completes a template for a person
function Person(name, age) {
  this.name = name // points to current instance of object
  this.age = age
}

// Instantiates a new person object from the person template
const jack = new Person("Jack Javascript", 26)

console.log(jack.name) // output: Jack Javascript

// Jack does indeed derive from the Person object
console.log(jack instanceof Person) // output: true

// Adding a new property
jack.job = "developer" 

console.log(jack.job) // output: developer 

// Adding a method
function Car(model, year) {
  this.model = model 
  this.year = year
} 

const myCar = new Car("tesla", 2020) 

myCar.drive = function () {
  console.log("Vroooom")
} 

myCar.drive() // output: Vroooom

// Delete a property
delete myCar.year

console.log(myCar.year) // output: ERROR undefined

// A Javascript Built-In Method
// toUpperCase: uppercases all strings 
console.log(myCar.model.toUpperCase()) // output: TESLA

```

### Let's chat about objects
This was an exploration of objects in Javascript. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with objects in Javascript.

Happy Coding,
Terry Threatt
Future Developer
Tags: anime, onepiece, softwaredevelopment, goals
Published: 2021-03-29 01:26:49

####INTRODUCTION

My name is Marquis Latham and I am currently learning the skills necessary to become a software developer.  I plan to refine my talents in a way that I can help support small and upcoming businesses grow and get there product or services out to the world.  The world, very much like the internet, is so vast and diverse.  The internet links us to many places some of us might never visit or see in our lifetimes.  We use it everyday at some point especially at workplaces to access databases or researching demographics to maximize sales.  I have always found the internet and computers extremely interesting and am glad to have an opportunity to learn the behind the scenes of websites and app creation.

####FUTURE PLANS

Upon completion of my current program, I hope to land a solid job that can further my skills and help me reach my goals.  As stated earlier, I hope to get talented to the point where I can help many different businesses and development teams.  From charities, to gaming companies, to new businesses, I hope to get a chance to work with all of those entities in my career.  With a career in anything related to computers, specifically software development, it is constantly changing and growing.  There will always be a need for this ever-growing industry.  To all my fellow cohorts I hope we all succeed and go on to great future endeavors... I AM EXCITED FOR WHAT THE FUTURE HOLDS!!
Pursuing Passive Learning
Tags: learning, habits, productivity
Published: 2021-03-29 00:55:15

---
title: Pursuing Passive Learning
published: true
description: What can you learn when you're not paying attention?
tags: learning, habits, productivity
cover_image: https://images.unsplash.com/photo-1570286424573-5795ac9db869
---

I wrote this post originally in 2016 when I first started to passively learn Morse code. I added a bunch of custom vibrations for each letter of the alphabet to my phone, and when I add someone to my contact book, I assign them the custom vibration. So, as people text or call me, I'm slowly but surely learning Morse code because of their names. So my husband Joe has a J name, so it's the `.---` vibration, my sister Cami has a C name, so it's the `-.-.` vibration, and so on.

5 years later, it's going pretty well! I admit there are some letters that I simply don't know from this method (I do not know a lot of people with Q and X names), but I've learned a decent amount of Morse code this way and can spell some words out.

We're all exposed to subliminal messages. Due to the massive amounts of information we're exposed to every single day, and our limited capacity to actively, consciously register it, there's always small changes in our minds. But, if you're exposed to the same information again and again over time, there's more lasting changes. So, like in my example above, I've been constantly hearing vibrations for people every day, and the repetition has led to my learning without my having to think about it.

When a person is stressed, they use both their conscious memory and their subconscious memory to compensate for all of the stress. The switch from totally conscious learning to conscious+subconscious learning is triggered by [mineralocorticoid receptors](http://en.wikipedia.org/wiki/Mineralocorticoid_receptor), which are released in response to stress. The switches are controlled by the [amygdala](http://en.wikipedia.org/wiki/Amygdala), the part of the brain that's responsible for both memory and emotional reactions. There's a really interesting study by Schwabe, Tegenthoff, and Hoffken that talks about this, and you can read it [here](http://www.biologicalpsychiatryjournal.com/article/S0006-3223(13)00513-1/abstract). Long story short: it turns out that when I said that I "operate well under stress" in college, I wasn't actually making that up!

I often wonder what else I could try to learn passively. Over the years I've had a binary watch to try and be able to more quickly read binary, I've written down quotes on a post-it here and there for me to occasionally skim and eventually memorize... but I haven't done anything particularly technical with this kind of learning, yet. I would like to try, but I'm not really sure how.

There's probably a lot more to learn about subconscious and passive learning. Please feel free to send me anything you've found on the subject, anything you've tried, or something you're planning on trying!