teleren/devto huggingface dataset:
Experience of Web Development Internship at LetsGrowMore Community
Tags: css, html, javascript, react
Published: 2021-07-28 13:13:28

Hello everyone, I'm elated to share that I've successfully completed the web Development Internship at LetsGrowMore by completing the Task-1 and Task-2.

**Task-1 :** Single-Page Website
**Technologies used :** HTML,CSS,javascript
**Code Editor :** Visual Studio Code
**Github Link :** https://github.com/Bhuvaneshwari05/LGMVIP-WebDev

**Task-1 Experience:**

I have learnt HTML,CSS and javascript for designing this website. I have learnt so many new things about CSS and its purposes. This Internship helped me to know more about javascript. I faced issues in coding for alignment of pictures and  in using some other css attributes. It was a great learning experience. I have learnt how to sort out my issues. This website has no database linked in it for responsive data storage. It is a simple website that will let you know about the theme of website when you click on the responsive button that I have designed.

**Task-2 :**Web Application Using Create-React-App
**Technologies Used :**HTML,React js,Javascript,CSS
**Code Editor :**CodeSandBox
**Github Link :** https://github.com/Sasirekha-123/LGMVIP-WebDev


**Task-2 Experience:**
I have learnt React JS to complete this Web Application. In this I have used HTML,CSS to design the layout and the responsive part is made of React js. I have used API link to fetch the data and to display. This is a simple web application to display the users of brand while clicking in the get users button. It was a great learing experience. On the whole I have learnt React js completely while doing this task.

**Conclusion:**
I thank Mr.Aman Kesarwani and LetsGrowMore for giving me this opportunity to work on the projects based on Web Development. Through this Internship I have learnt and gained a lot of practical knowledge in the field of Web Development.
To know more about LetsGrowMore Internships visit the site 
https://letsgrowmore.in/ and https://letsgrowmore.in/vip/
What is the full form of CID?
Published: 2021-07-28 15:24:16

The Full-Form of CID | Meaning, History, FAQs| Latest Update 2021

The full form of CID is Criminal Investigation Department. It is a branch of the police department inducted with the task of carrying out investigations, inquiries and other related detective jobs relating to a crime committed.

