teleren/devto huggingface dataset:
Today I learned about Scroll Animation
Tags: webdev, html, css, javascript
Published: 2021-06-16 08:28:59

Here's my HTML code.
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./style.css">
    <title>Scroll Animation</title>
</head>
<body>
    <h1>Scroll to see the animation</h1>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>

    <script src="script.js"></script>
</body>
</html>
```
Here's My Css Code
```Css
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
 

*{
    box-sizing: border-box;
}

body {
    background-color: #efedd6;
    font-family:'Ubuntu', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
}
h1 {
    margin: 10px;
}

.box {
    background-color: steelblue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 200px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
    transform: translateX(200%);
    transition: transform 0.4s ease;
}

.box:nth-of-type(even) {
    transform: translateX(-200%);  
}
.box.show {
    transform: translateX(0);
}

.box h2 {
    font-size: 45px;
} 
```
Here's JavaScript

```JavaScript
const boxes = document.querySelectorAll('.box')

window.addEventListener('scroll', checkBoxes)

checkBoxes()

function checkBoxes() {
   const triggerBottom = window.innerHeight / 5 * 4 

   boxes.forEach(box => { 
       const boxTop = box.getBoundingClientRect().top

       if(boxTop < triggerBottom) {
           box.classList.add('show')
       } else {
           box.classList.remove('show')
       }
   })
}
```
And Check this Post

{%codepen https://codepen.io/ahtshamajus4772/pen/qBrgEWq %}

Here's the output
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaprp6lte21c9qcrqeqn.JPG)
Owiin : Free & Open Source CMMS
Published: 2021-06-16 08:18:36

Owiin is a CMMS program project (Computerized Maintenance Management System) derived from specific and extensive experience in the field, following the rules and best practice.

Owiin is at the same time a ready-to-use standard product, and a solution that can be custom-configured through provided mechanisms that allow to work on every system element (data models, workflows, reports, dashboards, connectors, etc.).

Owiin is based on the iDempiere Business Suite from which it inherits the basic functionalities and the configuration mechanisms.

Please visit the project front page containing links for most of our resources: https://www.owiin.com/
Generate PDF with gem wicked_pdf
Tags: ruby, rails, pdf
Published: 2021-06-16 07:55:41

---
title: Generate PDF with gem wicked_pdf
published: true
tags: ruby, rails, pdf
canonical_url: https://blog.corsego.com/gem-wicked-pdf
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40tjwurtspvfeyqx74ml.png
---

Mission: Turn any rails view into PDF.

### BEFORE
![superails.com no pdf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxzwwp4atb16kc3iwf3s.png)

### AFTER
![superails.com turned to pdf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6p2vv9547r4jfva378b.png)
 
## Video tutorial:
[![Ruby on Rails #17 generate, save, send PDFs with gem wicked_pdf](https://i3.ytimg.com/vi/tFvtwEmW-GE/hqdefault.jpg)](https://youtu.be/tFvtwEmW-GE)

## [Source Code](https://github.com/corsego/17-wicked_pdf)

## Text walkthrough:

Assuming you have a table `posts`.

Gemfile

```
gem 'wicked_pdf'
gem "wkhtmltopdf-binary", group: :development
gem "wkhtmltopdf-heroku", group: :production

```

config/initializers/wicked_pdf.rb

```
# WickedPDF Global Configuration
#
# Use this to set up shared configuration options for your entire application.
# Any of the configuration options shown here can also be applied to single
# models by passing arguments to the `render :pdf` call.
#
# To learn more, check out the README:
#
# https://github.com/mileszs/wicked_pdf/blob/master/README.md

WickedPdf.config ||= {}
WickedPdf.config.merge!({
  layout: "pdf.html.erb",
  orientation: "Landscape",
  lowquality: true,
  zoom: 1,
  dpi: 75
}) 

