teleren/devto huggingface dataset:
How my first plugin got 1.1k downloads in just 2 months?
Tags: npm, javascript, jquery, webdev
Published: 2020-09-02 09:57:22


It all started when I came across a website, and for the first time saw full-screen scrolling animation effects between different sections of its webpage. After a quick google query, I found out the popular “fullpage” javascript plugin which is used to create these fullscreen scrolling websites, I liked the concept and wanted to make my own (While abandoning my other hobby projects).

So I started writing code in javascript along utilizing the jQuery library because we the software engineers always want to “write less, do more” and moreover jQuery supports for older browsers is super amazing. This is how “[FullView.js](https://seeratawan.goprogs.com/fullView/) ” came into existence (it’s free so you can try it), it’s a simple, light-weighted, and easy to use JavaScript plugin to create cross-browser compatible fullscreen scrolling websites and is used by many developers.

Before [FullView.js](https://seeratawan.goprogs.com/fullView/), I hadn’t written a single javascript plugin. I had created and customized many javascript functionalities for my clients, but for some reason, I kept telling my self that crafting a whole plugin was beyond my capabilities. If you ever felt this way, let me tell you something. Creating a javascript plugin is easier than you think.

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

I honestly didn’t expect any downloads, but there are about 1.1k downloads from the NPM in just 2 months, many developers are utilizing it in their projects. If you are good with javascript or typescript, I strongly urge you to try your hand at creating a plugin. If you do and come up with something useful, don’t forget that you can distribute it freely to others or you can also sell it on marketplaces.
Working on Github Actions - Update 2 (Beta Release)
Tags: actionshackathon, showdev, opensource
Published: 2020-09-02 09:54:58

It's been a while since I started working on express-autodocs, A GitHub action that generates documentation by scanning express APIs.

Today I would like to gladly share the first public version of the action with the DEV community 🎉🎊

{% github pika1998/express-autodocs %}

Here is the working demo:

✅ Tested on [Repository](https://github.com/Pika1998/MERN_shoppinglist/)

*Processing Output*
![Processing output](https://res.cloudinary.com/practicaldev/image/fetch/s--wYGeNzJH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/1rx7p0thhaci93paa5sn.png)

**Outputs**

**docs/readme.md**
![Readme](https://dev-to-uploads.s3.amazonaws.com/i/9yo6xfd7iwwnl38zsy63.png)

**docs/pages/api-items.md**
![api-items route](https://dev-to-uploads.s3.amazonaws.com/i/ndxv7o069zif4i2mq0wh.png)

# 💖 Feel free to try out this action & share your opinions about it :)
CSS — Adding Additional Box Shadows
Tags: css, workaround
Published: 2020-09-17 09:31:48

---
title: CSS — Adding Additional Box Shadows
published: true
date: 2020-09-02 09:54:44 UTC
tags: [css, workaround]
canonical_url: https://www.denizaksimsek.com/2020/css-additional-box-shadow/
---

When you want to add a box shadow to an element, but don’t want to override any it might already have. ([Jump to code](#the-code))

## Less-than-amazing solutions

We could copy the `box-shadow` property from the element in question, paste it and append our additional shadow at the end. Of course, this requires us to know the box-shadow on the target element, which might not always be possible (say, making a reusable `.highlight-glow` class).

[StackOverflow says to put the shadow on an absolutely-positioned pseudo-element](stackoverflow-says). This leaves us with a similar problem to the one we started with — the element in question might already have styles on the `::before` or `::after` that conflicts with ours.

## My solution

Use CSS variables to apply box shadows.

```
.shadowy-figure { --box-shadow: .5em .5em 1em #333; box-shadow: var(--box-shadow);}
```

Later on, you can tack things on at the end of this variable, like so:

```
.highlight { box-shadow: var(--box-shadow), 0 0 .1em #fff inset;}
```

One drawback is that we cannot use this technique in several classes and apply them to one element. We can solve this problem when [`parent-var()`](parent-var) is a thing in CSS — if it already is by the time you read this post, do let me know!
React Wire
Tags: react, typescript, reactwire, webdev
Published: 2020-09-02 09:52:45

---
series: React Wire
---

> connect react components with wire

The `react-wire` lib helps to develop a cleaner app, easy controlled/uncontrolled components, and beyond.

```
yarn add @forminator/react-wire
```

[repo], [npm]

[repo]: https://github.com/forminator/react-wire
[npm]: https://www.npmjs.com/package/@forminator/react-wire
Server Side Rendering Vs Client Side Rendering
Tags: universalapp, serversideredndering, clientsiderendering, angular
Published: 2020-09-02 09:45:27

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

**How Client Side Application works?**

* The user sends a request to a website.
* The browser downloads the HTML and then the JS. Meanwhile, the user sees a loading symbol.
* After the browser fetches the JS, it makes API requests via AJAX to fetch the dynamic content and processes it to render the final content.
* After the server responds, the final content is rendered using DOM processing in the client’s browser.

Since this process involves fetching and processing data on the client-side, the process is called client-side rendering.

####Client Side Rendering ( CSR )

>In client side rendering with modern browsers, websites send very little HTML response to connection requests. This HTML response contains JavaScript codes that make up the content of the page. Unless these JavaScript codes are executed, the website is a blank page. The browser renders these JavaScript files, creates the content, and presents the web page to us.

**Problems in CSR**

* **SEO**
Google crawlers do not understand JavaScript well. The Search Engine Bot is only able to handle apps with loading time around 300–400 ms.If loading takes longer, Google Bot sees a blank page.

* **Long Loading Time**
Nobody likes to wait for the content to appear. Heavy apps are often too slow, frustrating, and less competitive, if not maintained well.
Users with medium-price devices or slow internet connection will definitely have a struggle and more probably will complain about the poor UX.

**How Server Side Application works?**

* The user sends a request to a website.
* The server checks the resource, compiles and prepares the HTML content after traversing through server-side scripts lying within the page.
* This compiled HTML is sent to the client’s browser for further rendering and display.
* The browser downloads the HTML and makes the site visible to the end-user.
* The browser then downloads the Javascript (JS) and as it executes the JS, it makes the page interactive.

####Server Side Rendering ( SSR )

In Server Side Rendering, all the burden of getting the dynamic content, converting it to HTML as a readable HTML response, and sending it to the browser is on the server. Hence, this process is called server-side rendering (SSR).

####Benefits is SSR

* Search Engine Optimization
* Social Media Optimization
* Performance: Server side rendered pages will load faster if the 
  user network bandwidth low
* User Experience

####Conclusion

If you have suggestions please let me know in the comments section🙋‍♂️
Thank You!🖤
Please find the GitHub Repository for Java script Framework

[For Angular Universal Server Side Rendering](https://github.com/singhcool/angular-ssr)
[For React Universal Server Side Rendering](https://github.com/jaredpalmer/razzle)
How do I cross compile between macOS and Windows, and between 32 and 64-bit?
Tags: help, docker, desktop
Published: 2020-09-02 09:38:23

If cross compiling to Linux (whether 32-bit, or 64-bit), it is as easy as running Docker. Not sure about macOS running docker with WINE.

Cross platform compiler seems to be rare; but there are multiple ones in Golang (which supports compiling `cgo`), as well as [one in Node.js](https://github.com/vercel/pkg) (which **doesn't** support compiling `node-gyp`).

But what about others, like Python, Rust or Crystal?

BTW, is it worth supporting 32-bit in the first place?

{% post https://dev.to/patarapolw/should-my-desktop-app-support-32-bit-4nk9 %}
Still Working - Slow and Focused
Tags: devjournal, react, womenintech
Published: 2020-09-02 09:36:06

_This post was originally published on September 2, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

I recently [wrote a post] (https://dev.to/alexlsalt/working-slower-to-get-there-faster-3h3k) about working slower to achieve whatever goal you have faster, and I'm really following that advice today.

I had a bit of a late-start this morning - which is totally fine - and instead of being stressed out about not being able to get around to everything I intended to at the hour I'd planned to, I'm going with the flow.

I'm getting to it when I get to it, and I'm focusing 100% on it. I'm not going to reach a point where I feel frazzled, and if I do end up starting to feel pulled in different directions, I know to bring my focus back to the one task at hand that I'm currently working on.

After all, working slower and infinitely more focused *will* get us to where we want to be more quickly than working fast and frazzled and not giving adequate focus and attention to the task(s) at hand.

### PODCAST NEWS

Today is Podcast Production Wednesday for The Ladies Code Collective Podcast! And the episode to be launched will go more in-depth to this idea of working slower to achieve our coding goals faster. 

[Be sure to give it a listen! >>] (https://www.ladiescodecollective.com/podcast)

### REACT LEARNING

Other than podcast stuff, this week has been and will mostly be about making steady progress in my React learning (currently making my way through Dave Ceddia's ebook, Pure React).

I spent yesterday building out mock-ups of different UIs like Pinterest, Hacker News, and Internet Radio using React components and practicing passing different data points to each component. Before, I think I would've skipped out on the exercises to move on to the next chapter/lesson, but that's precisely where the practice gets implemented!

I started in a bit on going deeper into state management with React yesterday, and I'll continue on with that tomorrow and Friday.

### CURRENT BINGE

In other news, I started watching Dark on Netflix last night, and it's safe to say I'm hooked (React pun intended).


----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
Should my desktop app support 32 bit?
Tags: discuss, help, desktop
Published: 2020-09-02 09:33:04

There are some odd targets,

- macOS / darwin 32-bit
- Older macOS versions
- Windows XP, Windows Vista

But for Linux 32-bit and Windows 32-bit, I think many people still use these.

For some reasons, in [awesome-go](https://github.com/avelino/awesome-go), some desktop framework, e.g. Muon / Ultralight support only 64-bit variants on all platforms.

I want to use an embedded REST API database? EliasDB also support only 64-bit...

So, why?
Changelog generator
Tags: actionshackathon
Published: 2020-09-02 09:29:49


### My Workflow
This workflow will install a changelog generator package into your repository


### Submission Category: 
Wacky Wildcards


### Yaml File or Link to Code

yaml file
```yaml
name: Changelog generator
on: 
   workflow_dispatch:
    home:
      description: 'location'
      required: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: Install changelog generator package
        run: |
          npm install
          npm install generate-changelog -D
```

link to code
https://github.com/chrissiemhrk/changelog-generator
JS array's unique
Tags: javascript, unique, duplicate
Published: 2020-09-02 09:21:55

How to remove duplication item from JS array?
Here is 18 methods.
https://github.com/microwind/algorithms/tree/master/unique

// the multi method for array unique
// JavaScript数组去重的N种方法
(function () {
  // 1. new array
  console.time('time')
  var arr = ['a', 'a', 1, 1, 2, 2, 'b', 'b', 2, 1]
  var newArr = []
  for (var i = 0, l = arr.length; i < l; i++) {
    for (var j = 0; j <= i; j++) {
      if (arr[i] === arr[j]) {
        if (i === j) {
          newArr.push(arr[i])
        }
        break
      }
    }
  }
  console.log('new array result:', newArr)
  console.timeEnd('time')
})();

(function () {
  // 1.1 new array + indexOf
  console.time('time')
  var arr = ['a', 'a', 1, 1, 2, 2, 'b', 'b', 2, 1]
  var newArr = []
  for (var i = 0, l = arr.length; i < l; i++) {
    if (newArr.indexOf(arr[i]) < 0) {
      newArr.push(arr[i])
    }
  }
  console.log('new array + indexOf:', newArr)
  console.timeEnd('time')
})();

(function () {
  // 1.2 new array + includes
  console.time('time')
  var arr = ['a', 'a', 1, 1, 2, 2, 'b', 'b', 2, 1]
  var newArr = []
  for (var i = 0, l = arr.length; i < l; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i])
    }
  }
  console.log('new array + includes:', newArr)
  console.timeEnd('time')
})();

more see: https://github.com/microwind/algorithms/tree/master/unique
Create a Jekyll website
Tags: actionshackathon
Published: 2020-09-02 09:04:48


### My Workflow
This workflow is to install a Jekyll website directly into a repository.

### Submission Category: 

DIY Deployments


### Yaml File or Link to Code

Yaml file
```yaml
name: Create jekyll website
on:
  workflow_dispatch:
    home:
      description: 'location'
      required: false
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-ruby@v1
        with:
            ruby-version: '2.6'
      - name: Create a jekyll website
        run: |
          gem install jekyll bundler
          jekyll new jekyll-website
                   
```
link to code
https://github.com/chrissiemhrk/create-jekyll-website

### Additional info

I got this idea after seeing this entry https://dev.to/dancanetti/create-an-eleventy-site-366a
How to Fill Data Automatically in the Worksheet Cells in Excel 365?
Tags: excelpreface, filldataautomaticall
Published: 2020-09-02 10:56:34

---
title: How to Fill Data Automatically in the Worksheet Cells in Excel 365?
published: true
date: 2020-09-02 09:03:21 UTC
tags: ExcelPreface,FillDataAutomaticall
canonical_url: https://geekexcel.com/how-to-fill-data-automatically-in-the-worksheet-cells-in-excel-365/
---

## Fill Data Automatically in the Worksheet Cells:

In this article, you will learn how to **Fill Data Automatically in the Worksheet Cells in Excel Office 365**. Get an official version of **MS Excel** from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

## Fill Data in the Cells:

- You have to select one or more cells for filling additional cells.
- For example, type 1, 2, 3,… Type 1 in the first cell and 2 in the second cell.
- Now, you have to click the **CTRL key** and **drag** the fill handle. It will fill the series automatically.
- Refer to the below example.

![Drag to Fill cells](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/Drag-to-Fill-cells.gif)<figcaption id="caption-attachment-13162">Drag to Fill cells</figcaption>

- You can also **click Auto Fill Options**![](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/EXCEL_R2JKw4R8qp.png) and then select any option as you wish.

![Auto Fill Options](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/Example-1.png)<figcaption id="caption-attachment-13163">Auto Fill Options</figcaption>

## Bottom-Line:

In this short article, you can understand the how-to **Fill Data Automatically in the Worksheet Cells in Excel Office 365**. Share your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!!
Rails 6, Stimulus and Select2
Tags: ruby, rails
Published: 2020-09-02 09:01:24

This is just a quicky, to help out anyone using [Rails 6](https://rubyonrails.org), or any [Stimulus-enabled](https://stimulusjs.org) Rails project and [Select2](https://select2.org), the amazing jQuery plugin for better select boxes.

##### add select2 & select2-bootstrap-theme package in web-pack

```
yarn add select2
yarn add select2-bootstrap-theme
```

##### Simple Select2 + Stimulus Controller
**select2_controller.js**

```
import { Controller } from "stimulus"
import $ from 'jquery';

require("select2/dist/css/select2")
require("select2-bootstrap-theme/dist/select2-bootstrap")

import Select2 from "select2"

export default class extends Controller {
  connect() {
    $('.content-search').select2();
  }
}
```

##### Replace f.select dropdown according to select2 specifications

```
<div class="form-group" data-controller='select2'>
  <%= f.select :user_id, User.all.map { |user| user.name }, {include_blank: false, required: true, include_hidden: false}, class: 'form-control content-search' %>
</div>
```

I hope that helps someone. Thanks :).

I’d love to hear thoughts or comments around this. Feel free to email me at ronakabhattrz@gmail.com or hit me up on Twitter, @ronakabhattrz.
Career change! From pre-sales consultancy to UI development. Any Advice? 
Tags: discuss, career, newbie, ui
Published: 2020-09-02 09:01:00

Hi all,

At the moment I work as a technical pre-sales consultant for an aviation software startup. Which translates to means SQL scripts, report building and software configuration. I have a degree in graphic design and I have been learning front-end web development on and off over the past 3 years. I love the idea of using my creativity to work on web based UIs. 

What should I know about the world of UI development, what skills are an absolute must and how can I put myself in the best position to be hired? 

Happy to give advice if you are looking to move the other way!
Wednesday Links - Edition 2020-09-02
Tags: java, spring, microservices, graalvm
Published: 2020-09-02 08:49:55

SpringOne (2-3 Sep) Schedule 🗓️
https://springone.io/2020/schedule

Collaborative development feature preview in IntelliJ IDEA ( 2 min read ) 👥
https://youtrack.jetbrains.com/issue/IDEABKL-708#focus=Comments-27-4365766.0-0

New LiveRecorder for Java Enables Software Failure Replay ( 7 min read ) 🧨
https://www.infoq.com/news/2020/08/liverecorder-java

State of Spring 2020 ( 6 min read ) 📊
https://tanzu.vmware.com/content/ebooks/state-of-spring-2020

Get started with JDK Flight Recorder in OpenJDK 8u ( 12 min read ) 🛫
https://developers.redhat.com/blog/2020/08/25/get-started-with-jdk-flight-recorder-in-openjdk-8u

Inside Java 15: Fourteen JEPs in five buckets ( 10 min read ) 🗄️
https://blogs.oracle.com/javamagazine/inside-java-15-fourteen-jeps-in-five-buckets

Calling uname from Java using GraalVM ( 3 min read ) 🏆
https://www.praj.in/posts/2020/calling-uname-from-java-using-graalvm/

Seeing Register Allocation Working in Java ( 8 min read ) 🗃️
https://chrisseaton.com/truffleruby/register-allocation/

JDK16 javac xlint Warning about Default Constructors ( 7 min read ) 🌚
https://marxsoftware.blogspot.com/2020/08/jdk16-javac-xlint-warning-default-constructors.html

Null in Yaml files ( 20 sec read ) 〰️
https://twitter.com/juliendubois/status/1300530869766156291
Error in reac native
Tags: reactnative
Published: 2020-09-02 08:39:09

I use Genymotion and android Studio as emulator. but when I command "react-native run-android" it show me this 2 error:
error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
info Installing the app...

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
What are you usually doing when you are not programming?
Tags: webdev, discuss, watercooler, codenewbie
Published: 2020-09-02 08:23:27

When I am not programming I usually play games, watch series/movies/anime or something on YouTube. I also have audio books and podcasts to listen to in my free time as well. Working out and going outside for fresh air is also great when you have been in front of a screen all day. I'm sure a lot of you out there have lots of cool hobbies or families to care for in your downtime.
::after and ::before in CSS
Tags: html, css, react, showdev
Published: 2020-09-02 08:13:35


One month before, I didn't knew about these ::after and ::before pseudo elements so i used to make an extra div if i wanted to include anything before a particular div. For example, if i wanted to underline a div without using border, or overlay a light image with dark background so that my light text is clearly visibile on light image, i usually do that by making another div which does not contain any content in it, just some background color and other styling. So it made my code look ugly, trust me if you want to have that overlay in many images, it would really make your code look poor as it would contain unnecessary markup in html, only for styling.

So what i do in my free time is just find any good website with some great looking animations but still simple and pretty clean, and start making a copy of it. First i try myself and then look for their css in dev tools. It's a really really good practice to learn some extra skills in css and html. I learn a lot of great css properties. It increases your knowledge, like i recently was making a website https://realestate01.vercel.app by copying it from https://adigedesign.com and then i see they have used `font-smoothing: antialiased;` which i then searched on google, so i found out it was used earlier to smoothen the text and make it sharp on a webpage but now it's a not a web standard and mdn highly recommend to **NOT** use it in production at all. So these are the things that you can also learn while trying to make a copy of website in your free time.

In this website i have also used ::after in some images so that the text is clearly visible over image. Let's say you have a div which contains an image and a text over that image. It will look like this 

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

However if i use ::after on the div to make a slightly dark background, it will look like this

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

Did you notice the slightly dark background of the second image? And i haven't even touched the html, it's just pure css. 

#Wanna see the code?

```
div {
    position: relative;
}
div::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-image: linear- 
    gradient(transparent, rgba(0,0,0,0.6));
}
```

Let me explain it to you. The div that contains image is the div in the css code above. Relative position is required so that the child of this div even pseudo child, will be positioned according to this div. 
content is an empty string because we don't want to put any text after the div. Anyways it's a lot better and efficient than using an empty div in the html. Agreed?? The ::after is given position absolute because we want it to overlap. Height is 40% because we don't want to overlap it completely. Height 40% should start from the bottom that's why bottom is 0. Background image, you can use anything but i am using linear gradient.

I hope now power of ::after and ::before is clear to you.