The criminal investigations by police personnel wearing plainclothes in India is a very ancient system first modernized by Chanakya (also known as Kautilya) and applied in the Mauryan Kingdom some 2350 years ago. The Mughal Emperors further modernized the CID.
Also Read:

 
[file:///sdcard/](https://techcrazee.com/file-sdcard/)
[filmy4wap tech](https://techcrazee.com/filmy4wap-movie-download-website/)
[moviezwap](https://techcrazee.com/moviezwap/)
[4movierulz](https://gotechmantra.com/4movierulz/)
[Technology Write for us](https://www.flipupdates.com/write-for-us/)
[Technology Write for us](https://dailytechquest.com/write-for-us/)
[content://com.android.browser.home/](https://dailytechquest.com/content-com-android-browser-home/)
[Technology Write for us](https://dailytechhunt.com/write-for-us/)
[4movierulz](https://techkalture.com/4movierulz/)
[tamilrockers proxy](https://www.webtechmantra.com/tamilrockers-proxy/)
[mis webmail](https://www.webtechmantra.com/mis-webmail/)
[solarmovie](https://techkalture.com/top-best-solarmovie-alternatives/)
[bts full form](https://techcrazee.com/bts/)
[cid full form](https://techkalture.com/cid/)
[tmc full form](https://techkalture.com/full-form-of-tmc/)
[movierulz.vpn](https://www.webtechmantra.com/movierulz-vpn/)
I made a website that makes articles appear like a Twitter thread
Tags: twitter, react, nextjs, node
Published: 2021-07-29 07:55:06

Link: [threadRoll](https://threadroll.app)

So long ago, I came across a product called Thread Reader App, that unrolls Twitter threads into a article format. So this, is exactly the opposite of that.

![Website Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il6p4p11qdd8dmpz0dtw.png)

But why?

I have been asking myself the same question for weeks while I was making this. Basically, people read really long threads in Twitter. So they are habitual to reading them like that, and may find it nostalgic to read everything that way.


This was made completely from scratch using this tech stack:
```
React.js [Next.js], Node.js [Express.js], Auth0 [Authentication]
Deployed on: Vercel [Frontend] and Railway [Backend]
```

Features:
- Custom Article Links
- Save Articles
- Curated Article Recommendations
- Share them with others
- Theme switching

Hope you like it. Any feedback is appreciated in the comments!
Simple Text Effects Using CSS
Tags: css, webdev, beginners, codenewbie
Published: 2021-07-29 13:44:55

Here is a list of few text effects created using CSS, they are simple, I think it will be good for beginners.

[Text Effect 1] (https://codepen.io/kiran-r-raj/pen/PomQRwR)
{% codepen https://codepen.io/kiran-r-raj/pen/PomQRwR default-tab=result,css %}

[Text Effect 2](https://codepen.io/kiran-r-raj/pen/eYWVVoq)
{% codepen https://codepen.io/kiran-r-raj/pen/eYWVVoq default-tab=result %}

[Text Effect 3](https://codepen.io/kiran-r-raj/pen/OJmQQwO)
{% codepen https://codepen.io/kiran-r-raj/pen/OJmQQwO default-tab=result %}


[Text Effect 4](https://codepen.io/kiran-r-raj/pen/oNWEEdb)
{% codepen https://codepen.io/kiran-r-raj/pen/oNWEEdb default-tab=result %}

[Text Effect 5](https://codepen.io/kiran-r-raj/pen/GRmQQJq)
{% codepen https://codepen.io/kiran-r-raj/pen/GRmQQJq default-tab=result %}

[Text Effect 6](https://codepen.io/kiran-r-raj/pen/jOmZYvm)
{% codepen https://codepen.io/kiran-r-raj/pen/jOmZYvm default-tab=result %}

[Text Effect 7](https://codepen.io/kiran-r-raj/pen/QWvaPwE)
{% codepen https://codepen.io/kiran-r-raj/pen/QWvaPwE default-tab=result %}

[Text Effect 8](https://codepen.io/kiran-r-raj/pen/poPpYmE)
{% codepen https://codepen.io/kiran-r-raj/pen/poPpYmE default-tab=result %}

Hope it will be useful.
Introducing Tomorrow - A New Look for Code Editor
Tags: javascript, vscode, programming, codenewbie
Published: 2021-07-30 07:38:05


### Introduction 
Visual Studio Code is by far one of the most popular code editors for web, mobile, and hardware developers. More than 2,600,000 people use VS Code every month, up by over 160% in the last year. 

A week ago I have created my own theme ( [ **Tomorrow**](https://marketplace.visualstudio.com/items?itemName=suhailkakar.tomorrow)  ), This theme was inspired by One Dark Pro and Material Theme. 

![Screenshot_2021-07-20_16-01-11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627628589779/0kjhAU7RI.png)


### Installation 

1.  Open  **Extensions** sidebar panel in VS Code.  `View → Extensions`
2.  Search for  `Tomorrow`  - find the one by  **Suhail Kakar**
3.  Click  **Install**  to install it.
4.  Code > Preferences > Color Theme >  **Tomorrow**

### Recommended Settings

If you want to give the same look as the above picture for your Code Editor you need to paste the below code into your VS Code Settings JSON


```json
{
  "editor.fontSize": 17,
  "editor.fontWeight": "500",
  "editor.fontLigatures": true,
  "editor.lineHeight": 35,
  "editor.tabSize": 2,
  "editor.lineNumbers": "off",
  "editor.renderIndentGuides": false,
  "editor.renderWhitespace": "none",
  "editor.renderControlCharacters": false,
  "editor.minimap.enabled": false,
  "workbench.colorTheme": "Tomorrow Theme",
  "tabnine.experimentalAutoImports": true,

  "editor.smoothScrolling": true,
  "editor.mouseWheelScrollSensitivity": 2,
  "editor.scrollBeyondLastLine": true,
  "editor.cursorStyle": "block",
  "editor.cursorBlinking": "phase",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.cursorWidth": 2,

  "explorer.openEditors.visible": 0,
  "explorer.confirmDelete": false,
  "explorer.decorations.badges": false,
  "problems.decorations.enabled": false,
  "workbench.sideBar.location": "left",

  "window.zoomLevel": 1,
  "window.menuBarVisibility": "toggle",
  "workbench.statusBar.visible": true,
  "workbench.activityBar.visible": true,

  "terminal.integrated.cursorStyle": "block",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.fontWeight": "500",
  "code-runner.runInTerminal": true,

  "editor.formatOnSave": true,
  "workbench.startupEditor": "none",
  "editor.detectIndentation": true,
  "editor.insertSpaces": false,
  "terminal.integrated.rendererType": "dom",
  "window.compositionAttribute": "acrylic",
  "editor.fontFamily": "'Cascadia Code', 'monospace', monospace, 'Droid Sans Fallback'",
  
}
```

### Font

**Cascadia Code** font is recommended, This font was created by Microsoft and available publicly on GitHub. You can download the font  [here](https://github.com/microsoft/cascadia-code/releases) 

### Conclusion 

If you like this theme, be sure to give it a start ⭐ on  [Github](https://github.com/suhailkakar/Tomorrow-Theme). I hope you found this article helpful. If you need any help please let me know in the comment section

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/)  

👋 Thanks for reading, See you next time
Custom React + TailwindCSS Calendar Component
Published: 2021-07-30 10:34:20

---
title: Custom React + TailwindCSS Calendar Component
published: true
date: 2021-07-30 10:25:00 UTC
tags: 
canonical_url: https://blog.daliborbelic.com/custom-react-tailwindcss-calendar-component
---

Hey there,

If you need a custom calendar for your React app, that's light (built without any external code), you came across the right blog post! Check out the custom calendar I coded with React and TailwindCSS.

### [Live demo](https://custom-calendar.netlify.app/)

[GH repo](https://github.com/daliboru/calendar). P.S. If you like it, give it a star :)

Happy coding,

Dalibor
Handy tools for your next Flutter project
Tags: mobile, flutter, tools, dart
Published: 2021-07-30 15:40:38

## 1: `scrcpy`: Control Android devices connected on USB

{% github Genymobile/scrcpy no-readme %}

I've been using this tool for demoing, side-by-side mock-ups to screen, and getting emulator-like experience on a physical device's performance, easier screenshots, etc. This has been one the most useful tools for an Android developing experience for flutter developers.

## 2: Mockoon: Create mock APIs in seconds

{% github mockoon/mockoon no-readme %}

A simple, intuitive, local web service environment that will have you setting up API calls faster than the Firebase local emulator. This one is a favorite for viewing logs, creating routes on uncaught requests, and multiple environments.

## 3: Lefthook for linting and analysis before pushing and committing

{% github evilmartians/lefthook no-readme %}

Execute custom commands triggered by git actions. In my opinion it is much simpler than using traditional local git hooks. 

```yaml
# On `git commit` lefthook will run `flutter format` and `flutter test`.
pre-commit:
  commands:
    flutter-format:
      glob: "*.dart"
      run: flutter format {staged_files}
    flutter-test:
      glob: "*.dart"
      run: flutter test
```

## 4: Mason: Create and consume reusable templates

{% github felangel/mason no-readme %}

> Mason allows developers to create and consume reusable templates called bricks.

This tooling feels similar to snippets, but allows you bulk-create your project's boiler plate code.

## 5: Flutter DevTools - Network & Flutter Inspector

[Network](https://flutter.dev/docs/development/tools/devtools/network) & [Flutter Inspector](https://flutter.dev/docs/development/tools/devtools/inspector) are the two most useful tools in my utility belt. The network tools is extremely helpful in determining how many calls are being made for service and ensuring the data in the channel is formatting and not being mutated unknowingly. The Flutter Inspector is handy for exploring your widget tree. Two handy uses from the inspector are the "Select widget mode" for quickly finding a UI component and the the "Debug paint" for getting layout and sizing just right with Flutter's [flex-like](https://api.flutter.dev/flutter/widgets/Flex-class.html) widgets.

These may seem obvious to some but many new developers don't take advantage of these two immensely helpful utilities (and along with the rest of the DevTools Suite)!

## 6: Add user snippets live templates to your editor

The two primary code editors for the Flutter developer are Visual Studio Code and Android Studio/IntelliJ IDEAs. Many extension/plugins are offered on these platforms that include snippets and live templates, but sometimes these pieces of code don't fulfill your needs. You are able to create your own with each of the platforms. See the below pages to et more information for you prefer editor:

- [Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets)
- [Live templates﻿ in IntelliJ IDEA](https://www.jetbrains.com/help/idea/creating-and-editing-live-templates.html)
Build a Trading Bot with Cassandre Spring Boot Starter
Tags: spring, trading, cryptocurrency
Published: 2021-07-30 19:55:44

A trading bot is a computer program that can automatically place orders to a market or exchange without the need for human intervention.

In this tutorial, we'll use [Cassandre](https://www.baeldung.com/cassandre-spring-boot-trading-bot) to create a simple crypto trading bot that will generate positions when we think it’s the best moment.
Algorithms Scripting Notes and Examples: Part 4
Tags: javascript, beginners, algorithms, devops
Published: 2021-08-20 20:36:48

* 7:45 AM Trying to do my studies early in the morning and some in the afternoon. In order for me to become who I wanna be I need to continue not giving up no matter how hard.
* Anyways moving on. Now Today we're figuring out how to return the sum of all odd Fibonacci Numbers that are less than or equal to `num`. 
* Basically its just every additional number in the sequence is the sum of the previous numbers. Ex: the first two numbers in the Fibonacci sequence starts with 1 and 1. After it should be followed by 2, 3, 5, 8, and so forth.

* For example, `sum(10)` should return `10` because all odd Fibonacci numbers less than or equal to `10` are 1, 1, 3, and 5.
```
function sum(num) {
  return num;
}

sum(4); // this should return 5 because all odd Fibonacci numbers less than or equal to `4` are 1, 1, 3
```
* Answer: 
```
function sum(num) {
  let sequence = [0, 1]
  let count = sequence[sequence.length - 2] + sequence[sequence.length - 1];


    while (count <= num) {
     sequence.push(count);
     count = sequence[sequence.length - 2] + sequence[sequence.length - 1];
    }

     let sumOfAllOdds = 0

    sequence.forEach(function(num) {
    if (num % 2 != 0) {
      sumOfAllOdds += num; 
  }
    });

  return sumOfAllOdds;
}

console.log(sum(4)); // want to return 5 because that's the sum of all odd Fibonacci numbers [ 1, 1, 3];
```

#### Alright onto the next one! This time they want us to check return the sum of all prime numbers that are less than or equal to num. 
* If you don't know what a prime number is, basically it's a whole number greater than 1 with exactly two divisors: 1 and itself. For example, 2 is a prime number because it is only divisible by 1 and 2. While something like 4 is not because it is divisible by 1, 2 and 4.
* Now lets rewrite `SumOfAllPrimes` so it returns the sum of all prime numbers that are less than or equal to num.
```
function sumOfAllPrimes(num) {
  return num;
}

sumOfAll(10);
```
* Answer:
```
function sumOfAllPrimes(num) {
  function isPrime(num) {
    for (let x = 2; x < num; x++) {
      if (num % x === 0) {
        return false;
      }
    }
    return true;  
  }

  let range = [] 

  for (let i = 2; i <= num; i++) {
    if (isPrime(i)) {
      range.push(i)
    }
  }

  return range.reduce((a, b) =>  a + b)




  
  

  

}
console.log(sumOfAllPrimes(10)); // will display 17 because 2 + 5 + 10 = 17



// Recommended (reduce with default value)
// Array.prototype.reduce can be used to iterate through the array, adding the current element value to the sum of the previous element values.

// console.log(
//   [1, 2, 3, 4].reduce((a, b) => a + b, 0)
// )
// console.log(
//   [].reduce((a, b) => a + b, 0)
// )

//  a prime number can only return false - your code --> "if num % x ===0 { return false}" if it % 1 OR ITSELF. But you put x start from 2, so it won't check 1. then u put "x < num"  so it won't check itself
```
setgrsg
Tags: python, laravel
Published: 2021-07-31 04:09:14

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(70) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `date_of_join` date NOT NULL,
  `email` varchar(80) NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cdm1po62bw7zo3idvje.jpg


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/we0y4m0x107cksn87sk5.jpg))
Retrospectives or postmortems?
Tags: retrospectives, postmortem, devops
Published: 2021-08-02 08:33:48

---
title: Retrospectives or postmortems?
published: true
date: 2021-07-31 00:00:00 UTC
tags: retrospectives,postmortem,devops
canonical_url: https://jhall.io/archive/2021/07/31/retrospectives-or-postmortems/
---

A couple of months ago during a workshop presentation on the topic of [getting started with DevOps](https://jhall.io/archive/2021/07/30/where-to-start-with-devops/), I was asked an interesting question:

> Is it easier to start with retrospectives, or with postmortems?

The two serve distinct, although related, purposes. Retrospectives exist to encourage regular [retrospection](https://jhall.io/archive/2021/04/22/are-retrospectives-required/), whereas postmortems serve to understand root causes of incidents and prevent future reoccurences. So naturally, most teams will want to do both.

But if your team is doing neither, which is easier to start with?

If your team is open to it, by all means, start doing retrospectives regularly (monthly or biweekly). But if this doesn’t work, or you sense resistance, then starting with postmortems could make good sense. Here are some reasons:

1. Postmortems are _timely_. They ideally happen the day after a major incident has been resolved. This means everyone still has the incident, and its resolution, fresh on mind, and are generally in the mood to prevent such an incident from recurring.
2. Postmortems are _focused_. Each postmortem focuses on a single incident, and its proximate causes. This leads to focused discussion in a way that retrospectives may not.
3. Postmortems are _blameless_. Of course, your retrospectives, and indeed entire company culture, ought to be blameless, too. But if this is not already part of your culture, starting this tradition in isolation can be easier.
4. Postmortems can gracefully turn into retrospectives. Every postmortem requires follow-up. If your team is ready for it, you can easily turn your first postmortem followup into your first retrospective. After addressing the old business from the postmortem, leave the meeting open for other areas of improvement.

If your team could use some help implementing effective blameless postmortems, I’d love to help. [Reach out](https://jhall.io/contact/) and let’s discuss your needs.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Blurry image backgrounds like on Instagram
Tags: codepen, css, javascript, instagram
Published: 2021-07-31 14:48:33

A JavaScript/CSS prototype to automatically generate blurred background images from the image source of the original image. The img tag just has to be packed into a container. The rest is done by JavaScript and CSS filters. 

TIP: If you use Twitter Bootstrap 5, you can also use the ratio classes (.ratio, .ratio-16x9) for the image container (.image-container).

{% codepen https://codepen.io/typo3-freelancer/pen/ExmLBJP %}

NOTE: If you want to use this code for a live website, please add more CSS rules and better responsive handling ;-) It's not perfectly done yet!

## Your Feedback is appreciated!
What do you think about this approach? Would you do it the same way? What would you do better in the current code? Just write it in the comments!
Browser and React onChange  event: The conundrum
Tags: javascript, webdev, react, html
Published: 2021-08-01 17:24:20

##The Problem
Sometimes I think we all are so inclined towards Javascript frameworks or libraries that we don't pay attention to how things work natively. Recently when I was debugging an issue about input tag's **onchange** event, I was startled when the callback function was not being called on changing the input value. Well, React triggers onChange whenever one changes the input value. Coming from React I just assumed that such things would work the same in vanilla Javascript 😔 😔 . **The way browser fires the onchange event is different.**

###Javascript onchange
Coming from React it's easy to fall into the trap. But let's understand some events the browser fires when one interacts with the input tag

* onfocus - Fired when the user sets focus on the element
* onblur - Opposite of onfocus. Fired when an element loses focus
* onchange - (the most interesting one 😅). Unlike React, the browser fires onchange event after focus from input element is taken off. So when focus is set on an input element and something is typed, onchange won't be fired until and unless the input element is out of focus.

When an element is out of focus, the browser assumes that the user is done making the change(probably the reason why onchange is fired late).

Let's see this in action. Check out the JS part here and open your console to see what is logged.
**Note that onchange is fired only when input is out of focus**

{% codepen https://codepen.io/pulkit29/pen/QWvxwrW %}

###Question for the readers 🧐
I am not too sure as to why in the above example onblur callback is fired after the onchange callback. We know now that onchange is fired when the element is out of focus. Know the reason?? Please comment down below.

###React onChange
Apart from the camel case difference the way React onChange handler works is also pretty different. It gets triggered whenever one makes a change in the input element value.
I tried to create something like React onChange. Let's have a look (not saying that this is how it works exactly).
{% jsfiddle https://jsfiddle.net/kpulkit29/pg7ew9kv/31/ js,html,result %}

* I had attached my custom onChange callback to the element.
* Using setter/getter to get the previously entered value and compare it with the latest one.
* Additionally attached a keyup event listener to get hold of the latest value
* Notice that the custom onChange handler gets triggered everytime a change is made.

Bye Bye !! 👋👋 Hope there were takeaways.

####Let's connect
[Linkedin](https://www.linkedin.com/in/pulkit291/)
[Twitter](https://twitter.com/kpulkit29)
[Github](https://github.com/kpulkit29)