teleren/devto huggingface dataset:
Sticky Section Headers
Tags: css, showdev, html, webdev
Published: 2021-10-10 18:43:58

---
title: Sticky Section Headers
published: true
description: An HTML and CSS example of sticky positioned headers, aligned to the left of content.
tags: css, showdev, html, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jjwumy5saom30n6uei3.png
---

Hi folks! I threw together a Codepen to demo using `position: sticky` to "stick" section headers to the side of the screen while scrolling long blocks of content.

{% codepen https://codepen.io/aileen-r/pen/Yzxzvag %}

This layout pattern could be used for a list of blog posts, comments on a single blog post, or for keeping share buttons in view on long article pages. It could also be used for an instant messaging layout to "stick" a user's profile picture next to their message.

On mobile screen sizes, the headers stack vertically but stay sticky at the top of the screen.

## Resources Used

- [Happy Hues](https://www.happyhues.co/palettes/15) for the colour palette.
- [Font Awesome](https://fontawesome.com/) for social icons.

## References

- This CSS Tricks article on [scaling font-size based on the viewport](https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/).
- More generally, I've been doing the amazing [CSS for JavaScript Developers course](https://css-for-js.dev/) which has been inspiring me to learn CSS in-depth as a language, rather than as a collection of hacks and tricks.
[React newbie] Prevent redundant re-rendering when calling callbacks in useEffect(useLayoutEffect)
Tags: react
Published: 2021-10-10 18:37:04

When passing callbacks to child components to detect their changes, you may need to call the callbacks inside `useEffect` or `useLayoutEffect` and add the callbacks into its dependency array:
``` js
 useLayoutEffect(() => {
    if(onScroll) onScroll(x, pos) // call the callback
  }, [x, pos, onScroll])
```

However, this will cause an infinite loop when rendering if the callback will trigger the re-render of the parent component--even if it is just setting some states. 
``` js
  const onScroll = (x, y) => {
    setScroll([x, y])
  }
```
The `onScroll` function(object) will be recreated in every re-render, consequently triggering the calling of itself since it's in the dependency list, and going on and on......boom.
![Example error message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr2y7inmn3xuikpsctzh.png)

You can simply remove the callback from the dependency list to fix the problem, but you will get the `react-hooks/exhaustive-deps` warning if you're using the lint.

Another solution is to use `useCallback` to memorize the callback function to prevent it from being recreated.
``` js
  const [scroll, setScroll] = useState([0, 0]
...
  const onScroll = useCallback((x, y) => {
    setScroll([x, y])
  }, [setScroll])
```
According to [official doc](https://reactjs.org/docs/hooks-reference.html#usestate), the state setting function created by `setState` won’t change on re-renders, so it can be used in the dependency list to retain the identity of the callback function.
Visual Studio Code: Grep
Tags: vscode
Published: 2021-10-10 18:27:00

This is a quick post about a feature I discovered by accident in Visual Studio Code that I really like:

I was working in a Linux machine and ran a grep in the integrated terminal to find a particular piece of code. The terminal gave me the results in the usual way, with the file names highlighted, the line in the code, and a bit of the code around what I searched for. Then I happened to scroll over the file name in the results and it showed me a tooltip offering that I could open the file by holding Ctrl and clicking on the path.

So I tried it, and it worked as advertised. This is one of those tiny things that will really add up. I use grep a lot. Most of the time when I do I want to open one or more of the files found. Without this little feature, that means copying the path to the file into a new command. That's a small amount of time, but it does add up.
Terminal Animation for your website using Typed.js
Tags: javascript, html, webdev, css
Published: 2021-10-10 18:21:13

![Web Development](https://cdni.iconscout.com/illustration/premium/thumb/web-development-2081748-1764588.png)

Many times when we come through some interesting thing such as animations or Transitions we are eager to know how to implement it in real practice.

I came to know many developers are using Terminal Animations for their website why should I help Beginner Web Developers to implement it for their website.

{% codepen https://codepen.io/shahstavan07/pen/ZEJEMYN %}

Besides, you can also add other stuffs in animations like:
- startDelay: 0 - [startDelay time before typing starts in milliseconds]
- shuffle: false - [shuffle the strings]
- loopCount: Infinity - [Amount of loops]
<hr>
For more you can checkout this GitHub Repo:
{% github mattboldt/typed.js %}
<hr>
Hope you guys have gained some Knowledge ✌️
10 Free Cloud Storage
Tags: webdev, beginners, programming
Published: 2021-10-10 18:08:46

With cloud storage, all your data is safely stored in a remote database, so you do not need to store it locally on your computer hard drive or other storage device.
## 1. [Sync](https://www.sync.com/)
![Sync](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46i7er9xhi46984yr5az.PNG)
Most cloud storage providers differ from Sync because they can access, scan and read your files. Sync's end-to-end encrypted storage platform and apps ensure that only you can access your data in the cloud. Sync can’t read your files and no one else can either.
**Storage: 5GB**
## 2. [Blomp](https://www.blomp.com/)
![Blomp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfhi9m9b6bs41k8zwj5a.PNG)
**Storage: 20GB**
Get 20GB of storage for every referral.
Up to 200GB of storage can be added.

## 3. [Degoo](https://degoo.com/)
![Degoo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqeyzhqxrgjcbg785109.PNG)
AI based cloud storage that helps you rediscover your best photos.
**Storage: 100GB**
## 4. [Icedrive](https://icedrive.net/)
![Icedrive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzp1cop856pogny5bqnr.PNG)
You can easily access, manage, and update your cloud storage with Icedrive, a next-generation cloud service.
**Storage: 10GB**
## 5. [Mega](https://mega.io/)
![Mega](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avv90w9b30fg6el1qyiy.PNG)
COVID-19 has forever changed the way we work. Working remotely is now a reality and the need to keep your data secure is more important than ever. At MEGA we give millions of users with peace of mind thanks to our no-compromise user-controlled end-to-end encryption. You can rest easy knowing MEGA is a very strong link in your security chain.
**Storage: 20GB**
## 6. [Media Fire](https://www.mediafire.com/)
![Media Fire](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw5lf8oq8n9bfoqdpwyd.PNG)
File storage made easy – including powerful features you won’t find anywhere else. Whether you’re sharing photos, videos, audio, or docs, MediaFire can simplify your workflow.
**Storage: 10GB**
## 7. [pCloud](https://www.pcloud.com/)
![pCloud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoyodxt7l4l2ksymr0ds.PNG)
No matter how many files and folders you store in the pCloud, all of your data will be at your fingertips. Regardless of how you use your space in the cloud - via web, desktop or mobile - your files are truly easy to manage.
**Storage: 10GB**
## 8.[Internxt](https://internxt.com/)
![Internxt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nq9yhqy016ots5sde552.PNG)
Transfer all your files to Yandex.Disk to access and edit them as easily as files on your hard drive.
**Storage: 10GB**
## 10. [Google Drive](https://www.google.com/drive/) 😁😀
![Google Drive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nngec1ydaeqrr9v38vx.PNG)
This one doesn't need a description 😁.
**Storage: 15GB**

My Blog:- [Beginner Developer Blog](https://beginners-developer.blogspot.com)
Website:- https://ejaazrkhan.github.io/portfolio
React useState
Tags: javascript, beginners, react, reacthooks
Published: 2021-10-10 18:05:35

Hey guys this is my first blog...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnx1f7048a9pik1ujpt1.png)
Suppose we have to render name in react app . We can save that name  in simple variable and render that name .

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb840l0texxq5mbbj17b.png)
But what if we want to change name to Alfred after clicking Change Name button , so let's pass changeName function . In changeName function if we change value of variable name to Alfred that's not going to work.


So here we use useState hook .
for using useState hook first we need to import it from react.
Example-
1.import { useState } from "react";


With help of useState we set two variables like 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/val54vomp5w5bfjfiatd.png)

Here name variable represents Bruce , after that in changeName  function we use setName variable to set name to Alfred.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnanxubx46drkvk062cw.png)
now after click name will change to Alfred. We can pass different type of  data in useState hook.
First thing to do when you become team leader
Tags: career, beginners
Published: 2021-10-10 17:31:31

The most of the team leaders I know were developers. You were a very good developer and management decides to promote you. If you are a good developer than you’ll be a good team leader (maybe :smile:).

When you became team leader you are downgrading to Junior level. Because you should have more vastly skill set.

The very first thing to do is to know that you are not a coder any more! Write down this on sticker and look at it every day until you finally understand this.

Build new measurement system so you can decide how good you are. You should measure yourself by the results of your team.
How your team performs, what climate is in your team, how fast business gets what it wants, how users and your teammates are happy, how quick team grows their skills and much more…

More about this in later posts.
How to Insert Update and Delete Data in MySQL Database | Insert Data Using PHP mysqli
Tags: php, mysql, devops, beginners
Published: 2021-10-10 17:24:25

How to Insert Update and Delete Data in MySQL Database | Insert Data Using PHP mysqli
In this video we show you how to use PHP and MySQL to insert data into a database, update existing records in the database, and delete records from the database. We cover all of these topics using PHP's mysqli extension for connecting to MySQL databases.

In this video, I will also show you how to insert, update and delete data in a MySQL database. And if you're not sure which programming language to use, it doesn't matter because I demonstrate using PHP mysqli!

{% youtube 6abV_ZGlDwc %}
スクラム by ジェフサザーランド一章を読んで
Published: 2021-10-10 16:59:19

## 書籍リンク

https://www.amazon.co.jp/dp/B010COOG9O/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

スクラム　仕事が４倍速くなる“世界標準”のチーム戦術 (早川書房)

https://scrumguides.org/docs/scrumguide/v2017/2017-Scrum-Guide-Japanese.pdf

このリンクで無料でガイドが読める

デイリースクラム

https://www.amazon.co.jp/dp/B08711ZCPY/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

多分この書籍の翻訳。6800 円の書籍だから相当はしょっている？

## U01 スクラムがなぜ必要か。 -- loc 001 ~ 458

2010 年 10 年以上費やしたプロジェクトが頓挫の危機にあった。
FBI は手書きやメインフレームのとても遅いレポートシステムで業務が回っていて
911 の前にアルカイダの関係者を入れてしまったのもこの業務フローが原因だった

ガントチャートという段階毎にスケジュールを書いていくものがあるが、それは机上の理論でうまくいかない。

そこでスクラムというフレームワークが生まれた。
ガントチャートと違って、実態に即している。
実際にどう仕事をしている「と言っている」のではなく
どう仕事をしているかを出す。
新たな問題もすぐに拾って柔軟に取り入れるやり方。

ボールをチームで繋いでいくラグビーの用語。
計画よりも 検査と適応。
早い段階で失敗を検知するのでうまくいくらしい。

## U01 感想考察

FBI が DX できていなくて 911 を防げなかったのは驚いた
DX されていないのが国防に大きく関わるとは！

スクラムはガントチャートの正反対で、最初に作った計画ではなく実際の状況に基づいて変化させていくやり方だと解釈した。
Instalando somente atualizações de segurança no Amazon Linux 2
Tags: aws, amazonlinux, security, centos
Published: 2021-10-10 16:03:18

Sabe aquele servidor solitário ou então que a aplicação só roda em um IaaS? 

É muito provável que as atualizações tenham ficado um pouco de lado (leia-se nunca feito) e chega um momento que será necessário fazer a atualização, nesse momento bate aquele medo de atualizar e quebrar algo, não é?.

O que podemos fazer é atualizar o mínimo necessário (e rezar), normalmente só atualizar o que representa um problema de segurança.

Para nos ajudar podemos utilizar a flag `--security` na execução do `yum`.

Antes de começarmos vamos olhar uma saída padrão de um `yum update`, repare na quantidade de pacotes que serão instalados (10) e atualizados (96)

![Imagem mostrando a quantidade de pacotes a serem instalados e atualizados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia6ijwx6dtwy9ycavypd.png)
Agora vamos seguir com nosso objetivo.

**1 – Garante que o pacote `yum-plugin-security` esteja instalado:**

    # yum -y install yum-plugin-security
    
**2 - Você pode listar todas as atualizações de segurança disponíveis com o seguinte comando:**

    # yum --security check-update

**3 – Agora vamos fazer a instalação somente as atualizações de segurança com o menor update possível**

    # yum --security update-minimal
    
Compare com a primeira imagem, agora serão instalados (7) e atualizados (50).

![Imagem mostrando a quantidade de pacotes a serem instalados e atualizados com a flag security](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6xe46sig1ue5anh8lwb.png)

**Dica extra.**

Precisa fazer isso em vários servidores? Utilize o Ansible, com o parâmetro [security: yes](https://docs.ansible.com/ansible/2.9/modules/yum_module.html#parameter-security), para isso :)

    - name: Upgrade all packages
      yum:
        name: '*'
        state: latest
        security: yes
Flexbox and auto margins
Tags: css, flexbox
Published: 2021-10-10 15:39:20

When I started using flexbox, it seemed like my secret weapon to solve every layout problem. For example, centering elements become much easier. No need to use auto margins, the `justify-content: center` property does the job pretty well. But does it mean that auto margins are useless when we use flexbox?

Let's start with a basic website header containing a logo and two other links (contact and log in).

![Website header example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iplx0vdl25os5cxcfbd.png)

Here's the HTML:

```html
<div class="wrapper">
  <a href="" class="logo">My logo</a>
  <a href="" class="contacts">Contact</a>
  <a href="" class="login">Log in</a>
</div>
```
Now, it's time to discuss styling.

## Where to start?

The first idea is to use the `justify-content: space-between` property and let the logo element grow.

```css
.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}

.logo {
  flex: 1;
}
```

At first glance, this solution looks perfect. But there is a significant drawback. The logo is a flex element that can grow (`flex: 1`) and consumes excess space to push the other links to the right side of the page. But our logo is a link. So it means that the space between the logo and the contact element is now clickable!

##How to fix this issue?

The usual way is to wrap the right-sided links inside a `div` tag. Along with the `justify-content: space-between property`, the header works perfectly.

```html
<div class="wrapper">
  <a href="">My logo</a>
  <div class="wrapper-links">
    <a href="" class="contacts">Contact</a>
    <a href="" class="login">Log in</a>
  </div>
</div>
```
```css
.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}
.wrapper-links {
  display: flex;
  gap: 1rem;
}
```

## What if I don't want to change the structure of the HTML code?

In this case, auto margins are very handy. Auto is a greedy property. It means that it can take all the available space. So, if I use margin-right: auto, it will push the logo as far away as possible from the other links.

```html
<div class="wrapper">
  <a href="" class="logo">My logo</a>
  <a href="" class="contacts">Contact</a>
  <a href="" class="login">Log in</a>
</div>
```
```css
.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}
.logo {
  margin-right: auto;
}
```
I hope you found this trick helpful.
You can find the source code [here](https://codepen.io/nicolaserny/pen/OJmjKav).
Stage 3: Array find from last
Tags: javascript, webdev, node, programming
Published: 2021-10-10 15:32:36

Proposal for the `.findLast()` and `.findLastIndex()` methods on array and typed array.

**Motivation** 
Finding an element in an array is a very common programming pattern.
It can improve performance by avoiding obvious overhead and improve the constant factors in the time complexity. It can be useful in some performance-sensitive scenarios. eg: React render function.

**Core Feature**
Adds  `Array.prototype.findLast`  and  `Array.prototype.findLastIndex`.

This would behave the same as  [Array.prototype.find](https://www.ecma-international.org/ecma-262/11.0/index.html#sec-array.prototype.find)  and  [Array.prototype.findIndex](https://www.ecma-international.org/ecma-262/11.0/index.html#sec-array.prototype.findindex)  but would iterate from the last to the first.

**Code examples**

    const array = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];
    
    array.find(n => n.value % 2 === 1); // { value: 1 }
    array.findIndex(n => n.value % 2 === 1); // 0
    
    // ======== Before the proposal =========== 
    
    // find
    [...array].reverse().find(n => n.value % 2 === 1); // { value: 3 }
    
    // findIndex
    array.length - 1 - [...array].reverse().findIndex(n => n.value % 2 === 1); // 2
    array.length - 1 - [...array].reverse().findIndex(n => n.value === 42); // should be -1, but 4
    
    // ======== In the proposal =========== 
    
    // find
    array.findLast(n => n.value % 2 === 1); // { value: 3 }
    
    // findIndex
    array.findLastIndex(n => n.value % 2 === 1); // 2
    array.findLastIndex(n => n.value === 42); // -1

**Polyfills**
https://github.com/zloirock/core-js#array-find-from-last
JavaScript Terminologies
Tags: javascript, webdev, beginners
Published: 2021-10-10 15:15:20

**ECMA International**
European Computer Manufacturer's Association International is an industry association dedicated to the standardization of information and communication systems. It is working on standardisation of not only ECMAScript but also for many programming languages like C#(C sharp), Dart(used in Flutter), Eiffle, CLI etc

**TC39**
[TC39](https://www.ecma-international.org/memento/tc39.htm) committee is responsible for evolving the ECMAScript programming language and authoring the specification. The committee operates by consensus and has the discretion to alter the specification as it sees fit.
TC39 is responsible do following work
- Maintain and update the standard for the ECMAScript.
- Identify, develop and maintain standards for libraries that extend the capabilities of ECMAScript.
- Develop test suites that may be used to verify correct implementation of these standards.
- Contribute selected standards to ISO/IEC JTC 1.
- Evaluate and consider proposals for complementary or additional technologies.

**ECMAScript**
ECMAScript is a standard scripting language based completely on ECMA specifications. It in not in any way dependent to any environment on which the script is running.

**JavaScript**
JavaScript is ECMAScript with some additional features supported by respective environemnts to make it easier for developers to code and handle environment respective features elegantly. For example ***window*** and ***document*** keywords are not present in ECMA specs but are supported by all browsers. The case similar with ***process*** in Nodejs.

**TC39 Process**
It is a process which is responsible for evolving the ECMA specification from an Idea to a fully specified feature by taking inputs as a proposal from the community.

This process is built in five stages, starting with stage zero. Any proposal for a change in the specification goes through these stages without exception where the committee must approve the progress from one stage to the next one.
Complete process doc can be found here https://tc39.es/process-document/

|Stage| Purpose |  Implementation Type|
| --  | -- | -- |
| 0 | Allow Input to the specification| N/A |
| 1 | Case for Addition, shape of solution, potential challenges| Polyfills |
| 2 | Precisely describe the syntax and semantics using formal spec language | Experimental |
| 3 | Indicate that further refinement will require feedback from implementations and users| Spec compliant |
| 4 | Indicate that the addition is ready for inclusion in the formal ECMAScript standard| Shipping|
iNotesPress - WordPress Note Taking plugin for teams
Tags: wordpress, rollup, preact, javascript
Published: 2021-10-10 14:58:31

---
title: iNotesPress - WordPress Note Taking plugin for teams
published: true
description: A Noteworthy and the most beautiful note taking plugin for WordPress.
tags: wordpress, rollup, preact, javascript
//cover_image: https://github.com/k4m35h/iNotesPress/raw/main/assets/src/banner.png
---

## [iNotesPress](https://github.com/k4m35h/iNotesPress) - WordPress Note Taking plugin for teams
- A Noteworthy and the most beautiful note taking plugin for WordPress.
- Notes for resources like Posts / Pages / Attachments / Woo Products.

![iNotesPress Banner](https://github.com/k4m35h/iNotesPress/raw/main/assets/src/banner.png)

### Possible usecases which you might experience,
- Add notes
- Share what you and your team need to remember.
- Share thoughts and opinions
- Do reviews
- Link references
- List future roadmaps

## Technologies & Tools used
- **WordPress** - Open-source content management system written in PHP. Includes a plugin architecture and a template system.
- **Rollup** - JavaScript bundler which compiles small pieces of code into something larger and more complex, such as a library or application.
- **Preact** -  For building user interfaces and UI components. Fast 3kb React alternative.
- **SASS** - CSS preprocessor. Helps to keep things organised. Enables you to use things like variables, nested rules, inline imports and more.
- **Buble** - The blazing fast, batteries-included ES2015 compiler.
- **Lodash** - JavaScript utility library.
- **redux-zero** - A lightweight state container based on Redux.

## How to Use ?
- Download zip https://github.com/k4m35h/iNotesPress
- Move this source code to the `wp-content\plugins\` folder of WordPress and extract.
- Run `npm install` to install JS dependencies
- Run `npm build` to build JS bundle.
- Go to plugins sections in wordpress and activate the plugin.

If you liked my work, why not give me a star in github 😉

<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="large" data-theme="dark" data-type="HORIZONTAL" data-vanity="kameshsethupathi" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://in.linkedin.com/in/kameshsethupathi?trk=profile-badge">kamesh sethupathi</a></div>