teleren/devto huggingface dataset:
Build Responsive Landing Page design with HTML & TailwindCSS
Tags: html, css, tailwindcss, tutorial
Published: 2021-03-30 13:14:36

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esa5ejfd54dnafva5w7j.png)


###Knowledge
This video is about the Landing Page UI design with **responsive Landing Page Design with HTML & TailwindCSS**, with Some Little CSS & **Javascript Animations using GSAP Library** as well, Responsive web design is simple but not easy, but in this, we went some little concepts clear about the Responsive landing Design !

###Outline
0:00​ : Intro
0:11​ : Preview
1:34​ : Navbar
4:37​ : Mobile Navbar
5:21​ : Body
14:28​ : Mobile Menu Script
16:27​ : GSAP Animations
Azure Devops Build Pipelines Classic tutorial
Tags: devops, tutorial, cicd, beginners
Published: 2021-03-30 13:11:28

{% youtube 0d6acAH5InE %}

This video is a introductory tutorial to Azure Devops Build Pipelines Classic. Classic pipelines are the only option when using TFVC code source. You can still use it with Git Repos, but YML is recommended for GIT as it has great features such as checking in to GIT repo itself. 

I cover all the options provided to you for Classic Pipeline and do not go into any specifics with the intent that I show you the why and what, so you can solve the "how" to solve your specific pipeline approach.
nfs mount参数汇总
Published: 2021-03-30 12:56:55

## mount nfs参数：
mount的参数对存储的性能有很大的影响。 下面是一些基本的mount参数，大家可以参考。 
HARD mount和SOFT MOUNT： 
HARD: NFS CLIENT会不断的尝试与SERVER的连接（在后台，不会给出任何提示信息,在LINUX下有的版本仍然会给出一些提示），直到MOUNT上。 

SOFT:会在前台尝试与SERVER的连接，是默认的连接方式。当收到错误信息后终止mount尝试，并给出相关信息。 

例如：mount -F nfs -o hard 192.168.0.10:/nfs /nfs 
对于到底是使用hard还是soft的问题，这主要取决于你访问什么信息有关。

