teleren/devto huggingface dataset:
Getting Started with the Blazor Range Selector Component
Tags: blazor, webdev, csharp, dotnet
Published: 2022-03-24 04:03:22

This video will get you started with the Syncfusion [Range Selector component](https://www.syncfusion.com/blazor-components/blazor-range-selector) in a Blazor WebAssembly application. You will learn about basic functionalities: data binding; setting a range, series type, and tooltip; customizing grid and tick lines. You will also see how to render a lightweight range selector without a chart. 

Product Overview: https://www.syncfusion.com/blazor-components/blazor-range-selector

Download an example from GitHub: https://github.com/SyncfusionExamples

Refer to the following documentation to learn about the Blazor Range Selector component: https://blazor.syncfusion.com/documentation/range-selector/getting-started

Check out this online example of the Blazor Range Selector component: https://blazor.syncfusion.com/demos/range-selector/range-navigator

{% youtube Xtt1h-1QH58 %}
Angular MatSelect Input AutoFocus on Button click
Published: 2022-03-24 03:28:56

_The Select options panel can be controlled by adding a template variable then calling the methods programmatically._

**Eg:**

```
<button (click)="mySelect.open()">Open</button>
<button (click)="mySelect.toggle()">Toggle</button>
<button (click)="mySelect.close()">Close</button>

  <mat-form-field>
    <mat-label>Select Color</mat-label>
    <mat-select #mySelect [(value)]="selected">
      <mat-option value="yellow">Yellow</mat-option>
      <mat-option value="black">Black</mat-option>
      <mat-option value="red">Red</mat-option>
    </mat-select>
  </mat-form-field>
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ee18o83qxet4i51s4i8r.gif)

_To get an instance of mat-select inside the component class, import the MatSelect class and get mat-select instance using @ViewChild as shown below:_

```
// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-mat-select-app';

  @ViewChild('mySelect') mySelect: MatSelect;

  selected: string;
  
  OpenSel() {
    this.mySelect.open()
  }
}
```
Angular Web3
Tags: angular, web3, typescript, node
Published: 2022-03-24 03:23:54

## Guía definitiva para usar librerías web3 en Angular.

Si has intentado crear un proyecto de web3 o buscado documentación, es muy probable que encontraras que muchas están destinadas a React u otros frameworks afortunadamente el error es común y fácil de arreglar. 
`Error: Module not found: Error: Can't resolve 'crypto'.`
Este es muy común en versiones con Ivy, a partir de la v12 hasta la más actual, así que solo hacemos lo siguiente:
**Configuración**
1. Generar un nuevo proyecto. `ng new nombre-app`

2. Instalar web3 y sus dependencias con:
`npm i web3 -S
npm i crypto-browserify stream-browserify assert stream-http https-browserify os-browserify browser url os-browserify process -S`

