teleren/devto huggingface dataset:
Introducing Browsermeta: Debugging made (super) easy!
Tags: javascript, browser, extension, debugging
Published: 2021-03-22 19:14:36

Sometimes you write code that runs exactly as you expected but fails to run for a client on their machine. Even though your code may pass all tests and runs correctly for you on your system and machine, it may still fail because the non tech savvy client may be using an outdated browser, a different browser vendor, machine with drastically different resolutions, extensions, lives in a different time zone.

Such issues are hard to debug because you might not be expecting them. It can be very cumbersome to ask client about their machine and browser especially if the client is a non tech savvy and or a busy person. There are many tools that monitors your code, send logs to the cloud and generate reports but non tools that gives you information about the client's machine and browser.

As a startup, we've faced such issues. Once, we created some popups that were not being shown to the client apparently AdBlock extension was blocking our popup even though the popup did not contain any advertisement. Another such issue occurred due to client's time zone because of which the time based filter that we created failed to filter data properly, we then opted to using moment.js to solve that problem.

Such issues will always occur and can be very easily solved if we have more information and understanding of what system the client is relying or and using. That is why we created Browsermeta. Browsermeta is a completely free tool that collects information about the client's machine and browser, which is uploaded to the cloud and gives them a link which they can share with you.

[You can download Browsermeta extension from chrome web store.](https://chrome.google.com/webstore/detail/browsermeta/dohofpanohcaolhaidnjcpnnadggdjbl)

You can not only see the browser and its version that the client is using, but also a screenshot of where they are currently on the page, along with information about their screen, OS, stylesheets, scripts, browser extensions that are current in use and current URL. Other than the basic information, clients can choose not to share a screenshot, screen information, stylesheets, scripts, browser extensions and current URL.

The extension and the website are in its very early and beta stages. It is completely free and adheres firmly to keep the privacy of the clients/users safe. We plan on adding tons of features like error monitoring, authentication, private links and give users a general and absolute control over their data.

However, keep in mind that most of the data that you find in the 'meta sessions' are generally available in the browser. The problem is that the client cannot simply go to the inspect tools to collect all the information or give you a list of the extensions they are using. Even as a developer, it can be hard to look for all the script tags, stylesheets and other such things for debugging.

We'd love it if you could check the extension, use it and provide us with valuable feedback. Browsermeta is in its early beta stages. We plan on adding many features to it.

Thanks!
how to convert sql query to laravel model style without DB?
Published: 2021-03-22 18:53:00

   ->join(array(\DB::expr('(select SUM(p.amount) as paid, p.case_id
                            from payments p
                            where p.status_id = 3
                            group by p.case_id)'),'p'), 'LEFT')->on('p.case_id','=','c.id')
this is sql query of fuelphp
i am going to convert it to laravel query style to not use DB.
DB means illumiate\Fascade\DB;
how?
⭐️ The CSA STAR Program: A Business Guide to Certification
Tags: security, guide, csa
Published: 2021-03-22 18:28:51

A CSA Security, Trust, Assurance, and Risk (STAR) certification is a powerful third-party attestation of a cloud service provider’s security practices. A cloud service provider that earns a STAR certification can assure their customers that they’re using industry-leading best practices to secure data in cloud applications.
📚 Learn how to accelerate your sales cycle through the CSA STAR Program.
[Read more...](https://auth0.com/blog/the-csa-star-program-a-business-guide-to-certification/?utm_source=content_syndsc&utm_campaign=csa_star)
supabase-js with sapper
Tags: svelte, sapper, supabase
Published: 2021-03-22 18:11:56

A few gotchas I found when setting up, so saving my notes here.  Hopefully they save you a bit of time.

## 1) Set the client context to `window`

In *rollup.config.js*:
```
export default {
	client: {
		context: 'window', // for supabase compatibility
		input: config.client.input(),
```

## 2) Install `@rollup/plugin-json`

Also in *rollup.config.js*:

```
import json from '@rollup/plugin-json';

...

export default {
	client: {
		context: 'window', // for supabase compatibility
		input: config.client.input(),
		output: config.client.output(),
		plugins: [
			json(),  //For supabase compatibility 

...

	server: {
		input: config.server.input(),
		output: config.server.output(),
		plugins: [
			json(),  //For supabase compatibility 
	
```
Javascript Project
Published: 2021-03-22 18:22:18

So this is my second time trying to complete my Javascript project for the Flatiron School online curriculum.  Second time around, things have been a little easier in terms of completing the coursework.  The project has been the biggest concern for me, but with a better understanding of Javascript I am hopeful that this will be a successful project.  I still find that Javascript is the most difficult coding language that I have learned throughout my entire time learning at Flatiron.  While I understand the concepts and lines of code that go into creating a working front end web application, I still find difficulty in writing code to execute the proper functions that I intended to create.  It's very tricky, especially when you add in an API that you create yourself using a Rails backend.  Incorporating the database from the backend and translating that information into a format that is easily processable and compatible with the front end is rather difficult.   Creating functions that manipulate this information in complex ways is really difficult, but it's incredibly fascinating what these lines of code are capable of and how these complex lines of code show up on the page as easily digestible information.  I'm hoping that my experience going through this project will help me become a proficient web developer and I'm excited to see what more I can do with Javascript even after I finish this program.
5 Side Hustles For Any Programmer Looking to Make Money
Tags: coding, programming, watercooler
Published: 2021-03-22 18:14:22

###1. Create a Course on a Learning Platform
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpivv4d4brkpdplkqeax.PNG)

*Pro #1:* It is a one-time project.
*Pro #2:* You get free access to features of the learning platform.
*Pro #3:* There are no fees to create, host, and publish courses.

*Con #1:* There are revenue shares on these learning platforms.
*Con #2:* There is a decent amount of competition.



###2. Do Freelance Work
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjyugcgs8zcmi3bgy2l9.PNG)
*Pro #1:* You set your own hourly rates.
*Pro #2:* You choose which gig to accept.
*Pro #3:* You set your own work hours.

*Con #1:* It can be competitive on freelance platforms.
*Con #2:* You can easily fall into the trap of being underpaid for your work.



###3. Enter Competitive Programming Contests
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0llvio70t3h7chj0wkyu.PNG)

*Pro #1:* You get to put your skills to the test.
*Pro #2:* You can be compensated for doing something fun.
*Pro #3:* There is often no purchase necessary to enter or win a coding competition.

*Con #1:* You’re not going to be paid unless you place high.
*Con #2:* You will most likely not make a ton of money.



###4. Make a Blog
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x32pr2zx1ap8wjbky25g.PNG)

