teleren/devto huggingface dataset:
How to make animated gradients like Stripe
Tags: css, javascript, html, design
Published: 2020-08-09 11:13:34

<span>Photo by <a href="https://unsplash.com/@raflfc?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Rafael Leão</a> on <a href="https://unsplash.com/s/photos/gradient-sky?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

## Check [stripe.com](https://stripe.com/us) if you don't know what I am talking about.

I'm going to share with you a code snippet to create animated gradient canvas backgrounds.

```
<!DOCTYPE html>
<html>

<head>
    <title>Gradient</title>
    <meta charset="UTF-8" />

    <style>
        body {
            height: 400px;
            width: 500px;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="32px" height="32px">

        <script>
            const canvas = document.getElementById('canvas');
            const context = canvas.getContext('2d');
            let time = 0;

            const color = function (x, y, r, g, b) {
                context.fillStyle = `rgb(${r}, ${g}, ${b})`
                context.fillRect(x, y, 10, 10);
            }
            const R = function (x, y, time) {
                return (Math.floor(192 + 64 * Math.cos((x * x - y * y) / 300 + time)));
            }

            const G = function (x, y, time) {
                return (Math.floor(192 + 64 * Math.sin((x * x * Math.cos(time / 4) + y * y * Math.sin(time / 3)) / 300)));
            }

            const B = function (x, y, time) {
                return (Math.floor(192 + 64 * Math.sin(5 * Math.sin(time / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)));
            }

            const startAnimation = function () {
                for (x = 0; x <= 30; x++) {
                    for (y = 0; y <= 30; y++) {
                        color(x, y, R(x, y, time), G(x, y, time), B(x, y, time));
                    }
                }
                time = time + 0.03;
                window.requestAnimationFrame(startAnimation);
            }

            startAnimation();


        </script>
</body>

</html>
```

It's based on the code from 
https://www.html5canvastutorials.com/advanced/html5-canvas-animated-gradient-background/

I just changed some things to make it more readable. Try to play with it to find out how it's doing it. It's really fun and not that hard.

Also if you go to Stripe.com/us and do the Konami Code (up, up, down, down, left, right, left, right, b, a) you will find hidden controls play with the animation.

### Follow me on [Twitter](twitter.com/jordienr) if you want to see more cool front end stuff :)

Have a good day ✌✌
PhotoSwipe - JavaScript gallery, no dependencies.
Tags: javascript
Published: 2020-08-09 11:04:16

All basic gestures are supported: flick to the next or previous image, spread to zoom in, drag to pan, pinch to zoom out or close, tap to toggle the controls, double-tap to zoom.

First things that you should know before you start:

PhotoSwipe is not a simple jQuery plugin, at least basic JavaScript knowledge is required to install.

PhotoSwipe requires predefined image dimensions (more about this).
If you use PhotoSwipe on non-responsive website – controls will be scaled on mobile (as the whole page is scaled). So you'll need to implement custom controls (e.g. single large close button in top right corner).

https://photoswipe.com/
Hexadecimal color strings in Flutter
Tags: dart
Published: 2020-08-09 10:58:30

In Flutter the Color class only accepts integers as parameters, or there is the possibility to use the named constructors fromARGB and fromRGBO.

So we only need to convert the string #b74093 to an integer value. Also we need to respect that opacity always needs to be specified.
255 (full) opacity is represented by the hexadecimal value FF. This already leaves us with 0xFF. Now, we just need to append our color string like this:
```dart
const color = const Color(0xffb74093); // Second `const` is optional in assignments.
```
The letters can by choice be capitalized or not:
```dart
const color = const Color(0xFFB74093);
```
Starting with Dart 2.6.0, you can create an extension for the Color class that lets you use hexadecimal color strings to create a Color object:
```dart
extension HexColor on Color {
  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
  static Color fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
  }

  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
      '${alpha.toRadixString(16).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}
```
The fromHex method could also be declared in a mixin or class because the HexColor name needs to be explicitly specified in order to use it, but the extension is useful for the toHex method, which can be used implicitly. Here is an example:
```dart
void main() {
  final Color color = HexColor.fromHex('#aabbcc');

  print(color.toHex());
  print(const Color(0xffaabbcc).toHex());
}
```
### Disadvantage of using hex strings
Many of the other answers here show how you can dynamically create a Color from a hex string, like I did above. However, doing this means that the color cannot be a const.
Ideally, you would assign your colors the way I explained in the first part of this answer, which is more efficient when instantiating colors a lot, which is usually the case for Flutter widgets.
Introduction To React (Part 1 of React)
Tags: tutorial, react, webdev, codenewbie
Published: 2020-08-09 10:05:54

