teleren/devto huggingface dataset:
Code Refactoring and Rebase
Tags: opensource, osd600
Published: 2021-10-14 20:08:26

As new features are added to [the tool](https://github.com/minhhang107/mh-ssg), I realized that the logic is not clear anymore and some parts were duplicated, making it inefficient and hard to maintain. This time, I decided to focus on removing those duplications by moving the statements to the appropriate place and extracting function for reusability. All the refactoring was done through a single [commit](https://github.com/minhhang107/mh-ssg/commit/2e0b2e9920d5fbc6ad498d16619efff7ed1c194c) with the help of `git rebase`.

## Improvements
Firstly, I could see that I was validating the `input`, `output` and `stylesheet` options several times in different modules. I reread the code and found that some of them were unnecessary and I could easily remove them while modifying the arguments passed in function.

Secondly, in the `processFile.js`, a lot of the logic was similar. I decided to extract a function called `getOutputFileName()` which will generate the output file name based on the type of input. Since we have different types of input file extensions (`.txt` and `.md`), if there's no such function, I'll have to repeat the code several times, especially when the tool is scaled up to support other extensions as well.

Another thing I noticed was that the process of convert `.txt` and `.md` have lots of things in common. Therefore, I only kept the different parts inside the `if... else...` block, and put the shared logic outside of the block.

## Problems during refactoring
I had a problem while trying to move all the validations of `input`, `output` and `stylesheet` inside the `processInput.js`. The program crashed since that placement of the validations requires more checks to be done, which means even longer and harder-to-maintain code. I decided to abort that approach and tried to find another position that wouldn't affect the rest of the code. It turned out that putting the validations in `index.js` would not only solve the problem but also make the structure of the file more consistent.

## git rebase
`git rebase` was very helpful in condensing git history. Before knowing about this, there were moments when I wish I didn't commit so early because I was having multiple commits to solve the same issue. Having separate commits for these changes are just not necessary. With `git rebase`, I don't have to worry about accidentally committing before the code is ready since I can always squash the related commits together amend the message with `git comment --amend`.
Java/ Add Borders to Some Text in Word
Published: 2021-10-25 08:11:02

In a Word document, when we want to emphasize some text or paragraphs, in addition to bolding the text or changing their font color, we can also add borders to them. This article will demonstrate how to apply a border around a set of characters and a whole paragraph by using Free Spire.Doc for Java.

**Installation**
**Method 1:** Download the [Free Spire.Doc for Java](https://www.e-iceblue.com/Download/doc-for-java-free.html) and unzip it. Then add the Spire.Doc.jar file to your Java application as dependency.
**Method 2:** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
   <repository>
      <id>com.e-iceblue</id>
      <name>e-iceblue</name>
      <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
   </repository>
</repositories>
<dependencies>
   <dependency>
      <groupId>e-iceblue</groupId>
      <artifactId>spire.doc.free</artifactId>
      <version>3.9.0</version>
   </dependency>
</dependencies>
```

**Add Borders**
```java
import com.spire.doc.Document;
import com.spire.doc.FileFormat;
import com.spire.doc.Section;
import com.spire.doc.documents.BorderStyle;
import com.spire.doc.documents.BreakType;
import com.spire.doc.documents.Paragraph;
import com.spire.doc.fields.TextRange;

import java.awt.*;

public class AddBorders {

    public static void main(String[] args) {

        //Create a Document instance
        Document doc = new Document();

        //Add a section
        Section section = doc.addSection();

        //Add a border to a set of characters
        Paragraph para = section.addParagraph();
        TextRange tr = para.appendText("The Scarlet Letter");
        tr.getCharacterFormat().getBorder().setBorderType(BorderStyle.Single);
        tr.getCharacterFormat().getBorder().setColor(Color.BLUE);
        String text = " is a true masterpiece of American Literature and a must-read for every student of literature. ";
        para.appendText(text);
        para.appendBreak(BreakType.Line_Break);

        //Add a border to a paragraph
        para = section.addParagraph();
        String text2 = "This classic novel from the cannon of American Literature exemplifies the genre of Dark Romanticism. " +
                "In this story, the consequences of Hester Prynne's adulterous affair with the reverend Arthur Dimmesdale are " +
                "borne out as she gives birth to their child and is forced to wear a Scarlet Letter A, embroidered on her bosom, as a sign of her adultery.";

        para.appendText(text2);
        para.getFormat().getBorders().setBorderType(BorderStyle.Single);
        para.getFormat().getBorders().setColor(Color.BLUE);

        //Save the document
        doc.saveToFile("AddBorder.docx", FileFormat.Docx_2013);
    }
}
```
![Add Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvdivlgq1vzrxdc6sc5r.jpeg)
What do you think about our new homepage? All feedback welcome!
Tags: webdev, design, discuss, wordpress
Published: 2021-10-25 07:59:59

Hello, everyone!

Here’s BotMeNot’s updated homepage: https://botmenot.com/ 

Please share any type of feedback you have - what do you like, what do you dislike, any suggestions?

I’m always on the lookout for honest feedback!
Glassmorphism in SwiftUI
Tags: design, ios, swift
Published: 2021-10-25 07:54:40

#Getting Started
SwiftUI is easy to customize, so you can experiment with different UI designs. So in this article, I'll show you how to create a Glassmorphism-style UI.

##Glassmorphism?
To put it simply, it is a frosted glass style UI. This site is for CSS, but I think you can get the general idea if you look at it.

###[CSS-Glassmorphism-Generator](https://hype4.academy/tools/glassmorphism-generator)

![Generater Site Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojo35t2k7yrix4xzfdd5.png)


#Preview
First of all, please take a look at the finished product. I'm not a professional designer! I'm not a professional designer, so there are some things that are not quite right, but this is what I can do with just SwiftUI.

![Preview Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ezu7ykfi77g89mnp83k.png)

#Code
##Semi-transparent background
```swift

import SwiftUI

struct GlassBackGround: View {
    
    let width: CGFloat
    let height: CGFloat
    let color: Color
    
    var body: some View {
        ZStack{
            RadialGradient(colors: [.clear, color],
                           center: .center,
                           startRadius: 1,
                           endRadius: 100)
                .opacity(0.6)
            Rectangle().foregroundColor(color)
        }
        .opacity(0.2)
        .blur(radius: 2)
        .cornerRadius(10)
        .frame(width: width, height: height)
    }
}
```

The `RadialGradient` and `Rectangle` are stacked on top of each other, and the transparency is shifted a bit. I feel like there are smarter solutions, but after a lot of trial and error, this is the closest I could get to the look of the site above.



##Usage
```swift

import SwiftUI

struct GlassView: View {
    
     var body: some View {
            VStack {
                Image(systemName: "person.circle")
                    .font(.largeTitle)
                Text("Glass")
            }.foregroundColor(.white)
                .background(
                    GlassBackground(width: 100, height: 100, color: .black)
                        .shadow(color: .black, radius: 2, x: 2, y: 2)
                )
    }
}

```

If you use a gradient background or a patterned background, you can see how transparent it is. Shadows are not added to the objects displayed on top of the `GlassPlaceHolder`, but this is based on a sample from the above site.

#Summary
This is a much cooler design than the SwiftUI as-is. Depending on the background of your app and the placement of the UI, you may need to change some minor settings, but for the most part, the code above seems to work.

Glassmorphism is a great way to create a three-dimensional screen, and I personally like it a lot. I hope you'll give it a try.

---


If you'd like to know more about this, please visit here ☺️.

Announcements: [Twitter](https://twitter.com/tokiwa16448392)

My app : [RebootFilter🔥](https://apps.apple.com/jp/app/%E7%A6%81%E6%AC%B2%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF-%E7%B6%99%E7%B6%9A%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA/id15899315002)
Architects in Bangalore
Tags: architecture, interior, design, builder
Published: 2021-10-25 07:50:46

DZIGNS architecture and interiors is actively engaged in the creation of contextually appropriate solutions within an increasingly changing world. Set up in Bangalore in 2001, it is a design studio focusing primarily on the fields of Architecture and Interior Design. Over the years the studio has thrived with an energetic team of architects led by Ar. Santhosh Kumar.S (Principal Architect).
Interconnecting Airflow with a NiFi ETL-pipeline
Tags: airflow, nifi, dataengineering
Published: 2021-10-25 07:46:55

I just published my first article on Medium on how to combine Airflow and NiFi to create awesome scheduled ETL-pipelines! Check it out and let me know what you think! #dataengineering #nifi #airflow #apache

https://medium.com/@cribbersix/interconnecting-airflow-with-a-nifi-etl-pipeline-8abea0667b8a
Hacktoberfest - 2021
Tags: hacktoberfest, github, opensource
Published: 2021-10-25 07:03:03

I am very happy to share this was my first open-source contribution. I'm so happy to announce that. If you haven't submitted yet you should it really feels good. :D

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63w7i05a9rrzvl253et5.png)
 
My github Profile - https://github.com/devn913
Design Patterns With Real-Life Typescript Examples: Adapter
Published: 2021-10-25 06:31:33

![](https://miro.medium.com/max/2000/1*y5EtIJi_hOVYqDOCHv3t9Q.jpeg)

The Adapter pattern makes two existing interfaces work together. By applying it to real-life examples, it is straightforward to understand.

{% medium https://medium.com/@mariusbongarts11/design-patterns-with-real-life-typescript-examples-adapter-d183af1f1462 %}

javascript, webdev, tutorial, programming, technology
Interactive Double Pendulum Playground Using SVG
Tags: javascript, webdev, programming, opensource
Published: 2021-10-25 06:08:12

TRY IT: [theabbie.github.io/DoublePendulum](https://theabbie.github.io/DoublePendulum/)

SOURCE: [github.com/theabbie/DoublePendulum](https://github.com/theabbie/DoublePendulum)

A double pendulum is a pendulum with another pendulum attached to its end, is a simple physical system that exhibits rich dynamic behavior with a strong sensitivity to initial conditions.
 
The motion of a double pendulum is governed by a set of coupled ordinary differential equations and is chaotic.

<table class="fraction">
  <tbody>
    <tr>
      <td rowspan="2"><i>θ</i><sub>1</sub>''&nbsp;=&nbsp;</td>
      <td>
        −<i>g</i> (2 <i>m</i><sub>1</sub> + <i>m</i><sub>2</sub>) sin <i>θ</i
        ><sub>1</sub> − <i>m</i><sub>2</sub> <i>g</i> sin(<i>θ</i><sub>1</sub> −
        2 <i>θ</i><sub>2</sub>) − 2 sin(<i>θ</i><sub>1</sub> − <i>θ</i
        ><sub>2</sub>) <i>m</i><sub>2</sub> (<i>θ</i><sub>2</sub>'<sup>2</sup>
        <i>L</i><sub>2</sub> + <i>θ</i><sub>1</sub>'<sup>2</sup> <i>L</i
        ><sub>1</sub> cos(<i>θ</i><sub>1</sub> − <i>θ</i><sub>2</sub>))
      </td>
    </tr>
    <tr>
      <td class="upper_line">
        <i>L</i><sub>1</sub> (2 <i>m</i><sub>1</sub> + <i>m</i><sub>2</sub> −
        <i>m</i><sub>2</sub> cos(2 <i>θ</i><sub>1</sub> − 2 <i>θ</i
        ><sub>2</sub>))
      </td>
    </tr>
  </tbody>
</table>

<table class="fraction">
  <tbody>
    <tr>
      <td rowspan="2"><i>θ</i><sub>2</sub>''&nbsp;=&nbsp;</td>
      <td>
        2 sin(<i>θ</i><sub>1</sub> − <i>θ</i><sub>2</sub>) (<i>θ</i
        ><sub>1</sub>'<sup>2</sup> <i>L</i><sub>1</sub> (<i>m</i><sub>1</sub> +
        <i>m</i><sub>2</sub>) + <i>g</i>(<i>m</i><sub>1</sub> + <i>m</i
        ><sub>2</sub>) cos <i>θ</i><sub>1</sub> + <i>θ</i><sub>2</sub>'<sup
          >2</sup
        >
        <i>L</i><sub>2</sub> <i>m</i><sub>2</sub> cos(<i>θ</i><sub>1</sub> −
        <i>θ</i><sub>2</sub>))
      </td>
    </tr>
    <tr>
      <td class="upper_line">
        <i>L</i><sub>2</sub> (2 <i>m</i><sub>1</sub> + <i>m</i><sub>2</sub> −
        <i>m</i><sub>2</sub> cos(2 <i>θ</i><sub>1</sub> − 2 <i>θ</i
        ><sub>2</sub>))
      </td>
    </tr>
  </tbody>
</table>

## How To Use?

![Double Penndulum Tutorial](https://user-images.githubusercontent.com/17960677/138050127-86bf25fb-267f-4f6a-ba97-b26eef8eaed4.gif)
Slot Tags
Tags: javascript, webdev, programming
Published: 2021-10-25 05:59:08

# Slot Tags
A Slot tag in HTML essentially allows a placeholder to be able to include your own markups/code. When the code is run, it shows all the pieces together. This effectively is a way to separate different parts of the code, but still have it show up as one.

#Example
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4li3gn56c1genx8rct5.png)
 
These cards have been developed by my team and I with help through the use of slot tags. Before development on the cards, we decided to break up the cards into parts to be able to take advantage of scaffolding slot tags. The breakdown is as follows: icon, banner and header, card, scaffold.

When in development, the '' tag helps us be more agile in the content we want to include and it helps increase reusability of the web component.

group repo: https://github.com/runtimeErrorsMadeEasy/project2
Font Awesome 4.7
Published: 2021-10-25 05:31:38

I have tried npm install --save font-awesome
import font-awesome to your index.js file. Just add below line to your index.js file below import
import 'font-awesome/css/font-awesome.min.css'; 
OR
import '../node_modules/font-awesome/css/font-awesome.min.css'; 
But it doesn't show any icons

Anyone please suggest What is the problem
What is the best online Python compiler?
Tags: python, compiler, beginners, computerscience
Published: 2021-10-25 05:30:47



You'll need a browser, which you may already have. Using online IDEs allows you to save time on setup. In a matter of seconds, you can start learning Python. If you are a professional developer who spends the majority of his or her time coding, you should invest in specialist Python IDE tools to create and debug your code.

In this blog, we will learn about some of the best Python Compilers that is our there in the market:

<b>Programiz: </b> Programiz is an application for compiling Python applications. We can access it using a web browser or by downloading the application to our local machine. It is used by millions of programmers to learn Python.

This not only compiles Python code, but also C, C++, Java, and other languages. This compiler is absolutely free, and all that is required to get started is access to the internet.

<b>Sublime Text: </b> Sublime Text is an IDE that is available in two versions: free and paid. More intriguing features are available in the premium edition. It features a number of plugins and is supported under free software licenses. It not only supports Python, but also Java, C/C++, and other programming languages.

When compared to other text editors, Sublime Text is relatively quick. Other packages such as a debugger, code linting, and code completion can also be installed. We have the ability to customize according to our needs.

<b>Thonny: </b>Thonny is a Python IDE that is free and open-source. To get started, we'll need to download it from the internet. It was created with a primary focus on the needs of newcomers in mind.

The Python 3 version is supported by the default version. Its basic GUI makes it easy to get started, and it has a number of useful capabilities such as error highlighting, debugger, code completion, and so on.

<b>PyDev:</b> PyDev is an Eclipse-based integrated development environment for Python, JPython, and IronPython. It is presently the finest Python coding environment. The community has been working on it for the past 8 years to make it stronger for Python users.

PyDev is a free and open-source programming language that anybody may download and use.

<h3>To Conclude…</h3>

I hope the above Python online IDE helps you to run your code through the browser. You should also check a detailed list of <a href= "https://codersera.com/blog/best-online-java-compilers-and-editors/">online Java compilers & Editors</a>.
Divtober Day 25: Dip
Tags: codepen, divtober, css, art
Published: 2021-10-25 05:23:58

---
title: Divtober Day 25: Dip
description: My entry for divtober day 24: dip. A tortilla chip dipping in queso.
published: true
tags: codepen,divtober,css,art
series: divtober
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpqfeocl91gxnh00txcw.png
---

Divtober 25<sup>th</sup> word is dip... so here's a tortilla chip chilling and drinking a margarita while (skinny?) dipping in some queso:

{% codepen https://codepen.io/alvaromontoro/pen/ExvWxQJ %}
Azure Devops Basics - Part 2 - CI Pipeline setup - Branch Policy
Published: 2022-07-05 10:47:39

---
title: Azure Devops Basics - Part 2 - CI Pipeline setup - Branch Policy
published: true
date: 2021-10-25 05:23:49 UTC
tags: 
canonical_url: https://lkgforit.com/azure-devops-basics-part-2-ci-pipeline-setup-branch-policy
---

## Azure Devops Basics - Part 2 - Video Explanation

[https://youtu.be/dGLWBWZavhw](https://youtu.be/dGLWBWZavhw)

## Pipeline used in this video:

```
trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:

- task: DotNetCoreCLI@2
  inputs:
    command: 'build'
    projects: 'ConsoleAppTestBuild/ConsoleAppTestBuild/ConsoleAppTestBuild.csproj'

```

### Sample Code Used in this Video:

[https://github.com/SSanjeevi/basicdevops](https://github.com/SSanjeevi/basicdevops)
Azure Devops Basics Part 1 - Project creation - CI Pipeline creation - Using YAML
Published: 2022-07-05 10:47:52

---
title: Azure Devops Basics Part 1 - Project creation - CI Pipeline creation - Using YAML
published: true
date: 2021-10-25 04:59:58 UTC
tags: 
canonical_url: https://lkgforit.com/azure-devops-basics-part-1-project-creation-ci-pipeline-creation-using-yaml
---

## Azure Devops Video Explanation - Basics Part 1:

[https://youtu.be/QxJ\_y6pV6No](https://youtu.be/QxJ_y6pV6No)

## Pipeline used in this video:

```
trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:

- task: DotNetCoreCLI@2
  inputs:
    command: 'build'
    projects: 'ConsoleAppTestBuild/ConsoleAppTestBuild/ConsoleAppTestBuild.csproj'

```

### Sample Code Used in this Video:

[https://github.com/SSanjeevi/basicdevops](https://github.com/SSanjeevi/basicdevops)
Apps4Developers - Build for Developers
Tags: developers, tools, programming, website
Published: 2021-10-25 04:41:52

![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ya20slgaymw1a2qu628.jpg)
[Apps4Developers.com](https://www.apps4developers.com/ 'Apps4Developers.com')

A site build for Developers with a growing list of utility tools to help during the development.

This site has tools like


- [**JSON**](https://www.apps4developers.com/json/ 'JSON') : Format and View JSON, JSON to YAML and YA… to Base64 string, Convert JSON to URL Parameters 
- [**JWT**](https://www.apps4developers.com/jwt/ 'JWT') : Decode JWT and view the Header and Payload 
- [**CSV**](https://www.apps4developers.com/csv/ 'CSV') : Convert CSV to JSON using Papaparse and Visualise it as a Table view 
- [**Markdown**](https://www.apps4developers.com/markdown/ 'Markdown') : Preview markdown using Showdown parser and also view the converted HTML 
- [**Base64**](https://www.apps4developers.com/base64/ 'Base64') : View live how string get converted from Base64 Encoded string to Plain text and Plain text get's converted to Base64 Encoded String 
- [**QR Code**](https://www.apps4developers.com/qr-code/ 'QR Code') : Converts user entered text to QR code which can be downloaded 
- [**Material Colors**](https://www.apps4developers.com/material-colors/ 'Material Colors') : Click and copy diffierent material design system color codes 
- [**Css Gradient**](https://www.apps4developers.com/css-gradient/ 'Css Gradient') : Select, create and copy different beautiful CSS Gradients for your site 
- [**Color Converter**](https://www.apps4developers.com/color-converter/ 'Color Converter') : View different formats of Color code which can be used in your app / site 
- [**String Case Change**](https://www.apps4developers.com/string-case-change/ 'String Case Change') : Upper Case, Lower Case, Cam…Pascal Case, Path Case, Sentence Case, Snake Case
Polygon a new privacy-oriented social network becomes open-source after being developed privately for more than a year!
Tags: typescript, javascript, node, hacktoberfest
Published: 2021-10-25 04:34:33

Privacy and transparency are some of the most important requirements that most modern social networks like Facebook and Instagram do not meet. 

One of the best examples of privacy nightmare is TikTok. It collects some very troubling data points such as **the number of CPUs your device has, available disk space, your IP & MAC addresses, whether your phone is jailbroken**, and so much more, which does not have anything to do with TikTok. Imagine that there are so many more applications and websites that do essentially the same thing and sell your information to 3rd party advertisers. Internet is rapidly becoming a place where one company can easily predict what type of person you are, based on all data points that they collected over time.

To end this, I have open-sourced the social network that I was working on for more than a year! It is called **Polygon** and the main goal for it is to be a **_social network that is not hungry for your data_**. Both the core and front-end are written in **TypeScript** and are seeking support from the open-source community. We also have a hosting guide that is written in **Python**.There is also some tooling written in **Go**. My main goal is to make it a **private**, **easy-to-use**, and **crisp** social network which will be adapted by privacy and open-source enthusiasts all over the world. 

Polygon is also open for **Hacktoberfest** contributions, which means that both beginners and professionals can contribute to the project and learn something new!

You can find all projects related to Polygon at: https://github.com/polygon-isecure

Thank you!