*Pro #1:* You get to share your knowledge.
*Pro #2:* You can generate semi-passive income.
*Pro #3:* It’s the epitome of a passion project.

*Con #1:* Blogs require regular posting and upkeep in addition to patience.
*Con #2:* Low traffic means low income.



###5. Write on an Existing Blog
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7feelvfsimitz9p5j5h.PNG)

*Pro #1:* You get to piggyback off of the platforms existing SEO.
*Pro #2:* You get paid for writing about something of interest.

*Con #1:* You will most likely only get micro-payments from most of your writing.
*Con #2:* You’ll have to write often and with strategy.


[More information](https://www.ordinarycoders.com/blog/article/5-side-hustles-for-any-programmer)
Do not use the CSS background shorthand property in React
Tags: react, javascript, css
Published: 2021-03-31 07:27:49

---
title: Do not use the CSS background shorthand property in React
published: true
date: 2021-03-22 18:07:16 UTC
tags: react, javascript, css
canonical_url: https://www.antopiras.dev/blog/2021-03-22-do-not-use-the-css-background-shorthand-as-a-prop-in-react/
---

## The problem

I recently came across this bug at work and it took me a minute to figure it out. What I had was something like this:

```js
<div 
  className="image-container" 
  style={{ 
    position: 'absolute', 
    top: `${top}%`, 
    left: `${left}%`, 
    width: `${width}%`, 
    height: `${height}%`, 
    background: `transparent url(${image_url}) no-repeat 
    center center`, backgroundSize: 'contain'
  }}
/>
```

Everything seems okay, right? Well, in theory. But as soon as the application started, I noticed that the `backgroundSize` property was not working!

## Let’s get googling

After inspecting the output HTML and a bit of googling, I came across this [closed issue on React's Github](https://github.com/facebook/react/issues/5030).

Apparently, using the CSS `background` shorthand property with a `backgroundSize` prop causes this last property to be cleared **if and when** the `background` property is updated.

## Fair enough, let’s fix it

A quick and easy fix is to explicitly set every property by expanding the shorthand property:

```js
<div 
  className="image-container" 
  style={{ 
    position: 'absolute', 
    top: `${top}%`, 
    left: `${left}%`, 
    width: `${width}%`, 
    height: `${height}%`, 
    backgroundColor: 'transparent', 
    backgroundImage: `url(${image_url})`, 
    backgroundRepeat: 'no-repeat', 
    backgroundPosition: 'center center', 
    backgroundSize: 'contain' 
  }}
/>
```

That's all! I hope this is useful to you 💪🏻
If You're a Junior, Apply Jobs
Tags: beginners, juniordev, career
Published: 2021-03-22 18:01:55

Hi, everyone! I'm a senior computer science student and junior developer. I applied some dev jobs and I want to share my experience about why we should apply jobs more often.

Usually people don't apply a job unless they feel enough for the job. But how do you know you're enough good? or if you are on the wrong path, then who will tell you? The best way is applying a job! 

>If you want a career you basically needs two things: soft and hard skills. 

You probably heard some interview questions. *"Tell me about yourself, why you choose this career, etc"*

Maybe you think you are good at replying for these questions but with excitement you may not. 

You need experience to be **REALLY** good. 

### For hard skills:

* you will learn how the language/tech used by companies

You can say **I know Javascript**. But how companies use javascript is different that knowledge. 

* you will what should you **know** 

They might ask you some technologies or languages that you do not know. Take note and learn after the interview! So that is how you gain experience from it. 

You can take note about the questions that you think you did not answer well. 

### A list of questions that i remember/love:
* What is your biggest success/failure?
* Why you want to work in that field?
* What is your favorite thing about this **language**?
* Do you know software development methodologies? (agile)

And my favorite question,

> *Tell me about yourself.*

Tthis is the hardest question for myself. You have to explain yourself as well as possible within two minutes or less. 



I hope everyone will find a good job to start their career, thank yyou for reading!
BEGINNER 
Tags: beginners
Published: 2021-03-22 17:57:39

Hello everyone this is my first post in DEV.
First of all Lemme tell Y'all  this is my first month of internship and I do have a dream of becoming Full-stack developer.
I do have six months to learn all concepts related to Front-end development. So I can start my Job .In these  coming six months I need to work hard.
Well I will make this post shorter. As you know I am beginner so I just started learning HTML CSS basics .I Think the things which I learned ,I should 
share it on this forum ,like this I will speed up my learning pace. Today I would like to share what I learned about box-model.
The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and
 the actual content. In start it was a bit confusing but now i can understand it.
I will Explain  the different parts of box-model 
1: Content - The content of the box, where text and images appear
2: Padding - Clears an area around the content. The padding is transparent
3: Border - A border that goes around the padding and content
4: Margin - Clears an area outside the border. The margin is transparent


in order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Remember: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

For now That's all I know. I will welcome any suggestion if you have. Thanks for reading.
Mad Libs Generator | Rookie Week of Python Day 03
Tags: python, beginners, programming
Published: 2021-03-22 17:51:51

Mad libs generator is a fun game that is usually played by kids. In this python game user has to enter substitutes for blanks in the story without knowing the story. It is a fun and creative way to see what stories people come up with.

# Mad Libs Generator

We will declare a variable `loop` and initialize it with the value of `1`.
```python
loop = 1
```

We will then create a `while` loop and increment the `loop` variable till it reaches `10`
```python
while (loop < 10):
```

We need some inputs from the user. We will be requiring 2 nouns, 1 plural noun, 1 place, and 1 adjective for our specific Mad Libs Paragraph.
```python
while (loop < 10):
    noun = input("Choose a noun: ")
    p_noun = input("Choose a plural noun: ")
    noun2 = input("Choose a noun: ")
    place = input("Name a place: ")
    adjective = input("Choose an adjective (Describing word): ")
    noun3 = input("Choose a noun: ")
```

Now to output our paragraph with the user entered variables in the appropriate spaces.
```python
while (loop < 10):
    noun = input("Choose a noun: ")
    p_noun = input("Choose a plural noun: ")
    noun2 = input("Choose a noun: ")
    place = input("Name a place: ")
    adjective = input("Choose an adjective (Describing word): ")
    noun3 = input("Choose a noun: ")
    print ("------------------------------------------")
    print ("Be kind to your",noun,"- footed", p_noun)
    print ("For a duck may be somebody's", noun2,",")
    print ("Be kind to your",p_noun,"in",place)
    print ("Where the weather is always",adjective,".")
    print ()
    print ("You may think that is this the",noun3,",")
    print ("Well it is.")
    print ("------------------------------------------")
```

To loop the program back to the initial position we can add redefine the value of the `loop` variable within the while statement.
```python
    loop = loop + 1
```

### Output
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl98cxtyih3jtuzxlvrq.png)
Feel free to make it as crazy as you like. Remember to have fun.
If you want to get started you can fork this code from GitHub [here](https://github.com/thehannankhan/mad-libs-generator)
What is MVC Architecture ?
Published: 2021-03-22 17:43:01

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application.

View is the UI(User Interface) or presentation of the website. It also display's the data for the user.

The Controller handles and responds to user input and interaction. For example, the controller handles query-string values, and passes these values to the model.

Model uses these values to query the database. Model infact interacts with the database.



► Five Advantages of using MVC model for effective web application: 

1. Faster development process: MVC supports rapid and parallel development. If an MVC model is used to develop any particular web application then it is possible that one programmer can work on the view while the other can work on the controller to create the business logic of the web application.

2. Ability To Provide Multiple Views:
In the MVC Model, you can create multiple views for a model. Today, there is an increasing demand for new ways to access your application and for that MVC development is certainly a great solution. Moreover, in this method, Code duplication is very limited because it separates data and business logic from the display.

3. Support For Asynchronous Technique:
The MVC architecture can also integrate with the JavaScript Framework. This means that MVC applications can be made to work even with PDF files, site-specific browsers, and also with desktop widgets. MVC also supports an asynchronous technique, which helps developers to develop an application that loads very fast.

4. The Modification Does Not Affect The Entire Model:
For any web application, the user interface tends to change more frequently than even the business rules of the .net development company. It is obvious that you make frequent changes in your web application like changing colors, fonts, screen layouts, and adding new device support for mobile phones or tablets. Moreover, Adding a new type of view are very easy in the MVC pattern because the Model part does not depend on the views part. Therefore, any changes in the Model will not affect the entire architecture.

5. MVC Model Returns The Data Without Formatting:
MVC pattern returns data without applying any formatting. Hence, the same components can be used and called for use with any interface. For example, any kind of data can be formatted with HTML, but it could also be formatted with Macromedia Flash or Dream viewer.
Scroll Progress Indicator
Tags: javascript, html, css, 100daysofcode
Published: 2021-03-22 17:32:47

the day 92 of challenge #100DaysOfCode

Scroll Progress Indicator Using HTML5, CSS3 & JS 

Demo : https://scroll-progress-js.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day92
Let's Learn .NET - Microservices - Free Live Stream Event
Tags: microservices, beginners, dotnet, csharp
Published: 2021-03-22 17:30:44

[Let's Learn .NET](https://aka.ms/letslearndotnet) is a monthly beginner series that walks through the fundamentals of using C# and .NET. This month, jumpstart your experience building Microservices with .NET! Learn about what microservices are, why you need them, and how to build them with C# and .NET. You will leave with an understanding of how a container, images, hub, and orchestrator all relate to each other. 

This fun, beginner's series will teach you all about the fundamentals of everyday technologies and how you can master them using C# and .NET.

{% youtube sstOXCQ-EG0 %}

## When
Friday, March 26th at 8:30 AM - 10:30 AM Pacific

## Where

Streaming live for FREE on [Microsoft Learn TV](https://docs.microsoft.com/learn/tv/?WT.mc_id=dotnet-17847-jasingl). Sign-in, ask questions, and learn how to build Microservices with .NET, Docker, and Kubernetes.

## What
Come learn something new and leave with something that we all built, together, live with experts. Here is the agenda for the event:

**Introductions (5 mins):**
- Meet the team!

**Fundamentals (20 mins):**
- Microservices 101 
     - What are microservices?  
     - Why are they important? 
     - What tooling is needed for development? 

- Pre-requisites & installation  

**Workshop I (35 mins):**
- [Learn how to build & deploy your first Microservice](https://dotnet.microsoft.com/learn/aspnet/microservice-tutorial/intro?WT.mc_id=dotnet-17847-jasingl)

**Q&A (10 mins):**
- Get your questions answered live!

**Workshop II (35 mins):**
- [MS Learn - Create & deploy a cloud-native microservice](https://docs.microsoft.com/learn/modules/microservices-aspnet-core?WT.mc_id=dotnet-17847-jasingl?WT.mc_id=dotnet-17847-jasingl)

**Q&A (10 mins):**
- Get your questions answered live!

**Open Discussion (10 mins):**
- Let's discuss the learnings and what else is on your mind.

## RSVP Today
Head to [aka.ms/letslearndotnet](https://aka.ms/letslearndotnet) to RSVP today!

## Looking for more?
[Join the Cloud Skills Challenge on Microsoft Learn](https://docs.microsoft.com/en-us/learn/challenges?id=c9730dd9-062b-4433-b73e-265a2ed233c4)!  

Microservice architecture is a style that structures an application as a collection of services which are highly maintainable & testable, loosely coupled, independently deployable, organized around business capabilities, and owned by a small team. Follow this challenge to skill up on using .NET and microservices.
Feedback needed 
Tags: testing, help
Published: 2021-03-22 17:28:10

We need your opinion on our game!
Any help is appreciated!
Game: https://Platformer.arealight.repl.co
Survey:https://docs.google.com/forms/d/e/1FAIpQLSdbQe1KGLCvyCFpvjh-oGZ5wxt2rsiGBIYyvOKBBUgbS_8DXw/viewform?usp=sf_link
Serverless Framework Template
Tags: aws, serverless, node, github
Published: 2021-03-22 17:27:22

# Serverless Framework Template - ES6/ES7 Compatible

## This Github project template will standardize

- Consistent src folder structure across multiple projects.
- [serverless-bundle plugin](https://www.npmjs.com/package/serverless-bundle): Optimally packages your ES6 or TypeScript Node.js Lambda functions with sensible defaults so you don't have to maintain your own Webpack configs.
- [serverless-pseudo-parameters plugin](https://www.npmjs.com/package/serverless-pseudo-parameters): Allows you to take advantage of CloudFormation Pseudo Parameters.

## Getting started

```
sls create --name <YOUR_PROJECT_NAME> --template-url https://github.com/subhankarde/serverless-nodejs-es7-template.git
cd YOUR_PROJECT_NAME
npm install
```

The latest version of Webpack is not compatible. Please use the below version. Please be aware that AWS-SDK is in the DEV dependencies. Please move it to dependencies for PROD. AWS Lambda will use the latest SDK for the current template. 

## Latest npm packages

```
npm i -g npm-check-updates
ncu -u
npm install
```

## Webpack version

```
npm uninstall webpack
npm install --save-dev webpack@4.46.0
```
## VS Code command for Mac
```
code .
```
# Top serverless plugins
- serverless-offline
- serverless-step-functions
- serverless-plugin-canary-deployments
- serverless-dynamodb-local