React is an Open-Source library for building user interfaces. It is a library that focuses on UI and has a rich ecosystem that helps us deal with other aspects of building applications.

React is one of the most popular JavaScript libraries which is backed by the giant Facebook. This makes sure React is never out of business. Also, due to its popularity, there is a huge developer base which makes it easy for a newbie to get tutorials, solutions to the problems encountered. 

This is based on Component-based architecture that means, the whole webpage is realized as a set of components. React promotes code reusability which means the same component can be used to render different contents that have a similar layout.

React is declarative which means tell react what you want and react builds the UI. This helps a developer for smoother DOM manipulations. 

To learn React you need to have a basic understanding of HTML, CSS, and JavaScript. I will be discussing my learning and going to cover the fundamentals of React, Routing, HTTP, Redux.

Follow me to get more learnings to React.

In case, you want to add something or give me feedback please use the comment section. Don't forget to give me a 🦄 and 💖.

Thanks for visiting. 😊😊
100 Days Of Data Science
Tags: 100daysofcode, datascience, machinelearning, deeplearning
Published: 2020-08-09 10:02:30

Hello Everyone!!

Given below is a list of what we have covered in the first 10 days of 100 days of #DataScience with Asquero (https://www.asquero.com).

**Day1** - Determine the numeric and categorical attributes in the dataset - https://bit.ly/2XxkTr0

**Day2** - Basic Statistical Descriptions of Data - Mean, Median, Mode & Midrange - https://bit.ly/3i88QIs

**Day3** - Dispersion of Data: Range, Quartiles, Variance, Standard Deviation, and Interquartile Range - https://bit.ly/31pg3No

**Day4** - Handling missing values in the dataset - https://bit.ly/3icx5W8

**Day5** - Handling missing values using Pandas & Numpy | Python Programming - https://bit.ly/30tkuaQ

**Day6** - Removing noise from the data using the Binning Technique | Pandas | Python Programming - https://bit.ly/3kitSG7

**Day7** - Redundancy & Correlation Analysis in Data Science | Python Programming - https://bit.ly/3kcRWdz

**Day8** - What is Data Reduction? | Dimensionality Reduction | Numerosity Reduction | Data Compression - https://bit.ly/2C1SUrZ

**Day9** - Remove duplicate tuples (rows) from the dataset | Python Programming - https://bit.ly/3gIaCj2

**Day10** - What are Outliers & What is Outlier Detection? - https://bit.ly/2Xvlh9u
AWS CodeCommit - setting up SSH
Tags: aws, git, ssh
Published: 2020-08-09 09:52:22

AWS CodeCommit is basically Github on AWS but it's private, and for sole devs is [essentially free](https://aws.amazon.com/codecommit/pricing/). 

To set up your identity, just as with Github, you can use HTTPS or SSH. In order to use SSH, I'd recommend setting up a new key pair and so this is what I did on my mac.

- Open a terminal on your machine and navigate to the ssh folder e.g. 

`cd ~/.ssh`

- Create a new RSA key pair into a dedicated file. Note this format was known to work with Github, CircleCI, Digital Ocean and AWS.

`ssh-keygen -f ./codecommit -m PEM -t rsa -C 'your-email-for@commit-messages'`

- Copy it to your clipboard

`pbcopy < ./codecommit.pub`