```

app/views/layouts/pdf.html.erb

```
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta charset="utf-8"/>
    <%= wicked_pdf_stylesheet_link_tag "pdf" %>
  </head>
  <body onload="number_pages">
    <div id="header">
      <!--= wicked_pdf_image_tag 'thumbnail.png', height: "30", width: "auto"
      -->
    </div>
    <div id="content">
      <%= yield %>
    </div>
  </body>
</html>

```

app/controllers/posts\_controller.rb

```
  def index
    @posts = Post.all.order(created_at: :desc)
    respond_to do |format|
      format.html
      format.pdf do
        render pdf: "Posts",
               page_size: "A4",
               template: "posts/post.pdf.erb"
      end
    end
  end

```

app/views/posts/index.html.erb

```
     <%= link_to "PDF", posts_path(format: :pdf), class: 'btn btn-primary' %>

```

app/views/posts/post.pdf.erb

```
Date of extract: 
<%= Date.today %>
<br>

Posts count:
<%= @posts.count %>
<br>

<table style="width:100%">
  <thead>
    <tr>
      <th>id
      <th>title</th>
      <th>content</th>
    </tr>
  </thead>
  <tbody>
    <% @posts.each do |post| %>
      <%= content_tag :tr, id: dom_id(post), class: dom_class(post) do %>
        <td><%= post.id %></td>
        <td><%= post.title %></td>
        <td><%= post.content %></td>
      <% end %>
    <% end %>
  </tbody>
</table> 

```

app/assets/stylesheets/pdf.scss

```
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
} 

```

That’s it!
Going Rogue
Tags: docker, linux
Published: 2021-06-16 07:50:50

Once upon a time I was at University doing a maths and computer science degree (and presumably provided subject matter for the [BOFH](https://en.wikipedia.org/wiki/Bastard_Operator_From_Hell) but that's a different story). The University had a shiny [DEC VAX 11/780](https://en.wikipedia.org/wiki/VAX) running VMS. The computer lab was an underground bunker with a bunch of physical terminals. Second year students were allowed a key to access it after hours. Yes a physical key. What did comp-sci students do after hours back in 1984? We played [Rogue](https://en.wikipedia.org/wiki/Rogue_(video_game)) on a VAX 11/780. 

> While Rogue was not the first dungeon-crawling game with procedural generation features, it introduced the subgenre of roguelike RPG procedurally generated dungeon crawlers with Dungeons-and-Dragons-like items (armor, weapons, potions, and magic scrolls) that also had permadeath (permanent death) and an overhead graphical view — albeit via ASCII drawings, as opposed to text descriptions in natural language such as can be seen in Adventure/Colossal Cave and the original Zork games.

A couple of years ago I was feeling a little nostalgic so I googled to see whether Rogue was still available. I started out looking for a Mac port but the only ones I could find were pre-osx. I did however find a [linux port download](https://coredumpcentral.org/files/linrog37.zip) at [Rogue Central](https://coredumpcentral.org/download.html). Having downloaded the source to my mac I was then faced with the question of how to run it. Docker to the rescue. Fast forward and while I really like Docker, the most recent Docker Desktop for Mac update hosed all my containers and images. So here is the trivial process to at least get my Rogue container back.

I subsequently discovered the Docker `gcc` image now throws an error when compiling the original source (and a bunch of warnings). Not to worry, I loaded the source into [github](https://github.com/daveclarke/linuxrogue), removed the offending line of code, and added a script, `docker_run` to create and run the container.

The first step is to clone or download the source.

```
$ mkdir -p ~/Projects/linuxrogue-0.3.7-roguecentral
$ cd !$
$ git clone https://github.com/daveclarke/linuxrogue.git .
```

If you're already running Linux or have a Linux distro running under WSL you can just run `make` and generate a working executable. Otherwise this needs to be run in a Linux container using the appropriately named image `gcc`. Either run the `docker_run` script or type the following in to the shell:

```
$ docker run \
  --name gcc \
  -v ~/Projects/linuxrogue-0.3.7-roguecentral:/src \
  -it \
  gcc /bin/bash 
