teleren/devto huggingface dataset:
Creating a LockScreen UI using Shimmer effect for text.
Tags: flutter, dart, beginners, learning
Published: 2020-11-05 06:29:31

In this tutorial,We are going to design UI for a lockscreen using shimmer effect.Being an app developer you might have come across situations where you need to design a UI with amazing text effects.So that's where Shimmer effect comes into picture.

![](https://media.giphy.com/media/l0DAHAQ3Ex4XbL1ni/giphy.gif)

So first of all,we need to install the shimmer package by adding the following code under dependencies in pubspec.yaml file as shown below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tpa8amgkdtg109f0bjwp.PNG)

Now save the file and go to main.dart file and import the shimmer package using

**import "package:shimmer/shimmer.dart";**

In our UI we are going to display the date and time on the wallpaper and then at the end of the screen we will show "swipe to unlock".

So let's begin.

We will delete the code in **MyHomePage()** Class and define that class in the way we want.So we will return a **Card Widget** within Container which will have a child as an **Stack Widget** since we want to display one widget over the other (Text over Image) So in children: we will first display the image.

{% gist https://gist.github.com/namita2310/963cb40cbd1587d3fc061d81f46d650f %}

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

Now we need to add time ,date and day in between on the image.So we will use **Padding Widget** to have some padding and then use **Text Widget** to show day,date and time.Here I have directly written the date,day and time.But you can format the time,date etc. using **intl package**.(You can learn about how to use intl package from [here](https://pub.dev/packages/intl).)

{% gist https://gist.github.com/namita2310/afca215ea52ab84478148cdec19f968d %}

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


Now we will use shimmer effect on text "Swipe to unlock".The syntax for using it is **Shimmer.fromColors()** where you need to define the baseColor,highlightColor, child. So now we will wrap the text widget within the padding widget so that the text appears at bottom of screen and we will also format the text using fontSize and fontStyle as shown below.

{% gist https://gist.github.com/namita2310/c9d27ef10a0c6b52804aa7319a279b50.js %}



This is the final code for main.dart

{% gist https://gist.github.com/namita2310/fd37081bccda784fb586d0f94457c482 %}

![Shimmer effect](https://dev-to-uploads.s3.amazonaws.com/i/6v2cen3amjrhvtlhm6jv.gif)

You can also watch my video tutorial if you like learning from videos:)

{% youtube ta_RwTBTlKc %}

_If you found this tutorial useful, you know what to do now. Hit that like button and follow me to get more articles and tutorials on your feed.❤❤_
I recreated Dani's website
Published: 2020-11-05 06:09:39

---
title:I recreated Dani's website
published: true
date: 2020-11-05 06:06:59 UTC
tags: 
canonical_url: https://rss.app/articles/cb4e791f6f6d729c04434f0c6dd3b18f020a5e221032fdf38dd682198d886ec4e313834e308d803cecf13520824151d723ca32be964d2c4c9462aa21d4910869c2f230b6cae721ece19d12b229eb3906963100
---

Hey fellas,I recreated dani's website cause the original was a little bit boring.

 

Original Link: https://danidev.net/

 

My Version: https://dani-updated.netlify.app/

 

Source Code: https://github.com/IronManCool001/dani-updated
I created a covid notification system for windows10
Published: 2020-11-05 06:08:38

---
title:I created a covid notification system for windows10
published: true
date: 2020-11-05 06:05:59 UTC
tags: 
canonical_url: https://rss.app/articles/cb4e791f6f6d729c04434f0c6dd3b18f020a5e221032fdf38dd682198d886ec4e313834e308d803cecf13520824151d723ca32be964d7a469462aa30c3971b78c6e20ab3cae02ff4e18a12ab23fd23098b374e1c5a03f3ccbbc0644dccdf89a4d5ded6
---



I made a covid notification system using python.

 

Link to code: https://github.com/IronManCool001/Covid-Win10-Notifier
Python is a Superpower. Industries that are using Python today
Tags: python, blockchain, django, hacking
Published: 2020-11-05 05:36:09

Python language has proved to be the Superpower of computing these days. Even when a lot of critics come out to speak against it, it still persists and infact grows even stronger, why is that?
First of all, python has the easiest syntax in the world, it's literally just plain text. So it's easy to grasp.
Secondly, it doesn't have a lot of tricks behind it, you can literally master the whole entire python language in a matter of days.
Thirdly, Python is not really that fast, but the power it has to be highly extensible and embeddable adds extra boost to it's speed using tools like cython.

For that reason, Python has been used in very many industries, here's a afew.
As a graphics major, python has become the de facto language for graphics scripting with industry standard software such as Houdini, Autodesk Maya, 3DsMax, Blender and so many others use Python for scripting.
Google's search is actually built with python.
Almost all Artificial intelligence tools today are built with Python including Tensorflow and Pytorch which are the leading standards.
Reports have also noted a large increase in malicious software written in Python, this means that system security and encryption is being developed and tested in Python these days.
Python is coming to mobile, with open source projects like Kivy and BeeWare pushing the boundaries to Port Python to all the major mobile operating systems. You can actually build mobile apps with Kivy or BeeWare's Toga.
Game scripting is now days done with Python, the most famous is EveOnline built with stackless python.
I could go on and on but I beg to end here, you can include more industries that use Python in the comments below
Array.some()
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-11-05 05:32:36

Check if 1 or more elements in the array are greater that `0` using `.some()`.
```js
const arr = [1, 2, -1, 4, -5];

const someGreaterThanZero = arr.some(number => number > 0);
console.log(someGreaterThanZero); // true
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Changing the text selection color with CSS
Tags: css
Published: 2020-11-05 05:24:27

Did you know there is a CSS property that can change the user selection behavior?

It got some quite good support lately and is one of these cool gimmicks to have. It doesn't break anything for the browser that doesn't support it.

The end result will look like this.

![CSS Selection selector](https://cdn.hashnode.com/res/hashnode/image/upload/v1604210622068/L3DOj1XcS.gif)

## HTML Structure

For our demo, we will have multiple paragraphs that will each do something different.

```html
<div>
  <h3>Select this paragraph in yellow marker</h3>
  <p class="yellow">Content here</p>
</div>

<div>
  <h3>Select this paragraph in black/white</h3>
  <p class="black">Content here</p>
</div>

<div>
  <h3>Select this paragraph in shadow text</h3>
  <p class="shadow">Content here</p>
</div>
```

## CSS Selection selector

Now we are going to use the selection attribute selector.

The default selector is written like this:

```css
::selection {
  color: red;
}
```

Then we can add a Mozilla specific one:

```css
::-moz-selection {
  color: red;
}
```

For our instance let's start with the yellow marker one:

```css
p.yellow::selection {
  background: #FFFF00;
}
p.yellow::-moz-selection {
  background: #FFFF00;
}
```

This will make the background of the selection a yellow color.

Now if we move on to our black and white selector:

```css
p.black::selection {
  background: #000;
  color: #fff;
}
p.black::-moz-selection {
  background: #000;
  color: #fff;
}
```

This will make the background black and the text color white.

Lastly I wanted to show you can do more then basic color selection and even add a text-shadow!

```css
p.shadow::selection {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
p.shadow::-moz-selection {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
```

Have a play around on this Codepen.

{% codepen https://codepen.io/rebelchris/pen/jOrxWMq %}

## Browser Support

The browser support for the `::selection` has really improved lately, and it can be used safely.

![CSS selection support](https://caniuse.bitsofco.de/image/css-selection.png)

### 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)
Release @nxtend/ionic-react 4.0.0
Tags: ionic, react, nx, webdev
Published: 2020-11-05 03:00:20

---
published: true
title: 'Release @nxtend/ionic-react 4.0.0'
cover_image:
description:
tags: ionic, react, nx, webdev
series:
canonical_url: https://nxtend.dev/blog/ionic-react-4.0.0/
---

Nxtend Ionic React v4 includes typical quality of life fixes with dependency updates, but has some breaking changes to the API. These changes will improve the maintainability of this project and will help prepare the plugin for future capabilities. For more details on these changes, read below.

## Features

- update Ionic to 5.4.1
- add `ionic.config.json` to application
- update starter template

## BREAKING CHANGES

- don't install and configure Cypress Testing Library
- removed `disableSanitizer` flag from `application` schematic

<!--truncate-->

One of the major changes of this release is that `@nxtend/ionic-react` will no longer add and configure Cypress Testing Library dependencies. We are big fans of the project, but maintaining the dependencies and breaking changes has become more effort than it's worth for this plugin. If you are generating a new project then I would highly recommend you configure this yourself. If you need help getting started, then please visit the [official documentation](https://testing-library.com/docs/cypress-testing-library/intro).

The latest updates from the Ionic React blank starter template have also been added to the plugin.

The `disableSanitizer` flag has been removed from the `application` schematic. This plugin supports many permutations due to the amount of configuration options when generating an application, and as many of these permutations are end-to-end testing as much as possible. Every new option that is added increases the level of maintenance required as well as the test times, and at this point, it does not seem worth it to continue supporting the `disableSanitizer` flag. The built-in Ionic sanitizer should only be disabled unless it explicitely needs to, and this process is well documented in the official [Ionic documentation](https://ionicframework.com/docs/techniques/security#ejecting-from-the-built-in-sanitizer).

Nxtend Capacitor has also been [updated](https://nxtend.dev/blog/capacitor-2.0.2), so it is recommended you update that plugin as well.

For information on upgrading the plugin, visit the [nxtend upgrades documentation](https://nxtend.dev/docs/nxtend/upgrades).
Should I consider ASP.NET to build a high traffic site?
Tags: career, tutorial, computerscience, dotnet
Published: 2020-11-05 05:18:48

Yes, you should considered asp-dotnet for developing a website for your enterprise mobility solutions, There are great opportunity in developing a website with ASP.NET sites . With tremendous change in the market Microsoft have developed a great framework created by ASP.NET. Let’s know some more facts and advantages of aspdotnet

ASPDOTNET is best in coding with making it short in developing large applications

With the combination of HTML .net generates a great web pages for websites

Being Ideal server scripting languages it first runs on windows server and after that other browser

Best compatible with any programming languages with integration and to deploy

In-build configuration information for aspdotnet is easy to deploy

Multiple windows web server monitors the web page, multiple components and applications

Fast alert on coding standards with memory leaks, unbounded loops, and other long behavior of the website

Native support with caching services which gives you high application with performance

It is highly monitored and managed to help application available to handle requests

In build caching features with best framework.

Aspdotnet also provides support for xml and CSS and new as well as established web standards.

This are some good advantages of aspdotnet if you need more in-depth details on how to make a create website ask to expert aspnet developers who will guide you with the best solution and make your business shine on the web.

Meet The Experts : https://nareshit.com/asp-net-mvc-online-training/
Best library for working with Forms in React
Tags: react, javascript, codenewbie
Published: 2020-11-05 05:07:29

### Introduction

Working with forms in React is a complex task.

And it just gets more complex when the number of input fields increases along with the validations.

But fortunately, there are libraries like `react-hook-form` to help you out.

`react-hook-form` is becoming a popular choice for building forms instead of `formik`, `redux-form`, etc.

This is because you don't have to write a lot of code for doing simple as well as complex things and the performance of your app also increases.

**Check out my article below to learn about how easily you can create simple as well as complex forms in React without the need of managing state yourself.**

{% twitter 1323626495932272640 %}


-------

**Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox [here](https://yogeshchavan.dev).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)
Those who transitioned from management to technical role, what is your reason and how well the transition was?
Tags: discuss, help
Published: 2020-11-05 04:35:05

I did this transition early this year. I was in a tech lead/manager/pre-sales engineer mix of roles for around 3 years, and planned to focus on a pure technical role. 

Opportunity arise around August, and I made a switch to another company as a software engineer, despite the quarantine and the market uncertainty. 

I am wondering how it has been for you guys who experienced the similar situation with me. Maybe you could share some of your issues and your tips with me. 

Please share your story, and thanks!
inline-size explained : CSS
Tags: css, webdev, html, javascript
Published: 2020-11-05 04:22:10

The `inline-size` property in CSS is used to define the horizontal or vertical size of an element’s block. So here is my latest blog post on `inline-size` property. 

If the writing mode is vertically oriented, the value of `inline-size` relates to the height of the element; otherwise, it relates to the **width **of the element. A related property is `block-size`, which defines the other dimension of the element.


> The main purpose of `inline-size` property is that designing of the website. 

### Syntax

```css

inline-size: length, percentage, auto, inherit, initial, unset
writing-mode: ;  /* vertical-lr  or horizantal-lr*/
```

### DEMO


```html
<div class="container">
  <header>
    <h1> vertical heading</h1>
  </header>
  <main>
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit atque molestias et voluptatum recusandae nobis eos, tempore incidunt quidem molestiae hic similique quisquam soluta officia? Alias maiores possimus velit assumenda?</p>
   
  </main>
</div>
```

And the CSS goes like this.....

```css
 .container {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column-gap: 4rem;
}

header {
  writing-mode: vertical-lr;
  background: #f1f;
}

h2 {
  margin-block-start: 4rem;
}

h1 {
  margin-inline-start: 4rem;
  margin-block-start: 2rem;
  margin-block-end: 2rem;
}

```
<iframe height="265" style="width: 100%;" scrolling="no" title="RwRKQNr" src="https://codepen.io/rahxuls/embed/RwRKQNr?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/rahxuls/pen/RwRKQNr'>RwRKQNr</a> by rahxuls
  (<a href='https://codepen.io/rahxuls'>@rahxuls</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## Values

Here are some values you can use when designing like pro. 

```css

/* Length values */
inline-size: 250px;
inline-size: 5rem;
 
/* Percentage values */
inline-size: 75%;
 
/* Keyword values */
inline-size: auto;
inline-size: fit-content(5rem);
inline-size: max-content;
inline-size: min-content;
 
/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;
```
<hr>
- **fit-content()**: The `fit-content()` property use to defined function to put a limit on the maximum size of the division. 

- **max-content**: It is a keyword that represents a value, the preferred intrinsic width of an element, or the preferred intrinsic height of an element.

- **min-content**: The `min-content` keyword represents the minimum value of the **width **without **overflowing **the contents of the element horizontally.
 
- **unset**: The `unset` CSS keyword resets a property to its inherited value if the property naturally inherits from its **parent**, and to its initial value if not.
<hr>
Get the [daily.dev](https://api.daily.dev/get?r=rahxuls)  extesnsion for busy developers. 
<hr>
Thanks
Thanks for reading
Hope it's useful for you 
`LIKE` -> `SHARE` -> `SUBSCRIBE`
Day 5 of 100 Days of Code
Tags: 100daysofcode, html, css, braziliandevs
Published: 2020-11-05 03:53:48

# Hey everyone!

Today i created a new page for this [project][repo] called "products" i created the HTML and CSS based on a video course from [alura](https://www.alura.com.br/). The result is way better from yesterday hehe

Hope you enjoy :)

### Connect with me:

[<img alt="ricardo.digital" width="22px" src="https://img.icons8.com/ios/452/internet.png" />][website]
[<img alt="ricardocas | LinkedIn" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" />][linkedin]
[<img alt="clickdoricardo | Instagram" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/instagram.svg" />][instagram]


[repo]: https://github.com/ricardo-cas/barbershop-alura
[website]: http://www.ricardo.digital/
[twitter]: https://twitter.com/rcosta_digital
[instagram]: https://www.instagram.com/clickdoricardo/
[linkedin]: https://www.linkedin.com/in/ricardocas/
Understanding callback functions
Published: 2020-11-05 03:50:22

I have had some issues with comprehending the purpose of callback functions and their usage in my journey of learning programming. In this post I will be explaining callbacks and their usefulness. 

So essentially a callback function is just a function that is passed as an argument to a different function with the intent that it will be 'called back' at a later time. 

Callbacks are especially useful for asynchronous functions,  an asynchronous function we may be waiting on a request to send back data and we do not know how long this will take. Callbacks are perfect for that scenario because using a callback you can wait until the request is completed before this data is sent or used by the function! 

For example callbacks are often used when retrieving data from an API or from a database. Using callback functions allows you to keep performing other actions while the data is still coming in! 

Good luck with your callbacks and be sure to stay out of callback hell which is an entire different story!
Spring Là Gì- Những Thông Tin Bổ Ích Về Spring Của Java
Published: 2020-11-05 03:38:44

Spring là gì- Đây là một dạng framework dùng để phát triển ứng dụng phổ biến nhất dành cho Java Enterprise để tạo mã có hiệu suất cao, dễ kiểm thử. Xem chi tiết tại: https://blog.itnavi.com.vn/spring-la-gi-spring-framework-cua-java/
I need help
Tags: help, python, django, javascript
Published: 2020-11-05 03:35:58

If you are here to help then this is the deal, I learnt python years ago and now in this pandemic time I mastered my python knowledge. And after that idk where to go and i jumped into webdevlop. So now there are many things to learn in javascript it's okay but what about my python I wanna use that also and javascript is like a hell for me. Is there any one who can answer me these questions 
2q(question):should I use django or some js framework. 
1q(question):is django useful for front end also or just backed and stuffs?
Python Là Gì- Các Tính Năng Của Ngôn Ngữ Lập Trình Python
Published: 2020-11-05 03:30:15

Python là gì? làm sao để có thể học tốt ngôn ngữ này?Hãy theo dõi những thông tin sau sẽ mang tới lời giải đáp đầy đủ nhất cho bạn. Xem chi tiết tại: https://blog.itnavi.com.vn/python-la-gi-nhung-dieu-ban-can-biet-de-hoc-ngon-ngu-python/
Vue Stripe Checkout; sometimes you need to learn something because you need to
Tags: vue, javascript, opensource, github
Published: 2020-11-05 03:25:48

[Vue Stripe Checkout](https://github.com/jofftiquez/vue-stripe-checkout) is a Vue plugin for easy checkout with Stripe on your web apps. [Jofferson Tiquez](https://twitter.com/jrtiquez) has been building and maintaining this plugin for many years. We wanted to understand more about the plugin and how to get started with open source. So we asked Joff to jump on our Open Source Friday [live stream](twitch.tv/github). Here's a few highlights plus a link to the full recording.

## Starting Vue Stripe Checkout

Joff isn't just a maintainer, he also works in startups. He started Vue Stripe Checkout because he found a need to use it himself. Lots of other people and companies soon jumped on board. This is often how many projects start - someone has a need, and very soon they discover lots of others have that same need.

![vue-stripe-logo-variant-1](https://dev-to-uploads.s3.amazonaws.com/i/1vb2h6seszpuvh1tyezv.png)
 
When it comes to Stripe, Joff says creating plugins is easy. He said they have a really well documented SDK. Whilst Joff originally started with Angular, he moved to Vue because he needed to. He didn't necessarily "want" to do learn Vue, but rather needed to. Often that's one of the best ways to learn; you simply learn it because you need it!

## Next for Vue Stripe Checkout

Joff says he has lots of plans for Vue Stripe Checkout. Vue Stripe Checkout is currently in Version 3. Next, there's new documentation coming so keep an eye out for that. He also said Vue Stripe Checkout is moving to it's own repository. You'll be able to find Vue Stripe Checkout and more Stripe Vue plugins once they get off the ground.

## Contribute back to Open Source

When Joff isn't working or writing code for his own projects, he's contributing to others. You'll often find him contributing back to other Vue or JavaScript projects. You can even see some of his contributions in Flutter. Not only are maintainers like Joff out there keeping their own projects up to date, they're helping others too. This is one of the things I love about open source.

Everyone is helping everyone else and contributing to a better software community. Joff encourages developers to dive into open source and is welcoming any newbies into the Vue Stripe Checkout project. Furthermore, Joff says it's not just about coding and he values contributions for documentation too.

## Open Source Friday

If you missed our chat you can watch the full recording below.

{% youtube 7sVZvPzfhrw %}

Don't forget to follow our official [GitHub Twitch Channel](https://twitch.tv/GitHub) and register with our [Virtual Meetup Group](https://www.meetup.com/en-AU/GitHub-Virtual-Meetup/) to find out when the next live stream is scheduled. We're looking forward to bringing you more awesome chats with maintainers like Joff.