- Login to your AWS account and visit the [code commit security credentials page]( https://console.aws.amazon.com/iam/home?#/security_credentials?credentials=codecommit).
- Click "Upload SSH public key" and paste 
- It will save it and display a "SSH Key ID". Copy this - this is Your-IAM-SSH-Key-ID
- Back to your terminal, see if you have a `~/.ssh/config` file

`ls -la`
- If you do, edit it, if not create and edit it and enter the following:

`Host git-codecommit.*.amazonaws.com
User Your-IAM-SSH-Key-ID
IdentityFile ~/.ssh/codecommit`

You should now be able to use your ssh credentials to work with CodeCommit
10 more questions to ask your future employer
Tags: hiring, interview, diversity, job
Published: 2020-08-09 09:32:03

I recently read [10 Questions I'm Asking All Companies Before Scheduling Any Interviews](https://dev.to/ashleemboyer/10-questions-i-m-asking-all-companies-before-scheduling-any-interviews-1aoi) from [ashleemboyer](https://dev.to/ashleemboyer) (very good questions, thank you for sharing!) and it got me thinking about the job market [as it sometimes happens](https://dev.to/oinak/8-things-to-look-for-in-your-next-hire-instead-of-10x-engineers-1l5c).

I have been lucky not to need to look for job in some time, nor do I expect to be looking anytime soon, but what would my questions be?

I have a certain position of privilege in this market (cishet white-passing English speaking male, 20 years of experience in industry) and that comes with a responsibility (insert your favorite Spiderman/Uncle Ben reference here). So I would like to make the questions that might be scary to make for the people who needs the answers the most.

These are questions we all should care about, not just if they affect you personally, because they speak volumes about the company perception of its employees. Are they valuable partners, are they resources that it is costly to replace, or are they throwaway cogs that might as well burn...

I consider the mere reluctance to answer any of these questions a yellow flag, however a

> "good question, I don't know if we have considered that yet, I will find out and get back to you"

is ok.

I would like to share them here in case anyone find them useful:
- What is the policy on remote work (for all roles, not just Eng.)? What was it before covid-19? What will they do afterwards?
- How flexible are working hours? Can it be adapted to family needs?
- What is the parental leave policy?
- How diverse is the current composition of the company, the engineering team and leadership in particular, and what measures are in place to enhance diversity?
- What is the company stance in mental health issues?
- Is the company adapted or ready to adapt to workers with any disabilities?
- What is the average tenure at the company? If it's under 2y or not disclosed, what are the reasons?
- Is there a career path? how are achievements evaluated?
- Is there a peak season, limited holiday period, on-call duties? Are they compensated separately? Are they optional? Do they impact performance reviews/career advancement?
- Is there a 911 procedure? Is it documented? How many there where in last 6 months?

Bonus points if these questions are answered during interviewer exposition/before I ask them, and flying colors if they are present in the Job Description.

I hope you find them useful. If you are in dire need of a job and need to pretend you are natural born corporate grunt, by all means, do what you need. But if you are in a better position, like myself, I hope you start grilling your future prospect employers with them, until they become _uneasy_ to avoid for companies.
Is agile a scam?
Tags: discuss, career
Published: 2020-08-09 09:22:33

I'm asking a provactive question, I know. But only because I'd love to hear your opinion on the topic.

Agile is when the developers take tasks that was usually assigned to a project manager before (when we didn't work in agile). 

It's like a new form of capitalsim or rationalization when part of the work is outsourced from people with higher salary (project manager) to people with relatively lower salary (developers).

It's similar when companies in the 90s started to outsource their workforce from high cost countries (North America, Western Europe) to low cost countries (Sout America, Eastern Europe, Asia).

What is your take on that? A good new work model for software developers or a fairy tale told to scam software developers that they can "now finaly take responsibility for their own work" and be more "inclusive" in the process?
if experience < 1: job = False
Tags: career, beginners, experience, discuss
Published: 2020-08-09 09:05:52

We have all heard the saying, "in order to get a job, you need experience". But how can we get experience if we need prier work experience for a job that could give us experience?


So, I am a young adult who has had an interest in all areas of IT for quite some time now. I went into studies straight out of high school and completed a certificate 3, 4, diploma, advanced diploma and only recently, a bachelor's degree of IT & network security, all within roughly 3 years. I studied full-time and never got a job as I did not require it at the time. Teachers would always say "get a degree", and I grew up thinking that it was the best thing one could do to make them more employable. I was wrong.


Recently after finishing my degree, I have come to realise that finding a job in all IT areas is not about a degree at all. I thought that I would be employed easily because, well, who wouldn't want a young enthusiastic 20 year old with a degree? I am also a citizen of my country which could help me stand out more. 


Understandably, employers want people with experience. I didn't know how much experience until I started applying for jobs. Junior jobs for cyber security, IT support and even helpdesk all want some prier work and/or IT experience which I do not have. I would apply for multiple jobs a day and not hear back from all of them. I have been looking, applying, and hoping for some weeks now but have got nothing. Maybe it's just the time period with all this COVID-19, but it is still worrying to think that I could have achieved all these certificates for nothing. I have had experience with all different technologies during my studies but never actual work experience. Many times we would have practical labs to do in class using physical equipment. 


The reason I am writing this is to ask, what would help me in obtaining a job? How can I stand out? Many other friends of mine are going through similar scenarios. I have called up a few places asking for work experience but understandably they declined due to insurance issues. How else could I get work experience? I have also had people review my resume and they agree that there is nothing wrong. I should point out that I live in Australia so there is plenty of opportunities, it's just that all want some sort of experience. 


It would be great to hear from an employer to hear what they have to say. What can help me get a job?
GCP Compute Assessment Sample test
Tags: certification, googlecloud
Published: 2020-08-09 08:55:39

Can you answer this? Sample GCP assessment test. Check GCP Compute assessment questions with correct and verified answers here https://yzydo.com/gcp-compute-assessment-answers-google-cloud-platform-business-professional-accreditation.

1. Which of these key terms indicate a business-related challenge that App Engine addresses?

patching zero-day exploits
testing datasets for machine learning
time to market
control of virtual machines

2. As a computing platform provided as a service, how does App Engine provide value?

App Engine deploys and maintains a fleet of VMs that enable organizations to create containerized workloads.

App Engine saves organizations time and cost in software application development by eliminating the need to buy, build, and operate computing hardware and other infrastructure.

App Engine routes packets across the globe and stores data at the edge of the network closest to the user so that the organization’s data is where their users need it.

App Engine allows organizations to man
age a server or runtime environment.

3. Which product included in Google Cloud networking serves content to end users with high availability and high performance?

Cloud DNS

Virtual Private Cloud

Cloud CDN

Cloud Interconnect

4. Compute Engine is ideal for organizations that:

Need complete control over the virtual-machine infrastructure.

Need a fully managed database service.

Don’t want to touch a server or infrastructure.

Need to connect and extend cloud services.


5. What business value can Firebase provide?

developer productivity

SDKs and consoles available

saving time and cost

ease of use

___________________

Multiple certification exams helper files at https://yzydo.com/
Microsoft's Node.js course review 	
Tags: node, javascript, webdev, microsoft
Published: 2020-08-09 08:54:54

## The course  :blue_book:

Recently on Microsoft learn a new course was introduced giving knowledge on node.js. Over the previous weekend I took the course to have a look at the quality and depth off the content.

Although the course says its for beginner :helicopter: but if you are an absolute beginner then you might have a bit of difficulty catching up with the course. But you can catch up with it by googling the concepts you are not ware of. 

Unlike some of the course which starts directly with creating a http server this course teaches first the core concepts of node.js and understanding of which is quite important if ou want to move to advance level, its better to build these core concepts from start which this course does nicely.

There are 5 modules in this course and as per Microsoft its a 2hr 44mins course but that's just reading time you would need more time to process that information. It took me 4 hours to complete this course which included reading the content, doing practice exercises and reporting few of the error I could find in the course material. 

> I think one should go through this course to revise his concepts.

I liked the content of the course, the practice examples and the interface of the learn website. :beers:
Yes, there were few issues in the code which I could figure out and reported to Microsoft learn also made a PR on there GitHub repo. 
   	:parachute:

The link to the [course](https://docs.microsoft.com/en-gb/learn/paths/build-javascript-applications-nodejs/) :rocket:

[GitHub link](https://github.com/MicrosoftDocs/node-essentials)
Please explain, what is HATEOAS?
Tags: computerscience, explainlikeimfive, restful, hateoas
Published: 2020-08-09 08:47:31

> **[Hypermedia as the Engine of Application State (HATEOAS)](https://en.wikipedia.org/wiki/HATEOAS)** is a component of [the REST application architecture](https://en.wikipedia.org/wiki/Representational_state_transfer) that distinguishes it from other network application architectures.

What?

- Can GraphQL be RESTful?
- RESTful in non-HTTP?
- What is [Hypermedia](https://dev.to/bengreenberg/a-brief-introduction-to-rest-apis-172)? vs [HyperText](https://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven)?
What is Edge Computing? Explained with Example.
Tags: edgecomputing, tutorial, codenewbie
Published: 2020-08-09 08:45:29

{% youtube aoyjwEpt22s %}

In this video, We will discuss what is edge computing and benefits of edge computing with example


------------------------------SOCIAL------------------------------
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Should RESTful API URL be clean (/api/:param)?
Tags: discuss, restapi, webdev
Published: 2020-08-09 08:35:00

Clean URL is https://en.wikipedia.org/wiki/Clean_URL

A common pattern is

```
GET /articles
POST /articles
PUT /articles/:id
DELETE /articles/:id
```

Completely understandable, if you are doing it for SEO, but do RESTful API even need that? [There might even be a security risk.](https://www.quora.com/Isnt-it-harmful-to-expose-a-user-ID-in-RESTful-API-in-a-URL?share=1)

[Some tutorials seem to explicitly prefer this](https://dzone.com/articles/rest-api-design-best-practices-for-parameters-and), but why?

Actually, if querystring is used instead, it might be easier for [axios](https://github.com/axios/axios) + TypeScript (or any URL builders).