```

The script creates a new container called `gcc` and drops you into a bash shell in the container. Building the source is easy:

```
# cd /src/linuxrogue-0.3.7
# make
# ./rogue
```
For subsequent access if the `gcc` container is already running, access the container via:

```
$ docker exec -it gcc /bin/bash
# cd /src/linuxrogue-0.3.7
# ./rogue
```

Press the ? key for a synopsis of the commands. Game on like it's 1984!
[Webinar] How to build Clubhouse like app?
Tags: reactnative, webrtc, javascript, php
Published: 2021-06-16 07:19:35

If you are an #engineering enthusiast, this webinar is for you! 

100ms's webinar brings you unconventional wisdom from engineering leaders of top global organizations around the globe.

In our first webinar, Kshitij Gupta (CEO at 100ms, Ex-Facebook, Ex-Hotstar) Sarvesh Dwivedi (VP Engineering at 100ms, Ex-Hotstar) and Sagar Gaonkar (Senior EM at 100ms, Ex-Hotstar) to understand the challenges that engineering teams across domains face while building audio/video conferencing.

In this webinar, we walk you through the inner workings of #clubhouseapp and how it is different from a live broadcast system like #facebooklive

Link -> https://marketing.100ms.live/build-video-conferencing-system-from-scratch-0
XML SITEMAP GENERATOR ONLINE
Tags: webdev, seo, seotools, sitemap
Published: 2021-06-16 07:19:21

## What is a Sitemap Generator?
XML Sitemap Generator is a Free SEO Tool used to generate XML Sitemap file instantly for your website. After Creating Sitemap, download and submit to Google Search Console (Google Webmaster tool).
## What is Sitemap?
A sitemap is an XML file that lists the URLs of a site in a systematic order. It gives additional information about each URL to the webmasters, such as its last updates, its modification frequencies, and its importance in comparison to other URLs.

The process of creating a sitemap is simple and straightforward. If you only have a few pages on your website (less than 100), you can easily create a map in an HTML document. On the other hand, if your site is large and has many pages, it's easy to map it using XML website sitemap builders, HTML sitemaps, and simple WP sitemaps. Easily create free HTML, RSS and Google XML sitemaps Compatible with Google, Bing, Baidu, Yandex and other major search engines. XML sitemaps allow you to quickly and easily notify all pages of your website and search engines of any changes. This ensures that they are listed quickly and accurately, especially with newer websites that do not have natural search capabilities. Use our free tools to easily create XML sitemaps to notify all your web pages and search engines about their changes, and make sure all of your pages are listed correctly.

You can generate XML Sitemap easily with this tool - 

**[https://www.sarojmeher.com/seotools/xml-sitemap-generator/](https://www.sarojmeher.com/seotools/xml-sitemap-generator/)**
Unity 3D Tutorial: Create Component and Hello World Program
Tags: unity3d, gamedev, deeplearning, algorithms
Published: 2021-06-16 07:19:02

INTRODUCTION:
In this <a href="https://www.geeksread.com/unity-3d-tutorial-create-component-and-hello-world-program/">unity 3D tutorial</a>, we will learn the User interface of unity 3D. we will also see that how we can show text when the game runs and how we can access different components in unity.
Productive Tuesday
Tags: blog, journaling
Published: 2021-06-16 07:15:38

After working on a feature for 2~ months, it feels so good to tackle minor issues, those low-hanging fruits 🍊🍉🍇🍐

In one hand, I enjoy diving deep into a topic, like the `TargetFramework` property experience I recently worked at. It was a big PR that involved coordinating with other teams, designing the user experience with our PM, and break through interesting concepts on the .NET project system (i.e. [Dataflow](https://docs.microsoft.com/en-us/dotnet/standard/parallel-programming/dataflow-task-parallel-library), still blows my mind but now I know more about that mythical creature that creates and transforms blocks of data to be later used). All of these learnings took a while to fully grasp them and apply them.

In the other hand, fixing bug or completing small issues gives me that satisfaction in a shorter period of time. Still could involve stuff that I don't know, but I can either infer from knowledge I already have or it's something I can easily learn.

So, today was quite fruity.

Which made me wonder: where did that expression come from? "Low-hanging fruit".

That's something I just recently learnt when I started working in the US (my first language is Spanish), and didn't give it a thought when I heard it in different work conversations.

According to the Oxford dictionary, it refers to something (*or someone*) that can be won, obtained or persuaded easily without much effort. It originated around the 17th century, but it had it's first appearance in print in 1968 in the Guardian newspaper.

A couple of Bing entries further down, and I found that it could be considered a racial micro-aggression. According to one of those entries, professor Mae Hicks-Jones, explains that "for African-Americans, if you say 'low-hanging fruit', we think lynching".

I also found that some of the examples on how to use that expression were... just bad: "women are like low-hanging fruit for you, dude" (who wrote [this](https://www.powerthesaurus.org/low-hanging_fruit)??).

I have made a mental note to erase that expression from my head, and to share this learning whenever I notice someone using it (unintentionally and unconsciously, most probably).

I'll wrap up and re-phrase that today was a quite productive day, I tackled easy items from my big to-do list.
Improving Skip Navigation on DEV
Tags: devbugsmash, a11y
Published: 2021-06-16 07:15:38

As a career changer, DEV has played a big part in my development as a Software Engineer. The DEV Community Bug Smash seemed like the perfect opportunity to give something back to the community that helped me so much over the past two years.

* [My Open Source Background](#background)
* [About The Bug](#bug)
* [How I Smashed It](#smash)
* [Lessons Learned](#lessons)

### <a name="background">My Open Source Background</a>

My open source journey started with Hacktoberfest 2020 and with some small contributions to [RubyForGood](https://github.com/rubyforgood) and [upyoura11y](https://github.com/aitchiss/up_your_a11y). I wrote about that [here](https://dev.to/metamoni/how-to-start-contributing-to-open-source-as-a-junior-1c9l). I found it very rewarding, and since then I've been trying to stay active and keep up the open source work.

But, to be honest, digging around in a large codebase like DEV's sounded pretty intimidating. So I took my time. I read through the open issues, looking for something that would speak to me. And then I found it.

### <a name="bug">About The Bug</a>

{% github https://github.com/forem/forem/issues/13505 %}

Navigation can be tricky in an SPA. The DEV team have done well to implement skip links across the website, but there was some work left to do: making sure that they display when the user navigates to a new link using a keyboard. @s_aitchison did an excellent job of describing the problem and the expected result in the [GitHub issue](https://github.com/forem/forem/issues/13505), so all I had to do was follow her helpful instructions.

### <a name="smash">How I Smashed It</a>
The team had already started a conversation around the issue and I wanted to make sure I fully understood the problem before I committed to smashing this bug. First I got the app running locally, then I took some time to explore it with a screen reader and reproduce the bug.

Once I understood what the expected behaviour should be and why, adding the code was easy. It took a few iterations, but the reviewers were very supportive, gave me lots of useful pointers, and helped me get around the mysterious behaviours of Safari. You can view the pull request below.

{% github https://github.com/forem/forem/pull/13828 %}

### <a name="lessons">Lessons Learned</a>

Apart from the warm, fuzzy feeling that you've done something nice, the most valuable thing you'll get from open source contributions are the lessons you'll learn. Here's what smashing this bug taught me:
* how to [use CSS](https://github.com/forem/forem/pull/13828/files) to adapt behaviour for both keyboard and mouse users
* on a Mac, Safari and Firefox need tweaking to [enable keyboard navigation properly](https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox)
* don't be afraid to work on new projects - poking around in a large codebase can be fun!
How to merge JS objects with common keys
Tags: javascript, webdev
Published: 2021-06-16 06:53:07

While working on a project, I came across a situation where I had to merge 2 objects with common keys. In this post, I'll show you a simple solution to merge the objects.

### Problem statement:

We have 2 objects(`originalObject` and `objectToMerge`) and each object has a few keys which are common in both the objects. If the key is common, we want to add the values from both the objects and store the updated value in `originalObject`. If it isn't, then we want to add the new key to the `originalObject`.
Here's an example:

```
let originalObject = {
  key1:1,
  key2:2,
  key3:3,
  key4:4
}

