teleren/devto huggingface dataset:
Few Amazing Terminal style Portfolio website you might like
Tags: terminal, portfolio, webdev, javascript
Published: 2021-10-13 06:05:54

Terminal is something that every programmer must know. Portfolio websites are showcases for not only programmers nowadays , also designers , marketers and many more use portfolio websites to showcase their expertise and previous work history. 

What if your portfolio website gets a look that closer to a real Terminal ? 

In this post I got a list of few Amazing Terminal style portfolio websites. Let's the list begin. But this list by no means represents a good or bad ranking. 

### AyoCode's portfolio
Author - [Pablo Potat0](https://github.com/emmaunel)
Site - http://dev.potatoes.rocks/

### yasfu.net interactive web terminal
Author - [Ethan Jones](https://github.com/LittleBigBug)
Site - https://yasfu.net/portfolio/

### Heber Leonard's portfolio
Author - [Heber Leonard](https://github.com/heberleonard2)
Site - https://heberleonard2.github.io/terminal-style-portfolio-page/

### Loakesh Bachhu's portfolio
Author - [Loakesh Bachhu](https://github.com/loakeshbachhu)
Site - https://loakeshbachhu.github.io/

### ShellFolio
Author - [Ibne Nahian](https://github.com/evilprince2009)
Site - https://evilprince2009.netlify.app/

Let me know if you got something really amazing in the comment box , I'd love to explore them.
Weekly web development resources #91
Tags: weekly, webdev
Published: 2021-10-13 06:04:36



______

##[redact.photo](https://redact.photo/)
[![redact.photo](https://wweb.dev/weekly/content/91/redact-photo.jpg)](https://redact.photo/)
A nice tool to censor sensitive information of images online.

______

##[Faster React Apps With Memoization](https://blog.px.dev/ui-performance/)
[![Faster React Apps With Memoization](https://wweb.dev/weekly/content/91/ui-performance-hero.jpg)](https://blog.px.dev/ui-performance/)
An article by Nick Lanam on how to debug and fix excessive re-rendering.

______

##[Refine](https://refine.dev/)
[![Refine](https://wweb.dev/weekly/content/91/refine.jpg)](https://refine.dev/)
A React-based framework for building data-intensive applications.

______

##[Creating the Perfect Commit in Git](https://css-tricks.com/creating-the-perfect-commit-in-git/)
[![Creating the Perfect Commit in Git](https://wweb.dev/weekly/content/91/perfect-commit.jpg)](https://css-tricks.com/creating-the-perfect-commit-in-git/)
The first part of an advanced Git series.

______

##[Fette­Palette](https://redact.photo/)
[![Fette­Palette](https://wweb.dev/weekly/content/91/Fette­Palette.jpg)](https://redact.photo/)
A JavaScript function that generates color ramps based on a curve.

______

##[Atropos](https://atroposjs.com/)
[![Atropos](https://wweb.dev/weekly/content/91/atropos.jpg)](https://atroposjs.com/)
A JavaScript library to create  touch-friendly 3D parallax hover effects.

______

##[CSS Gradient Editor](https://www.cssgradienteditor.com/)
[![CSS Gradient Editor](https://wweb.dev/weekly/content/91/css-gradient-editor.jpg)](https://www.cssgradienteditor.com/)
A tool for creating colorful CSS gradient backgrounds and patterns.

______

##[TinyJson](https://github.com/tinysorcerer/tinyjson)
[![TinyJson](https://wweb.dev/weekly/content/91/tinyjson.jpg)](https://github.com/tinysorcerer/tinyjson)
An easy state database without dependencies.

______

##[Annimay](https://edumigueis.github.io/Annimay/)
[![Annimay](https://wweb.dev/weekly/content/91/animay.jpg)](https://edumigueis.github.io/Annimay/)
A collection of pure CSS3 lightweight animations for links, sections, buttons and more.

______

##[Fosscord](https://github.com/fosscord/fosscord)
[![Fosscord](https://wweb.dev/weekly/content/91/fosscord.jpg)](https://github.com/fosscord/fosscord)
A free open source selfhostable discord compatible chat, voice and video platform.

______

##[How I built a modern website in 2021](https://kentcdodds.com/blog/how-i-built-a-modern-website-in-2021)
[![How I built a modern website in 2021](https://wweb.dev/weekly/content/91/modern-website.jpg)](https://kentcdodds.com/blog/how-i-built-a-modern-website-in-2021)
A good article by Kent C. Dodds on his recent tech stack.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Create a custom toggle hook in React
Tags: javascript, react, beginners, tutorial
Published: 2021-10-13 05:57:02

Here we will create a simple and reuseable toggle hook in React. A toggle hook can be used in many cases hence making it a reuseable hook might make sense in your project. In this example we will take checkbox that uses state in-component and refactor it to use a useToggle hook.

{% youtube sZo3Q0PyPS0 %}
React basics: Looping a list
Tags: react
Published: 2021-10-13 05:44:43

In today's article for React basics, we'll enhance our [first ever React components](https://daily-dev-tips.com/posts/react-basics-creating-our-first-react-app/) with a list.

Yesterday we made some static book components like so:

```js
<Book title='Laravel collections' />
<Book title='Ruby for beginners' />
<Book title='CSS is awesome' />
```

However, that quickly becomes a struggle to maintain. So let's have a look at how we could dynamically load these books from a list.

## Creating a list in React

Open up your `App.js` and add a list like so above your app declaration.

```js
const books = [
  {
    id: 1,
    title: 'Laravel collections',
  },
  {
    id: 2,
    title: 'Ruby for beginners',
  },
  {
    id: 3,
    title: 'CSS is awesome',
  },
];

function App() {}
```

To render these elements in our React app, we can leverage the `map` function.

```js
<Bookshelf>
	{books.map((book) => (
	  <Book title={book.title} />
	))}
</Bookshelf>
```

And this little piece of code will do the same thing as we had before.

## Keys in React

However, I made one big mistake in the example above.
When we render list items in React as we do above, we should always set a key property.
This key will help React identify which items change or should be removed.

To add the key, we can use the following code.

```js
<Book title={book.title} key={book.id} />
```

However, sometimes we just do not have a key, so what do we do then?

Well, no worries, React comes with a built-in index we can use as the key.

```js
const numbers = [1, 2, 3];

{numbers.map((number, index) => (
	<span key={index}>Number: {number}</span>
))}
```

As you can see, the index is available on the map function to use that as the unique key for each element.

As usual, you can find this code on [GitHub](https://github.com/rebelchris/react-basics/tree/list).
I hope you enjoyed this article about loops in React.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
The “Hello world” of Data Structure-Linked List.
Tags: python, datastructureandalgo, algorithms, programming
Published: 2021-10-13 05:40:39

Linked is type of linear data structure which is widely use to solve specific problem raise due to the limitation of arrays.
Linked list can be define as linear data structure in which the elements are not stored in contiguous memory location. In Laymen terms we can say a linked list is a collection of nodes in which each node has a data and the reference to the next node.
https://paragnaik2019.medium.com/the-hello-world-of-data-structure-linked-list-159bba7e4044
Number.toString()
Tags: javascript, beginners, tutorial
Published: 2021-10-13 05:30:58

This short tutorial will go over a basic built-in method for the Number object in JavaScript, `toString()`. We will discuss what it is and how it can be used.
<br/>

## Number.toString()

The Number object has several built-in methods, one of which is the `toString` method. This method **returns** **the** **String** **representation** **of** **the** **Number** **object**.

```javascript
let num1 = 10;
console.log(num1); // 10
console.log(num1.toString()); // "10"
```

When the simple `Number.toString()` example above is run, the `num1` will print out as the string "10".
<br/>

### Syntax
```javascript
number.toString(radix);
```

`Number.toString()` can take one optional parameter `radix`. `radix` can be any integer between `2` and `36`. Any integers beyond this range will result in a `RangeError` when run. By default if no radix is specifed, base 10 is used. 

```javascript
let num2 = 213;
console.log(num2); // 213
console.log(num2.toString()); // "213"
console.log(num2.toString(2)); // "11010101"
console.log(num2.toString(16)); // "d5"
console.log(num2.toString(1)); // RangeError
```

####`radix`
`radix`, also referred to as base, is the number of unique symbols needed to represent numbers in a certain number system. For example, radix 2 refers to the binary number system. In that system, there are only 2 unique digits to represent numbers, 0 and 1. Similarly radix 16 uses 16 unique symbols (0-9 and A-F) to represent numbers. We use base 16 for hex colours.
<br/>

### Special Cases to Watch Out For
Numbers are not always positive integers. Sometimes we will run across the following situations:

* Negative Number objects. When the Number object is negative, the "-" sign is not converted as part of the `toString()` method. Rather it can be viewed as putting the "-" back in place after running the `toString()` method.

```javascript
let numPos = 549;
let numNeg = -549;
console.log(numPos.toString(16)); // "225"
console.log(numNeg.toString(16)); // "-225"
```

* Decimal Number objects. When the Number object is a decimal number, the "." is used to show the fractional portion.

```javascript
let numDec = 17.56;
console.log(numDec.toString()); // "17.56"
```  
<br/>
<br/>
  
## Conclusion
The `toString()`is useful when you want the object to be represented as readable text. Such situations include:
* debugging
* logging

I hope through this tutorial you were able to grasp a better understanding of `Number.toString()`. If you have time, I recommend familiarizing yourself with the other methods available on the Number object.
Tactics to achieve a well shapes body
Published: 2021-10-13 05:27:42

Before starting a journey to stay fit and healthy, you need to balance your diet, your lifestyle and of course have to commit to yourself to never lose your hope. Because in most cases people started to start gyming, workout, walking, yoga and even tries arobic, but what excercise suits your body, what is the right time to do workout, what to do and from Where you should you start, what's don't do while starting or continuing your fitness goal hiring an best personal fitness trainer in delhi is worthy. 

Though we can say lots of thing to achieving the goal of fitnest body, but what we recommend to everyone is to stay motivated and consistent. As can't calculate and figure out everything from your own. Having healthy conversation with a professional personal trainer at home delhi can give you a great result. As they have greta knowledge about fitness process so they thoroughly understand where are you lacking to achieve your goal of fitness. 

Before starting our blog, we would like to add a basic but important point that before heading to get fitest body jusy focus on two points which are main points to grab a healthy lifestyle and fitest and shaped body structure. Commitment and consistency. These two basic and simple but very effective words comes first, if you want to grow your business, learn something, get in a shape and everything. So, now let's head to know how to achieve your fitest body. 

Perceive YOUR GOALS 

Before changing your plan, ask yourself why did you start? 

First of all, you should set up your objectives. This might appear to be agonizingly self-evident, however all around regularly do new gym participants basically start working out without an strategy or system. In case you are trying to get into shape, you need to know what you should work on and what activities will be generally useful towards your ultimate objective.
Lots of negative point will come into your mind if you will not get optimum result in 2-3 months but at that time you should focus on changing the excercisd not your goal. Because if you will stop the activities it will not going to give you optimum results. 

Split your goal into steps

Before heading to lose 10 kg, first focus on 5 kg

No one can become rich in a night, similarly you can't get a well fit body shape after doing some excercise. You need to give time to your body and have to put efforts. So to manage your fitness goal a personal fitness trainer at home in delhi can help you wonderfully. As they will break your goal into more achieveable steps. 

Jot down YOUR PROGRESS 
Records your achievements
Whatever your favored strategy, it's strongly suggested you record your achievements in some way. Since wellness is a continuous change, it tends to be difficult to see. Like hair, you simply don't see a change until much later. But if you do record your exercises, you'll have the option to detect those continuous changes and imagine the progress you're making. This is a lifeline for inspiration since it reduces the probability of feeling like your efforts are pointless
My first year to Hacktoberfest.
Tags: hacktoberfest
Published: 2021-10-13 05:23:06

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Hi there!
Hey guys! I am cycool29, first year on programming, Github, DEV and also Hacktoberfest. 

### Background

I am just a beginner to programming, and Github. Fans of bash, learning Python.

### Progress

Since I am just a beginner, I look through Github and I found [Pi-Apps](https://github.com/Botspot/pi-apps) is suitable for me. So I created plenty of PR there.


### Reflections
<!-- Overall, how has your Hacktoberfest 2021 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
This program is a great program, encouraged me to make more contributions to open-source (I almost made a PR every day in October lol). Of course I will participate again this program in the future, when my skill is improved and able to contribute to other projects.
Divtober Day 13: Camouflage
Tags: codepen, divtober, css, showdev
Published: 2021-10-13 05:21:04

---
title: Divtober Day 13: Camouflage
description: Cartoon of a chameleon
published: true
tags: codepen,divtober,css,showdev
series: divtober
---

A scrollable cartoon of a chameleon resting on a branch. If you scroll, you'll see some elements "through" the chameleon.

{% codepen https://codepen.io/alvaromontoro/pen/eYENBdJ %}

The see-through effect was not done with opacity, but applying a blend mode of multiply.
Automating Flutter app with Appium Flutter Driver
Tags: softwaretestingcompany
Published: 2021-10-13 05:15:36

As a tech person who found flutter in his portfolio of technology, the most common question I get is that testing automation engineers didn’t know that flutter is not supported by appium, how can they write tests for it, how can they automate testing with it? So I’ll share some insight on how we can use a practical example to check flutter applications with appium-flutter-driver.
Thích Hẹn Hò
Published: 2021-10-13 05:04:39

Welcome to Thichhenho.com. Website Thích Hẹn Hò là nơi để tất cả mọi người cùng kết nối với nhau và tìm được một nửa yêu thương của mình. Tại đây mọi người có thể tìm bạn trai, tìm bạn gái, tìm bạn les, tìm bạn boy gay, máy bay bà già,.... phù hợp với mình nhất.
Địa chỉ: 106 Lương Ngọc Quyến, Phường 5, Gò Vấp, Thành phố Hồ Chí Minh
Website: https://thichhenho.com
Email hiển thị: thichhenhovn@gmail.com
Fanpage: https://www.facebook.com/thichhenhoweb/
Tags: Thích Hẹn Hò, tìm bạn trai, tìm bạn gái, tìm bạn les, tìm bạn boy gay, máy bay bà già, tìm bạn tình, tìm người yêu
Hashtag: #thichhenho #timbantrai #timbangai #timbanles #timbanboygay #maybaybagia #timbantinh #timnguoiyeu
Is Progress bar (tqdm) killing your code?
Tags: python, programming, tqdm
Published: 2021-10-13 04:53:41

## Introduction
Everyone familiar with Python knows that the quick and effective way to implement a progress bar is to use the **tqdm** package. A simple pip install will get you going. I have been using `tqdm` for a long time may it be for fun side projects or production code.

## The Task
Recently I was implementing a **fully connected neural network** using just the **NumPy** library and comparing its performance with popular deep learning frameworks **TensorFlow** and **PyTorch**. Check out this [link](https://github.com/dinesh-GDK/mnist_comparison) if you are interested in this project.

It is important to monitor the loss of the model as it is training and the best way according to me is to implement a progress bar that can track the amount of training completed and the loss at that point.

TensorFlow comes with this feature out of the box, which is very good. On the other hand in PyTorch we have to implement the training loop and a progress bar if we need it. Also, I wanted a progress bar for my NumPy implementation. So I used `tqdm` to implement it.

## What!!!
I implemented a progress bar such that I update it for every iteration. With this implementation, for the same dataset with the same number of epochs and with the same parameters, my custom implementation and PyTorch implementation ran 10 epochs for around 60 minutes, while the TensorFlow implementation finished the same task in just 25 minutes. What!!!

I thought it was because Tensorflow may be utilizing some optimization to run faster. So out of curiosity, I started to dig deep, and, finally I found out that the progress bar was the culprit. Then I modified the progress bar to be updated after 500 iterations and tada!, both PyTorch and custom implementation ran under 10 minutes!!!

This also raised a question in my mind, What if the update cycle of the progress bar in TensorFlow is affecting its performance? Well, it could be.

## Example
Let's look at an example to make things clear

```python
from time import time
from tqdm import tqdm

LOOP = 50000

def task(update_cycle):
    pbar = tqdm(total=LOOP)
    for i, _ in enumerate(range(LOOP)):
        for _ in range(LOOP):
            pass
        
        if i % update_cycle == 0:
            pbar.update(update_cycle)
    
    pbar.close()

tic = time()
print(f'Update cycle: {1}')
task(1)
toc = time()
print(f'Time elapsed: {toc-tic:0.2f} seconds\n')

tic = time()
print(f'Update cycle: {500}')
task(500)
toc = time()
print(f'Time elapsed: {toc-tic:0.2f} seconds')
```

The output of the code
![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/881g0y4l1lyse7ppqj62.png)

As we can see when the update cycle is big the task completes faster. I know it is a dumb example, but it gives the gist of the problem.

## Conclusion
`tqdm` is a fantastic package to implement progress bars. We can get a usable progress bar with just a single line of code and also it gives a wide range of customization. But next time when you implement a progress bar just make sure that it does not affect the performance.
Hacktoberfest #2
Tags: opensource, hacktoberfest
Published: 2021-10-13 04:29:01

In second week of Hacktoberfest, I have choose the React project which has front-end design [issue](https://github.com/neeleshio/login-form/issues/2) & [PR](https://github.com/neeleshio/login-form/pull/6). This React project contain simple login form with text input fields, error and warning icons and name and email validation. The issue is that there is two views on the same page which has same CSS class for the icons which position of icon is same even though both view has different forms. Here is two views with icons and toggle button.

![Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97t28bmksv36jh7gbof6.png)

When I inspect the code after forking and cloning, I realized that this project use SCSS for front-end design which I have not done any experience with it. After I researched about SCSS, Actually SCSS has extra features including variable and nesting. Especially nesting the class and attribute has much more convenient that regular CSS. Simply, review his SCSS code is good enough to understand for completing this issue. 

As mentioned above, the single page includes two views: "login" and "sign-up". The author has used same class name for both form which leads to have same icon positions in different forms. Therefore, I have to make different class name on either one of JavaScript file. For the sign-up view, I changed `<span>` class name `check` into `check-register` and `eye` into `eye-register` which is the HTML attributes that contains the icon. After that I have also created `.check-register` and `eye-register`. So now I have two different CSS class selector for icon positioning. I opened the development tool on Google Chrome to inspect the page for icon positioning. The other view "login.js" and "login.scss" have done vice versa.

![After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu5c3uw3nvfugnd39pqp.png)

Throughout study in Seneca College and 8 months co-op internship experience, I have change to work on front-end design with AODA compliance. However, the front-end design is mostly done with Bootstrap. That's why I want to choose the project. I always had hard time with layout and positioning. This time I have change to work with new concept "SCSS" in React. I hope that I choose the more challenge React project next time.
Deep Dive into Aggregates in the Blazor TreeGrid
Tags: webdev, blazor, csharp, dotnet
Published: 2021-10-13 04:10:14

Learn how to display aggregate values in the footer of the Syncfusion [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component. You’ll also see the different built-in aggregate types, custom aggregates, the footer template, and applying formatting. 

Product Overview: https://www.syncfusion.com/blazor-components/blazor-tree-grid 

Download the example from GitHub: https://bit.ly/3mCOuLa 

Refer to the following documentation to check aggregates in the Blazor TreeGrid component: https://bit.ly/3DAYzPV 

Check out this online example of aggregates in the TreeGrid: https://bit.ly/3BzUKcX

{% youtube h-yS0PTLaXk %}
To frame, or not to frame...
Tags: beginners, programming
Published: 2021-10-13 04:02:57

###iFrames###

Today I had a little history lesson over at [Perpetual Education](perpetual.education). Derek gave us a background on *iFrames* and what they are used for. Essentially, they are sections of a website that function as windows of information nested in areas chosen by the developer. Aesthetically speaking, they seem easy to use, but… *how effective are they?*

###Searchable, or…?###

![404 - Not Found.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdnxolj6vhjr46x3kqt9.png)

The key concern with iFrames is that they are *not searchable* because they are not linked. The content is visible to those who happen to find the page, but apart from seeing it directly on that page, it would be difficult to find. As Derek puts it, iFrames are “empty skeletons!”. So, if you want your page to be noticed in all its glory through SEO (search engine optimization), then you’ll want to be sure you’re not using iFrames for content that you want to be searchable.
</br>
</br>
###On a side note, Carbon: A simple yet powerful sharing tool.###

My friend and fellow developer [Budi Alfian Zainudin](https://substack.com/profile/7535002-budi-alfian-zainudin?r=tikc2&utm_campaign=profile&utm_medium=web&utm_source=) shared with me a nice little tool for sharing pieces of your code in a beautiful manner. This tool is called [Carbon](https://carbon.now.sh/). Check it out the next time you want to show what you’ve been working on!

![404 - Not Found.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp4bma4fazm0sdu4lmzj.png)
######Example of Carbon from their website.######
</br>
Happy coding everyone!

Andrew