3. Agrega lo siguiente al polyfills.ts:
{% gist https://gist.github.com/AntonioCardenas/3276b2a9f0d4182036b034cc97e22dc7 %}

4. Agrega lo siguiente al tsconfig.json:
{% gist https://gist.github.com/AntonioCardenas/6954324f7c3ebe691f141f7f24734a7d %}


5. Genera un Web3 service
`ng g service web3`
{% gist https://gist.github.com/AntonioCardenas/c3b1f26108343daf858c119e8a1aec4b %}


6. Consume el servicio  desde el componente que quieras 
{% gist https://gist.github.com/AntonioCardenas/ed1de949c09bad1b42ba58586d4de54d %}


7. ng serve y ng build no debería mostrar ningún problema

![Ejemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67l8s5xu5kw081ownon9.gif)

Si aparece un error con @types/node haz:


`npm i -S @types/node
Then in tsconfig.json
"angularCompilerOptions": {
    "types" : ["node"]
    ....
}`

> Extra Si deseas usar un template aqui hice uno:


{% github https://github.com/AntonioCardenas/AngularWeb3Boilerplate %}
tomo deploy. Deploy rails app in one command. Heroku alike.
Tags: ruby, devops, heroku
Published: 2022-03-24 03:07:56

[tomo deploy](https://tomo-deploy.com/) allow user to deploy with just one command. Tomo will do both setup and deploy processes. Tomo deploy will allow Heroku alike features to be install onto your own server

for the `tomo setup` command it will:
  run "env:setup"
  run "core:setup_directories"
  run "git:clone"
  run "git:create_release"
  run "core:symlink_shared"
  run "bundler:upgrade_bundler"
  run "bundler:config"
  run "bundler:install"
  # run "rails:db_create"
  run "rails:db_schema_load"
  run "rails:db_seed"
  run "puma:setup_systemd"
  run 'sidekiq:setup_systemd'

for the `tomo deploy` command it will:
  run "env:update"
  run "git:create_release"
  run "core:symlink_shared"
  run "core:write_release_json"
  run "bundler:install"
  run 'yarn:check_files'
  run "rails:db_migrate"
  run "rails:assets_precompile"
  run "core:symlink_current"
  run "puma:restart"
  run "puma:check_active"
  run "core:clean_releases"
  run "bundler:clean"
  run "core:log_revision"
  run 'sidekiq:restart'

of course we can secify our own task in these processes by adding plugin to it. eg:

`plugin './plugins/yarn.rb'`

./plugins/yarn.rb
```
def check_files
  remote.chdir(paths.release) do
    remote.run('yarn', 'install', '--check-files')
  end
end
```
then we can add `run 'yarn:check_files'` to our process.

This is the part that I love about tomo deploy.

**git:create_release** source: tomo-deploy.com
Fetches the latest commits from git_branch (or git_ref) and creates a release by copying the contents of that branch of repository into a new release inside the releases_path. Releases are numbered based on the timestamp of when the deploy takes place.

git:create_release is intended for use as a deploy task.


## TOP 3 TOMO COMMANDS
There are tons of goodness when it comes to tomo commands. We browse all commands through `tomo tasks` command.

1. To see running log on remote deploy server, we can use this command: `tomo puma:tail_log`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nc95zlb9i61l93wiltgf.png)

2. To access remote server data-via-activerecord we can always use our handy `rails console` but to do it remotely with tomo, we can use `tomo rails:console`. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tu30lwj1lz0zatpc97l.png)

3. `tomo sidekiq:log`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kg0uu4x50m5uy1woh8c.png)
 

WARNING:
1. Do not use `set env_vars` to update your `PATH`. We cannot use like `export "PATH=$PATH:/our/bin"` in env_vars, as it will break our path. I have break it once and I suggest other people to do it on to the remote(deploy server) shell it self.

2. To allow message encryptor to work properly, we need to make sure:
 a. master.key content from our local machine are the same RAILS_MASTER_KEY that we enter onto the remote server via `tomo setup`. 
 b. we add and commit+push our local `credentials.yml.enc`.

thank you for reading.
This is the way!
Tags: beginners, webdev, javascript, programming
Published: 2022-03-24 03:07:14

## Hello there! 
My name is Pedro Henrique and this is my first post here. My motivation to start writing this blog is that I can develop my skills, at the same time document my journey as a developer, and somehow contribute to the developer community.

> All we have to decide is what to do with the time that is given to us. - Gandalf

I'm from Brazil, and I'm looking to graduate in the System of Information. I always had a passion for technology and that helped me decide the way of my studies, how also my professional career. Expand my knowledge with most of  HTML, CSS, and JavaScript, but also I began to study Python and Dart. After thinking about this, I decided to document the progress of my journey as a developer and share what I learn over trails of frontend, backend, and mobile. Also, I have interesting in UX/UI and game development.

Anxious for this journey where I will learn, share, and have more involvement with the developer community.

See you soon, thanks for reading!

Photo by <a href="https://unsplash.com/@victorserban?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Victor Serban</a> on <a href="https://unsplash.com/@victorserban?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Vue 2.x + Vite + Tailwind CSS + Typescript
Tags: vue, vite, tailwindcss, typescript
Published: 2022-03-24 02:29:58


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wn6mz1vao9f2v4pqx9vh.png)

👋 Hello developers,

I have created boilerplate github template repo, which is on vite, vue 2.x, tailwind css and pure javascript.

I know many of us already switched to vue 3.0 but still for some one who still want to use readymade set up with vite and tailwind using typescript is here checkout the link - https://github.com/mayank30/vite-tailwind-vue2-typescript

Feel free to create PR to enhance the project.

Thank you so much :)
Terminal Battleship Game
Tags: beginners, python, bash, code
Published: 2022-03-24 02:10:32

I am currently going through the Computer Science Career Path with [Codecademy.com](codecademy.com). The first section of the program is called **CS101: Introduction to Programming** and uses the Python programming language to teach basic computer programming concepts and skills. I had previously studied computer science in highschool and university on my way to my engineering degree, but that was so long ago I've wanted a refresher in the basics.

![In Progress Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2asc370vk8n3y6tr8395.png)

At the end of this section of the career path, there is a portfolio project where it is required to create a basic interactive game using Python that can be played in the terminal. For this I had decided that I was going to create a version of Battleship. My plan was to start out with a 1 player game and once I had the basic functionality in place, add the 2 player functionality.

I know some of my code could be made simpler with using additional modules, as Python has an almost unlimited list of modules that can be called upon to perform a task, but I wanted to practice with base Python as much as possible and limit external module usage.


![Opening Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6235efkwdhv8q4qrfoqo.png)

After getting a basic 1 player version working, I tackled a 2 player version. Initially I had planned to use 2 different classes, one for ships and a second for the boards but quickly realized the code got easier if I added a third class for the player. Once the 2 player version was working I had to go back and re-write the 1 player logic to work with the modifications that were required to get 2 player to work.


![Two Player Game, Medium Difficulty](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki4i0o8sca6o50ntsana.png)

All in all I am happy with the functionality of the game and am proud of how it turned out. In the future I may come back to this project to improve the input validation from the user as was as refactor the code to use external modules were it would improve efficiency.

You can find this project on my github page [here](https://github.com/timjquigg/battleship). I look forward to continuing my coding journey.

Tim
Get ALL processes data from host powershell
Tags: powershell, process, monitoring, script
Published: 2022-03-24 02:06:43


**Get ALL Process data from host powershell, run next command:**


```
Write-Host "--------------------------------"
Write-Host "Computername:" $env:COMPUTERNAME -foregroundcolor "green"
get-process  | ft @{Label="NPM(K)";Expression={[int]($_.NPM/1024)}}, 
                  @{Label="PM(K)";Expression={[int]($_.PM/1024)}},
                  @{Label="WS(K)";Expression={[int]($_.WS/1024)}},
                  @{Label="VM(M)";Expression={[int]($_.VM/1MB)}},                                                                      
                  @{Label="CPU";Expression={if ($_.CPU -ne $()) { $_.CPU.ToString("N")}}}, Id, MachineName, ProcessName ,@{Label="path";Expression={($_.path)}},-auto 
Write-Host "--------------------------------"

```
Create file with date in filename Powershell
Tags: powershell, devops, backup, automation
Published: 2022-03-24 02:00:07


**Create file with date in filename, specific size**

```scss
$FILENAME=get-date -format yyyyMMdd.HHmmssff
$MYARRAY = New-Object -TypeName Byte[] -ArgumentList 1Mb
$OBJ = New-Object -TypeName System.Random
$OBJ.NextBytes($MYARRAY)
Set-Content -Path $FILENAME".txt" -Value $MYARRAY -Encoding Byte

Write-Host "The file was created in" $((pwd).path) -foregroundcolor "green"

```
Clean temporal files from site from IIS Powershell
Tags: powershell, iis, devops, logs
Published: 2022-03-24 01:58:18

---
sort: 4
---

# 


**this is for ALL sites**
```scss
#invoke-command -computername "HOSTNAME" -scriptblock {iisreset /STOP}
#invoke-command -computername "HOSTNAME" -scriptblock {iisreset /START} ; Start-WebSite $args[0]
```

**this is for ONE site**
```scss
Import-Module WebAdministration
$serverName = "COMPUTERNAME"      #name VM
$siteName = "ELA_Client" #name site
$block = {Stop-WebSite $args[0]};  
$session = New-PSSession -ComputerName $serverName

#stop site
Invoke-Command -Session $session -ScriptBlock $block -ArgumentList $siteName

#remove data path
Invoke-Command -Session $session -ScriptBlock {Get-ChildItem –Path "C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\*\" | Remove-Item -Recurse -Force }

#start site 
$block = {Start-WebSite $args[0]};  
Invoke-Command -Session $session -ScriptBlock $block -ArgumentList $siteName

```
Listen to the S8E7 of DevDiscuss: "All Hail jQuery (Or Not)"
Tags: discuss, podcast
Published: 2022-03-24 01:57:30

---
title: Listen to the S8E7 of DevDiscuss: "All Hail jQuery (Or Not)"
published: true
description: Listen to S8E7 of DevDiscuss!
tags: discuss, podcast 
series: DevDiscuss Season 8
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry0qra7cv2q9lenmry43.png
---

## If you have queries about jQuery, you should probably listen to this episode.

{% podcast https://dev.to/devdiscuss/s8-e7-all-hail-jquery-or-not %}

_Quick refresher — DevDiscuss is the first original podcast from DEV all about the burning topics that impact all our lives as developers._

### Host:
- **@ben** — Creator of DEV & Co-Founder of Forem
  
### Guest: 

- [Chris Ferdinandi](http://twitter.com/@chrisferdinandi) is the author of the Vanilla JS Pocket Guide series, creator of the Vanilla JS Academy training program, and host of the Vanilla JS Podcast. My developer tips newsletter is read by over 8,500 developers each weekday.
- [Diana Le](http://twitter.com/@dianale_dev) is a front-end web developer who creates responsive websites using HTML, CSS and JavaScript. She is continuously learning and a huge advocate of documentation to improve team efficiency and code practices.
- [Tyler Smith](https://github.com/tylerlwsmith) is a software developer who writes about Laravel, JavaScript, Linux, Docker, WordPress and the tech industry.

Let us know your thoughts on this show in the comments below — or on Twitter ([@thepracticaldev](https://twitter.com/thepracticaldev) ).

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple](https://podcasts.apple.com/us/podcast/s8-e7-all-hail-jquery-or-not/id1513053883?i=1000554957364)
- [Spotify](DevDiscuss
https://open.spotify.com/episode/0HJpLYhTUz54RaAmap6jgL)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s?sa=X&ved=0CAMQ4aUDahcKEwigh6Pdx932AhUAAAAAHQAAAAAQAQ)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss-dev-xtQvoDylAUg/)
- [Tune In](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=170597596)
- [RSS Feed](http://feeds.codenewbie.org/devdiscuss_podcast.xml)
- [DEV Pods Site](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/256)

> ### _Acknowledgements_ 
> - The wonderful _@levisharpe for producing & mixing the show_
> - _Our season eight sponsors: [Duckly](https://duckly.com/?utm_source=devdiscuss&utm_medium=podcast&utm_campaign=devdiscussseason8), [Compiler](https://link.chtbl.com/compiler?sid=podcast.devdiscuss), & [Scout APM](https://scoutapm.com/?utm_source=devdiscuss&utm_medium=podcast&utm_campaign=ad_q2_2021&utm_content=sponsored)!_

---

Thanks for tuning in to DevDiscuss! ❤️
Memory Process View Powershell
Tags: powershell, memory, process, devops
Published: 2022-03-24 01:56:43

**Get Memory usage in Percentage**
```scss
$CompObject =  Get-WmiObject -Class WIN32_OperatingSystem
$Memory = ((($CompObject.TotalVisibleMemorySize - $CompObject.FreePhysicalMemory)*100)/ $CompObject.TotalVisibleMemorySize)
 
Write-Host "Memory usage in Percentage:  " ([math]::round($Memory,2))"%"

```


**Top 5 process Memory Usage (MB)**
```scss
$processMemoryUsage = Get-WmiObject WIN32_PROCESS | Sort-Object -Property ws -Descending | Select-Object -first 10 processname, @{Name="Mem Usage(MB)";Expression={[math]::round($_.ws / 1mb)}}
$processMemoryUsage

```
How to Convert Epoch Timestamp to Date Using JavaScript
Tags: web3, frontend, solidity
Published: 2022-03-24 01:56:09

Being a relatively new language that ushered in the use of time in seconds, Solidity provides a global feature called **block.timestamp**. In this short piece, I explain how you can convert epoch timestamp emitted from your backend solidity contracts into appropriate date that includes day, month, year and time. 

The Unix Epoch dates back to 1st of January, 1970. This aided computer system globally in tracking time in relation to dated information. It has been widely adopted in many computer languages, dynamic applications and sophisticated ecosystem. 

Due to the _bignumberish_ state of the time generated, questions around how this will be used, especially for frontend web3 developers, lure many into a state of brainstorming. 

Here is the simple solution:
```
function getDate(x) {
   const myDate = new Date(x * 1000);
   return myDate;
}
```
The x passed into the above function is the epoch timestamp that comes in this form:

> 1601528702

It is multiplied by 1000 so as to convert it from milliseconds to seconds.

The return value from the code snippet above gives us a range of choice to make. This returns a full text string generated from your browser's time zone. We can thereafter convert these beads of texts to a locale string, to string, or if we are interested in the time zone representation, using the in-built JavaScript attributes. 

For better clarification, the following are possible manipulation.

```
 myDate.toLocaleString(); // '3/24/2022, 2:06:03 AM'
 myDate.toGMTString(); // 'Thu, 24 Mar 2022 01:06:03 GMT'
 myDate.toJSON(); // '2022-03-24T01:06:03.440Z'
 myDate.toDaateString(); // 'Thu Mar 24 2022'
```
You can do well to check out other inherent methods that JavaScript provides aside from the ones above.

Apart from block.timestamp that requires the expertise of developers to manipulate from the knowledge of clients and users of our decentralized application, there are other features such as the conversion of wei to ether, block.number, msg.data etc. 

I hope this helps. Keep enjoying your codes.
Material UI - Typography
Tags: webdev
Published: 2022-03-24 00:45:52

How to import
```js
import {Typography} from '@mui/material'
```
How to use
```js
<Typography 
  variant='h2' 
  component='h1'
  color='textSecondary'
>
  Some text here..
</Typography>
```
`variant` sets Typography components to be h2 tag in web page.
But there's a component prop.
`component='h1'`
This prop makes the tag to be `h1`.
But it will look like `h2` in the page.
The reason is variant prop makes the component inherits CSS properties from h2 tag.

so the Typography component will be h1 looking like h2.

color prop has a value, textSecondary.
This value name is set by MUI. They specified some color names.
Check the color names in the following link below.

Palette
https://mui.com/material-ui/customization/palette/#palette-colors

Color
https://mui.com/material-ui/customization/color/#2014-material-design-color-palettes
Material UI - Install
Tags: webdev
Published: 2022-03-24 00:33:27

Material UI (MUI) Install

Basic libraries
```
@emotion/styled
@emotion/react

@mui/material
```
I needed 3 libraries to use material UI.
`@mul/material` includes bunch of MUI components.
`emotion` supports customized React components and MUI uses `emotion`s components.

That's why I needed to install emotion libraries to use MUI components.

How to import components from MUI then?
```js
import {Typography} from '@mui/material'
```

There's one more thing.
**MUI icons**
To use Icons, I needed to install this library.
```
@mui/icons-material
```

How to import icons from the library
```js
import {SendIcon} from '@mui/icons-material'
```
```js
import SendIcon from '@mui/icons-material/Send'
```
Check the full list of MUI icons here!
https://mui.com/components/material-icons/

Check the list of MUI components here!
https://mui.com/material-ui/getting-started/supported-components/#main-content

A code example
```js
import {Button} from '@mui/material'
import SendIcon from '@mui/icons-material/Send'

export default function App() {
  return (
    <Button 
      startIcon={<SendIcon/>
    }>
      Button
    </Button>
  )
}
```
Output:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jweus18b8uxeehdxowg8.png)
LimaCharlie announces sponsorship of the Intel Owl open source project
Tags: security, opensource
Published: 2022-07-20 17:39:01

---
title: LimaCharlie announces sponsorship of the Intel Owl open source project
published: true
date: 2022-03-24 00:00:00 UTC
tags: security, opensource
canonical_url: https://www.limacharlie.io/blog/limacharlie-sponsors-intel-owl
---

Following our [<u>recent announcement</u>](https://limacharlie.io/blog/open-source-sponsorship) about supporting the open source community, LimaCharlie is excited to share that we have decided to sponsor the [<u>IntelOwl</u>](https://intelowlproject.github.io/#:~:text=the%20right%20place!-,Intel%20Owl%20is%20an%20Open%20Source%20Intelligence%2C%20or%20OSINT%20solution,a%20specific%20file%20or%20observable) project. 

To quote [<u>Matteo Lodi</u>](https://twitter.com/matte_lodi), the IntelOwl author and creator, 

_"Only 2 years ago Intel Owl was born with a specific goal: help the community of security analysts and researchers to get the threat data they need fast and easy. We really felt the struggle of people working in security and decided to share this application. Since then, it has been growing more and more, supporting more than 100 analyzers! Some of which are malware analysis tools embedded in the platform, while others allow to automate the retrieval of information from external services. You can get all the data from them at once. Moreover, we understood that this time saver application would benefit from being directly connected and integrated to other widely used open source applications, like MISP: so we created connectors for them._type: embedded-entry-inline id: 70lQcde5LEvSfZtzBHTVt7

_But we are not done! We have been working on a complete graphical rework for the upcoming v4 release and we have been planning to add awesome investigative tools to the platform._

_This was the time where we met LimaCharlie and we found that we share the same ethic and vision. We are thrilled to start a long lasting collaboration together!”_

The LimaCharlie team is honored to support IntelOwl and we are looking forward to planning a deeper integration in the future. 

Get started with IntelOwl on [<u>GitHub</u>](https://github.com/intelowlproject/IntelOwl) or follow their work on [<u>Twitter</u>](https://twitter.com/intel_owl).