例如你是想通过NFS来运行X PROGRAM的话，你绝对不会希望由于一些意外的情况（如网络速度一下子变的很慢，插拔了一下网卡插头等）而使系统输出大量的错误信息，如果此时你用的是HARD方式的话，系统就会等待，直到能够重新与NFS SERVER建立连接传输信息。另外如果是非关键数据的话也可以使用SOFT方式，如FTP数据等，这样在远程机器暂时连接不上或关闭时就不会挂起你的会话过程。 

 1. rsize和wsize：  文件传输尺寸设定：V3没有限定传输尺寸，V2最多只能设定为8k，可以使用-rsize and -wsize  来进行设定。这两个参数的设定对于NFS的执行效能有较大的影响    
 2. bg：在执行mount时如果无法顺利mount上时，系统会将mount的操作转移到后台并继续尝试mount，直到mount成功为止。（通常在设定/etc/fstab文件时都应该使用bg，以避免可能的mount不上而影响启动速度）
 3.  fg：和bg正好相反，是默认的参数    
 4. nfsvers＝n:设定要使用的NFS版本，默认是使用2，这个选项的设定还要取决于server端是否支持NFS VER 3    
 5. mountport：设定mount的端口    
 6. port：根据server端export出的端口设定，例如如果server使用5555端口输出NFS,那客户端就需要使用这个参数进行同样的设定
 7. timeo=n:设置超时时间，当数据传输遇到问题时，会根据这个参数尝试进行重新传输。默认值是7/10妙（0.7秒）。如果网络连接不是很稳定的话就要加大这个数值，并且推荐使用HARD MOUNT方式，同时最好也加上INTR参数，这样你就可以终止任何挂起的文件访问。     [更多的关于timeo的信息](https://www.howtouselinux.com/post/understanding-timeo-in-nfs)
 8. intr 允许通知中断一个NFS调用。当服务器没有应答需要放弃的时候有用处。  udp：使用udp作为nfs的传输协议（NFS   V2只支持UDP)  tcp：使用tcp作为nfs的传输协议  
 9. namlen=n：设定远程服务器所允许的最长文件名。这个值的默认是25
 10. acregmin=n：设定最小的在文件更新之前cache时间，默认是3    
 11. acregmax=n：设定最大的在文件更新之前cache时间，默认是60    
 12. acdirmin=n：设定最小的在目录更新之前cache时间，默认是30    
 13. acdirmax=n：设定最大的在目录更新之前cache时间，默认是60    
 14. actimeo=n：将acregmin、acregmax、acdirmin、acdirmax设定为同一个数值，默认是没有启用。   这个参数也是对性能有很大的影响。没必要的话，可以不要打开。 可以看这个帖子了解更多[actimeo的对性能的影响](https://www.howtouselinux.com/post/what-does-actime-0-mean-during-nfs-mount-in-linux)
 15. retry=n：设定当网络传输出现故障的时候，尝试重新连接多少时间后不再尝试。默认的数值是10000 minutes    
 16. noac:关闭cache机制。  


同时使用多个参数的方法：mount -t nfs -o timeo=3,udp,hard 192.168.0.30:/tmp /nfs  请注意，NFS客户机和服务器的选项并不一定完全相同，而且有的时候会有冲突。比如说服务器以只读的方式导出，客户端却以可写的方式mount,虽然可以成功mount上，但尝试写入的时候就会发生错误。一般服务器和客户端配置冲突的时候，会以服务器的配置为准。

## 如何测试nfs存储性能
我们可以用dd命令来向nfs存储中写入一些数据来查看存储的性能。 更多的细节可以参考这个帖子。[如何用dd命令来测试nfs性能](https://www.howtouselinux.com/post/how-to-test-nfs-performance-on-linux)

然后我们可以用
[Using Linux nfsiostat to troubleshoot nfs performance issue](https://www.howtouselinux.com/post/use-linux-nfsiostat-to-troubleshoot-nfs-performance-issue)。 具体的可以参考这个帖子。
Vue JS - Diferencias entre Computed y Watch
Published: 2021-03-30 12:50:43

Cuando empezaba a programar con Vue y tenía que reaccionar a cambios, siempre me hacía la misma pregunta: ¿computed o watch? 🤔️. Ambos parecen hacer lo mismo, ¿cierto?. Sin embargo, una propiedad computada puede ser mejor que un watch en algunos casos o viceversa.

**Computed**

Podemos pensar en una propiedad computada como una propiedad (como las que retornamos en el data), pero con la diferencia de que Vue puede evaluar automáticamente su valor cada vez que una de sus dependencias cambia. Ej.:


```javascript
computed: {
  total() {
    return this.precio * this.cantidad;
  }
}
``` 
El valor de la propiedad `total` será calculado cada vez que cambie el `precio` o la `cantidad`.

**Watch**

Un watcher es básicamente una función que se ejecuta automáticamente cuando la propiedad observada cambia. Si tomamos el ejemplo anterior, podríamos hacerlo de la siguiente forma con watchers:


```javascript
watch: {
  cantidad(val) {
    this.total = this.precio * val;
  },
  precio(val) {
    this.total = this.cantidad * val;
  }
}

``` 
El resultado final es el mismo, pero la solución con watchers es repetitiva. Si el valor de la propiedad `total` también dependiera del `impuesto`, tendríamos que observar una tercera propiedad. Esta es la principal razón por la que es mejor idea utilizar una propiedad computada.

Si bien las propiedades computadas son más apropiadas en la mayoría de los casos, los watchers son más poderosos y nos permiten realizar operaciones complejas como llamadas http o ejecutar alguna lógica asíncrona que no sería posible con una propiedad computada.

Supongamos que queremos obtener las películas en donde actuó un determinado actor. Podríamos hacerlo de la siguiente forma:

```javascript
export default {
  data() {
    return {
      actorId: null,
      movies: [],
    };
  },
  methods: {
    getMovies() {
      // http request
      axios.get(`movies/actor/${this.actorId}`)
      .then(resp => {
        this.movies = resp.data;
      });
    }
  },
  watch: {
    actorId(val) {
      if(val) this.getMovies();
    }
  }
}
``` 

Observamos la propiedad `actorId` para que siempre que cambie de valor, llamemos una API que nos devolverá las películas relacionadas al actor.


**Conclusión**

Es mejor idea pensar en una propiedad computada siempre que necesitemos calcular un valor en función a otras propiedades, teniendo en cuenta que Vue volverá a evaluar la propiedad cada vez que alguna de sus dependencias cambie y no necesitaremos un watch personalizado por cada dependencia. Pero un watch sería mejor si en cambio necesitamos realizar algo más complejo como llamadas http, configurar un timer o guardar datos en el local storage.
Day 25 of 365 Days of Code
Tags: javascript, react, rsuite, graphql
Published: 2021-03-30 12:44:46


I came across a peculiar problem in my react application. The change handler of an input field was not passing the event object, rather only the value of the field was getting passed. I'm using rsuite and I think it uses Semantic-UI components somewhere, not sure, need to check more on this. Long story short, I fixed it by using the second argument of the handler function, didn’t know that existed.
```
//old version
const handleChange=(event)=>{
      console(event.target) // undefined
      console(event) // value of the object which should otherwise be event.target.value
}
```
```
//new version
const handleChange=(value, event)=>{
...
}
```

Also, I'm changing the challenge name to 30 days of Code. It looks rather achievable :P
Farewell to TenFourFox
Tags: powerpc, mac, firefox, retro
Published: 2021-03-30 12:24:39

---
canonical_url: https://sjhannah.com/blog/2021/03/30/farewell-to-tenfourfox/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg0xyu3zz8uewh3avebr.jpeg
description: Good bye TenFourFox.  You are one of the good ones.
published: true
---
I was saddened by the [news][1] that development on [TenFourFox][2], the Firefox port for Mac OS X 10.4, will be ending with its upcoming release.

I keep several old Power Macs running 10.4 (which is the last version that will run Classic), and the TenFourFox browser is a staple of my "bootstrap" CD. I don't use it much, as browsing the web on these old Machines is pretty slow, but it gave me joy just knowing that somewhere out there, someone was keeping the flame of these old computers alive. I liken this feeling to knowing that my childhood home is still lived in by my parents - the feeling that if I returned to visit, everything would be there as I left it, and I could, if only for a brief moment, be a child again.

To the developer behind TenFourFox, I'd like to wish you the best in your retirement. Thank you for your service all these years.

 [1]: https://tenfourfox.blogspot.com/2020/04/the-end-of-tenfourfox-and-what-ive.html
 [2]: http://www.floodgap.com/software/tenfourfox/
Daily Developer Jokes - Tuesday, Mar 30, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-30 12:00:21

---
title: "Daily Developer Jokes - Tuesday, Mar 30, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Mar%2030%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12598c9c711.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why are machine learning models so fit?

___A:___ Because they do weight training.
 -->
2021: Top 5 Linux distros for beginners
Tags: linux, beginners, opensource, os
Published: 2021-03-30 11:45:21


## 1. Ubuntu

Ubuntu has always been first choice for almost every beginner to Linux world. Its easy to install, with good GUI. It is based on Debian. It is composed mostly of free and open-source software. Ubuntu is officially released in three editions: Desktop, Server, and Core for Internet of things devices and robots. All the editions can run on the computer alone, or in a virtual machine. You can download it from  [Official Ubuntu Website](https://ubuntu.com/).

## 2. Zorin OS

I personally recommend this OS to everyone to try at least one time. It is super productive OS built on top of Ubuntu. It's Lite version is also available that runs smooth on older machines. I have ran them on machines having 1.5GB RAM and they worked fine. It is astonishing to see how software runs smoothly on the these older machines giving you modern experience. The Zorin Core OS also has phone connectivity feature through which you can control laptop through your smartphone, share the files from and to phone,can use smartphones keyboard to type on laptop also you can control mouse using smartphone's screen. You can download it from  [Official Zorin Website](https://zorinos.com/).

## 3. Elementory OS

Elementory OS in simple words can be described as open-source alternative which gives you feel of using macOS. Elementary OS is a Linux distribution based on Ubuntu LTS. It promotes itself as a “fast, open, and privacy-respecting” replacement to macOS and Windows and has a pay-what-you-want model. The operating system, the desktop environment, and accompanying applications are developed and maintained by Elementary, Inc. You can download it from  [Official Elementory Website](https://elementary.io/).

## 4. Kali Linux

When you heard of Kali Linux most of you might remember the hacking scenes from movies but actually Kali Linux is a lot more useful distro to understand the the underlying working of an operating system. Even if you are not interested in Ethical hacking every programmer must try this distro at once to know more about networks and other related stuff.Kali Linux is a Debian-based Linux distribution geared towards various information security tasks, such as Penetration Testing, Security Research, Computer Forensics and Reverse Engineering. You can download it from  [Official Kali Linux Website](https://write.geeksforgeeks.org/preview/ali%20Linux%20is%20a%20Debian-based%20Linux%20distribution%20geared%20towards%20various%20information%20security%20tasks,%20such%20as%20Penetration%20Testing,%20Security%20Research,%20Computer%20Forensics%20and%20Reverse%20Engineering).

## 5. MX Linux

MX Linux is a popular distro among programmers due to its lightning speed and Graphics. It's popular because it makes Debian more user friendly for beginning to intermediate (Not so much “non technical”) Linux users. It has newer packages from Debian backports repos; vanilla Debian uses older packages. MX users also benefit from custom tools which are great time savers. You can download it from [Official  MX Linux Website](https://mxlinux.org/).
Context Menu Malware Scanner using Python
Tags: programming, python, github, security
Published: 2021-03-30 11:41:10

#### What is this?
*Windows Context Menu Scanner[WCMS]* helps you scan suspicious files for malware with just a right-click.The scanner is integrated right into the Windows Context Menu so you can Scan the file quickly.
#### How it Works?
Currently the scanner uses virustotal API to identify malware.When you right-click to Scan a file a lot is going on under the hood.The flowchart shown below puts it in simple words.
<img src="https://raw.githubusercontent.com/Rutuj-Runwal/Context-Menu-Scanner/main/WCMS%20Images/Under%20The%20Hood.jpg"></img>
#### How will it be helpful?
Anti-virus softwares are great but at the same time are complicated to use and they hog a lot of memory.An average user wants something faster and lighter.WCMS is capable of scanning many file types without slowing you down.Just right-click and the results appear instantly.

#### Is that it?
No, I am currently working on this project and there will be several improvements<b>[For Suggestions and Contributions: <a href="https://www.linkedin.com/in/rutuj-runwal/">Linkedin</a> ]</b>.Here are some of my plans:
Future Development
- Adding Signatureless Offline Detection.
- Using Datasets to Predict Samples
- Adding better offline Analysis techniques: <a href="https://storage.googleapis.com/kaggle-forum-message-attachments/1028064/17136/description.pdf">Techniques</a>
- Building realtime predictions about files using machine learning
- A kind of "Heuristic analysis" that checks executable for size modification using earlier saved data[In form of TXT maybe]


Read More <a href="https://www.gyaanibuddy.com/blog/creating-a-windows-context-malware-scanner-using-python/">Here</a>
Source code can be viewed at <a href="https://github.com/Rutuj-Runwal/Context-Menu-Scanner/tree/main/Source%20Code">Github</a>
Let's Connect: <a href="https://bit.ly/let_us_connect">Linkedin</a> 
Thank you guys 😇
Cheers!
Simple confirm delete with HTML & CSS
Tags: html, css, webdev
Published: 2021-03-30 11:40:55

Hello, today I created this simple confirm delete layout using HTML & CSS I hope you like also comments your thoughts. For more content follow me on Instagram @developer_nikhil27.
Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/abpBzJr %}
First ever post!!!
Published: 2021-03-30 11:35:48

Hello World,
My name's Hunter, I'm not an expert in anything to be honest I find clarity and peace of mind when presented with complex problems. So computers and electronics have always been my favourite things in the world. I've travelled the world, been down many contradicting paths and at times disliked the path I lead myself toward. I recently joined Flatiron School with the intent on giving my life some meaning and structure and I feel like I finally made the right choice.
Google Announces Flutter 2.0 For The Web And Desktop Apps
Tags: flutter, android, ios, devjournal
Published: 2021-03-30 11:31:25

On March 3, the search engine giant Google has released a stable version of Flutter 2.0, one of the most desperately awaited stables releases of Flutter. The team of developers has revealed the primary goal behind bringing Flutter 2 is to enable Flutter app developers to build a robust application with an unmatchable experience. You may raise the question- what makes Flutter 2.0 so special? Read on to get your answer!

Flutter 2.0- What’s New, What’s Better?

With the launch of Flutter 2.0, developers have closed over 24000 issues and merged 17.039 PRs from over 765 contributors. Even volunteer PR reviewers have done a good job and reviewed 1525 PRs. Talking about the new features, Flutter 2.0 has come up with support for web and desktop app development.

Since its initial release, Flutter has remained a preferred choice of developers worldwide. The developer community of Flutter will soon cross 500,000 members. As the platform has gained the title of the developer’s homeland, with the announcement of the Flutter 2.0 version, its thriving community has changed the name from DevTools to FlutterDevTools.

Let’s understand the major features and fixes of the latest Flutter version along with its impact on mobile app development services.

Support for Web

You can [hire Flutter developers](https://www.suriainternational.com/flutter-app-development-company/) for developing web and desktop apps as well. Yes, the stable Flutter 2.0 release has made it possible by extending support for the web platform. With this, Google’s Flutter has taken the code reusability to another level. Flutter 2.0 release is significant as it has changed its document-centric approach to the app-centric approach. Now, when you hire Flutter developers they can build apps on the web platforms including Safari, Chrome, and Firefox, and develop web applications as well.

With this Flutter 2.0 offers enhanced APIs for developing interactive 2D and 3D graphics. A Canvas-Kit-based renderer will accompany the existing HTML renderer in the latest version. A Link widget enables developers to get a web-app-like feel in the browser they choose.

Read More: https://www.suriainternational.com/flutter-2-0/
Trap focus in react
Tags: react, modal, focus, a11y
Published: 2021-03-30 11:20:25


Use following `keyDownHandler` on `div` you want to trap focus

```js

  const keyDownHandler = (e) => {
    // only execute if tab is pressed
    if (e.key !== 'Tab') return

    // here we query all focusable elements, customize as your own need
    const focusableModalElements = modalRef.current.querySelectorAll(
      'a[href], button:not([disabled]), textarea, input, select'
    )

    const firstElement = focusableModalElements[0]
    const lastElement =
      focusableModalElements[focusableModalElements.length - 1]

    // if going forward by pressing tab and lastElement is active shift focus to first focusable element 
    if (!e.shiftKey && document.activeElement === lastElement) {
      firstElement.focus()
      return e.preventDefault()
    }

    // if going backward by pressing tab and firstElement is active shift focus to last focusable element 
    if (e.shiftKey && document.activeElement === firstElement) {
      lastElement.focus()
      e.preventDefault()
    }
  }

```
How to handle impostor syndrome as a developer with actionable steps
Tags: beginners, programming, codenewbie
Published: 2021-03-30 11:11:27

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

## 1. What is impostor syndrome?

It's the feeling that whatever job you're in, you're not qualified for it and got the position due to a fluke.

And you're afraid that people are to figure out any minute that you're just an impostor who has no clue what you're doing.

## 2. You're not the only programmer that has the impostor syndrome

Understanding this can help you a lot

Junior developers have it

Senior developers have it too

This is something that every developer felt at least once during his journey. You are not alone.

## 3. You need to build confidence

The reason behind your impostor syndrome is that you're not confident enough in your skills

So how can you solve this?

-build your side projects
-build an audience online
-get a small freelance job
-share your work online

## 4. Take some time and see how many things you achieved so far

Always keep track of your achievements

Think about where you were one year ago?

100% of the times you'll see an improvement

This means that you're on the right path

## 5. Understand that nobody expects you to know everything

If you're just starting out: ASK QUESTIONS

Asking for help is okay. Why?

This demonstrates that you have an open mindset and are willing to learn and adapt

## 6. Pick something and practice it, regularly

Do you feel that you don't know JavaScript?

Practice it more. Build a few side projects

Do this for a month and then take a look back

You'll see an improvement (which will boost your confidence)

## 7. Become a mentor and teach others

Most of the times we take the things we already know for granted

Teaching someone that is just starting out (or is less experienced than you)

By doing this you realize how many things you know and how good you are at what you do

## 8. You are awesome

Do you know how to create a website? That's awesome

Congrats on that. Always celebrate your wins no matter how small they are

I believe that you're awesome and that you can handle impostor syndrome

Keep going!

## The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._