let objectToMerge = {
  key2:5,
  key6:6,
  key3:-7
}

// Output after merging

originalObject = {
 key1: 1,
 key2: 7, // 2+5 = 7
 key3:-4, // 3+(-7) = -4
 key4: 4,
 key6: 6
}

```

### Solution:

```
let originalObject = {
  key1:1,
  key2:2,
  key3:3,
  key4:4
}

let objectToMerge = {
  key2:5,
  key6:6,
  key3:-7
}

let keys = Object.keys(objectToMerge)

keys.forEach((key) => {
if(originalObject.hasOwnProperty(key)) {
   originalObject[key] += objectToMerge[key]
}
else {
  originalObject[key] = objectToMerge[key]
}
})

console.log(originalObject)
```
**Code explanation**
I used the `keys` method on `originalObject` object to extract all the keys name. 
Next we will loop through these keys and check if each key is present in the `objectToMerge` object. 

If the key is present in both the objects, then we will add the values of the two and store it in `originalObject`. If not, we will create a new key in the `originalObject` object. And that's it!!

Feel free to play around with the code present [here](https://codesandbox.io/s/confident-hooks-xkwgc).

A lot of libraries have this logic inbuilt as an utility function but I wanted a simple Vanilla JS solution hence this approach. I have found one such solution in Lodash. You can find it [here](https://lodash.com/docs/4.17.15#mergeWith).

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

Let me know if you solved this any other way. Would love to hear more ways to solve this problem. 

Until next post. ta-da!
Top 5 Reasons To Choose Node.js For Server-Side Programming
Tags: node, webapps, software
Published: 2021-06-16 06:42:20

Node.js is one of the Javascript technologies that made Javascript so trendy. But why? This is because it builds high-performing, real-time web apps easily. It can be used for client side programming and server side programming. If you wonder what’s the superpower of this technology for server side programming, or maybe you don’t know what Node.js actually is, then this blog is for you. Here we’ll see the reasons of why you should choose Node.js for server side programming. But before digging to it, let us see the overview of Node.js.

#What Is Node.js?
Node.js is an application runtime environment that allows you to write server-side apps built on Chrome’s V8 Javascript engine. It uses event-driven, non-blocking I/O model that make sit lightweight and efficient. And it’s ability to use Javascript on both frontend and backend adds one more benefit for development. Node.js package ecosystem, npm is the largest ecosystem of open-source libraries. Lots of big companies have adopted Node.js in the production environment. 

Know the amazing tips and tricks to make node.js app faster at- Tips And Tricks To Make Your Node.js Web App Faster

#Top 5 Reasons To Choose Node.js For Server-Side Programming–
**1. Javascript-**
Javascript is a programming language that web apps are using on the client side. Using same language on server-side meaning that developer can apply his Javascript knowledge both on client side and server side and use the same functions as needed.

**2. Event Driven Architecture-**
It includes a style that allows components to communicate through asynchronous messages. Systems based on event-based styles are generally organized as a loosely coupled federation of components that trigger behavior in other components through events. There are lots of  event styles, for example- Point to point, Publish-Subscribe.  Aspect.style addressed crosscutting concerns. Aspect.style is a module style, event-based style – runtime style, so it’s important not to mix them up.

**3. Asynchronous Events-**
Node.js uses an asynchronous architecture that javascript can handle properly. Meaning that the server reacts to event and sends events(messages) to the database. This programming style is different to synchronous style and might be difficult to use with other languages. Node.js uses asynchronous style with asynchronous IOS and can aslo scale.

**4. NPM Package Manager-**
Know more at- [https://solaceinfotech.com/blog/top-5-reasons-to-choose-node-js-for-server-side-programming/]