teleren/devto huggingface dataset:
🔥 JSF (JavaServer Faces) 2.0: The Story Book
Tags: java, jsf, wildfly
Published: 2020-03-10 12:43:55

JSF stands for Java ServerFaces and this story book will explain the most important parts of this Java EE framework. 

**Security**

* Working with the JSF Security web project
* Using the JSF Security web project without JAAS Roles
* Using secured managed beans with JSF Security
* Using Acegi/Spring security in JSF web applications

The most of the JSF experts could usually say that secure the structure of web applications based on JSF will one of the most important aspects and problem to resolve in order to avoid malicious attacks, SQL injections and build a successful and more expensive final product for the end users. 

In this section, you will see a series of four recipes for increasing the security of your JSF web applications. You will see how to use the JSF Security project, how to manage JAAS roles and the JSF Security layer, and how to use Acegi/Spring security for writing a login screen for the application.
Serverless on steroids
Tags: serverless, firebase, javascript, tutorial
Published: 2020-03-10 12:25:14

---
title: Serverless on steroids
published: true
description: Online broadcast today at 7pm.
tags: #serverless #firebase #javascript #tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/446zo763xx062no4qrfg.jpg
---

I will present today “Serverless on steroids”. It will be broadcasted online today.

Link to the stream you can find [here](https://meetup.com/Munich-Frontend-Developers/events/268656955/)

My talk starts at 7pm.

## Abstract

### JAM! Serverless on steroids

Launch MVP in <30 mins with Vue.js, Firebase, Netlify

Frontend with Quasar: Material design powered Vue.js framework with one code base for SPA, PWA, Android, iPhone, Electron
Hosting with Netlify: CDN, DNS, CI/CD
Backend with Firebase: Firebase Auth, Firestore for data storage and live updates, Cloud Functions for integrations

## What are we going to do

Here is a wireframe

![](https://dev-to-uploads.s3.amazonaws.com/i/p9hinebm2d8aynkpa2o8.jpg)
React Typescript Cheatsheet
Tags: react, typescript, discuss, webdev
Published: 2020-03-10 12:24:59

Here are a few patterns I find useful when building a project in React + Typescript. When starting out I didn't find the JSX and React types obvious or particularly well documented, so I'd like to maintain a list of what types to use in different situations.

This is just a start, so I'd love to know what patterns you all find useful and what I should add to the list. Also, if there is anything here that I _shouldn't_ be doing I would love to know!

## Table of Contents

- [Children](#children)
- [Events](#events)
- [Forwarding Props](#forwarding-props)
- [Styles](#styles)
- [Refs](#refs)

### Children

```tsx
interface Props {
  children?: React.ReactNode
}
```

### Events

```tsx
interface Props {
  // Use the specific HTML element targeted
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
}
```

### Forwarding Props

To forward a named props object to an element:

```tsx
interface Props {
  buttonProps?: JSX.IntrinsicElements['button']
}

const Container = ({ buttonProps }: Props) => (
  <div>
    <button {...buttonProps}></button>
  </div>
)
```

To forward top-level props to an element:

```tsx
interface Props extends JSX.IntrinsicElements['button'] {}
const ExtendedButton = (props: Props) => (
  <button {...props} />
)
```

### Styles

```tsx
// utils.d.ts
declare interface StyleProps {
  style?: React.CSSProperties
  className?: string
}

// Button.tsx
interface ButtonProps extends StyleProps {
  label: string
}

const Button = ({ label, ...styleProps }: ButtonProps) => (
  <button {...styleProps}>{label}</button>
)
```

### Refs

Element refs:

```tsx
const liRef = useRef<HTMLLIElement>(null)
```

Other refs are possible too:

```tsx
const valueRef = useRef<number>(0)
```
Now GetFlutter in Multiple Language
Tags: flutter, opensource, discuss
Published: 2020-03-10 12:10:51

Hey, thank all for your support and valuable feedback to make GetFlutter one of the best open-source UI libraries for Flutter development.

As per your feedback and suggestion, we added multiple language support for our documentation. So now as per now we added the following Languages that might help you out.

**Default/English:** https://github.com/ionicfirebaseapp/getflutter
**French:** https://github.com/ionicfirebaseapp/getflutter-docs/tree/fr
**Chinese**: https://github.com/ionicfirebaseapp/getflutter-docs/tree/ch
**Spanish:** https://github.com/ionicfirebaseapp/getflutter-docs/tree/es
**Portuguese:** https://github.com/ionicfirebaseapp/getflutter-docs/tree/pt-br
**Japanese:** https://github.com/ionicfirebaseapp/getflutter-docs/tree/ja

Now we are welcome Everyone to contribute to translating this doc. And make more useable and easy to use for multiple languages.
Assisted development 🤖
Tags: webdev
Published: 2020-03-10 12:00:58

Buddy I wish I had a buddy! I have had an idea for a new way of working with puppeteer that might be incredibly useful.

What if you could use WebRtc to get puppeteer to follow you around as you browse and assist your workflow, run (semi) automated tests on that page and much more. I think introducing a development UI which transparently integrates with your page would be absolutely invaluable.

You could load it up with devtools and extensions, even your chrome profile and write scripts for this platform.

Maybe a copycat macro mode as well?

What do you think?
Shell Scripts: env-shebang with Arguments
Tags: linux, coreutils, shell, knowledge
Published: 2020-03-10 11:54:13

> *How to pass arguments to an interpreter found by 'env'.*

## The Problem

There is an old annoyance that, if you use `env` in a bang path to search the script interpreter in the shell's path, you cannot pass any arguments to it. Instead, all the text after the call to `env` is passed as one single argument, and `env` tries to find this as the executable to invoke, which fails of course when arguments are present.

`env` is not the culprit here, but the very definition of how a bang path works (quoted from the `bash` manpage):

> If  the  program  is a file beginning with ``#!``, the remainder of the first line specifies an interpreter for the program.
> The shell executes the specified interpreter on operating systems that do not handle this executable format  themselves.
> The  **arguments to the interpreter consist of a *single* optional argument** following the interpreter name on the first line…  *(emphasis mine)*

So what env gets to see in its ``argv`` array when you write something like ``#! /usr/bin/env python3 -I -S`` is ``['/usr/bin/env', 'python3 -I -S']``. And there is no ``python3 -I -S`` anywhere to be found that could interpret your script. 😞

## The Solution

The `env` command in coreutils 8.30 solves this (i.e. Debian Buster only so far, Ubuntu Bionic still has 8.28). The relevant change is introducing a split option (``-S``), designed to handle that special case of getting all arguments mushed together into one.

In the example below, we want to pass the ``-I -S`` options to Python on startup. They increase security of a script, by reducing the possible ways an attacker can insert their malicious code into your runtime environment, as you can see from the help text:

```
-I     : isolate Python from the user's environment (implies -E and -s)
-E     : ignore PYTHON* environment variables (such as PYTHONPATH)
-s     : don't add user site directory to sys.path; also PYTHONNOUSERSITE
-S     : don't imply 'import site' on initialization
```

You can try the following yourself using `docker run --rm -it --entrypoint /bin/bash python:3-slim-buster`:

```console
$ cat >isolated <<'.'
#!/usr/bin/env -S python3 -I -S
import sys
print('\n'.join(sys.path))
.
$ chmod +x isolated
$ ./isolated
/usr/local/lib/python38.zip
/usr/local/lib/python3.8
/usr/local/lib/python3.8/lib-dynload
```

Normally, the Python path would include both the current working directory (`/` in this case) as well as site packages (`/usr/local/lib/python3.8/site-packages`).

However, we prevented their inclusion as a source of unanticipated code – and you can be a happy cat again. 😻

> *[This post originally appeared on my personal blog.](https://jhermann.github.io/blog/linux/know-how/2020/02/28/env_with_arguments.html)*
Free weekend at Vue Mastery starting on 13th of March!
Tags: javascript, webdev, tutorial, beginners
Published: 2020-03-10 11:42:02

Hi everyone,

Yesterday I received an email from Vue Mastery that announced that this weekend any course they made is free.

To reserve your spot follow this link [get free weekend link] (https://click.mlsend.com/link/c/YT0xMzczMjk5MzYzODc0MzQ2NzcxJmM9aDFoNiZlPTE5MjgmYj0zMjY0NDI3NzgmZD13OWU4bTJt.0ztXH0xYXFKcDjnDpBB5SzvZyqf5cPAU_Z_RWW0m_pc)

Update 

To learn more about the event visit this link [event link](https://www.vuemastery.com/free-weekend)

Also **Dear Reader**, you can start learning right now for free with this course from Vue Mastery [intro to vue](https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance)

So you will be prepared for this weekend and have the basic knowledge of Vue ready.

I am going to attend(be present) and learning.

> Important: **I am not affiliated in any way with Vue Mastery.**

Are you also going to be present **Dear Reader**?

Also, if you would like to help others, share this post on social.

Credits:

https://www.vuemastery.com/
Create Your Own S3 Service For Your Django Project
Tags: s3, aws, django, python
Published: 2020-03-10 11:38:37

---
title: Create Your Own S3 Service For Your Django Project
published: true
description: How to make an S3 replica with simple steps?
tags: S3, AWS, Django, Python
---

There are many projects with which you can install replica of Amazon S3 service in local environment. I am using the project named S3 Ninja from these. Let me tell you how to make an S3 replica with simple steps. 

[S3 Ninja](https://s3ninja.net/)

# Installation and Run Serve.

```
docker pull scireum/s3-ninja:4
docker run -p 9444:80 scireum/s3-ninja:4
```

I assume you have no problems and the installation is complete!

# Create a Bucket

![](https://i.hizliresim.com/CprZu9.png)

This was so easy!

## Codes to add settings for Django

You must install this package and add it to the app list. [django-storages](https://pypi.org/project/django-storages/)

```
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
AWS_ACCESS_KEY_ID = ‘access_key_id’
AWS_SECRET_ACCESS_KEY = ‘secret_access_key’
AWS_STORAGE_BUCKET_NAME = 'Bucket'
AWS_S3_ENDPOINT_URL = 'http://localhost:9444/s3/'
```

## And action

![](https://i.hizliresim.com/PzfT4q.png)

Upload an image in the project. You need to do this using `from django.core.files.storage import default_storage`. Now your installation process will serve your own S3 service.

![](https://i.hizliresim.com/uaI7FQ.png)
C/C++ hacks, part 1
Tags: cpp, productivity
Published: 2020-03-10 11:25:00

Even though C++ has gone too far these days by having several conventions like c++ 11/13 etc, programmers do not tend to use the new in-built library function, instead, they like to have their own logic or simple implementation. I would like to highlight some of the handy logic that all C/C++ programmers can use. 


Find the given number is odd or even, you can simply use the AND operator to see output bit 0 or not

if it is 0 even 
if it is 1 odd

```c++
#include <iostream>

using namespace std;


int main(int argc, char **argv)
{
     // find the number of even or odd
	int iNumber=101;
	if(iNumber & 1)
		std::cout<<"odd"<<std::endl;
	else
		std::cout<<"even"<<std::endl;
}

```

Let's assume, you are working with some protocol and need to build a raw buffer composed with tag and data (even your data is int/float/double, it will be written as serious by bytes) 

Now, as per the protocol definition, the tag must be maximum 2 bytes, so we can hold maximum tag data like 65535

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

As per our protocol convention, we are going to assemble 2 bytes for a tag, and then 4 bytes for data length, finally actual data buffer.

The application which receives this data can easily extract the data by do the following

First, read the two bytes, then convert to tag
Then read 4 bytes to read, how much data is resided in the frame
Using the above length parameter, it can extract data. 

So, how do we compose this frame

```c++
char *_zBuf ; // assume, it is already allocated
unsigned short usTag = (unsigned short) _iTag;

// get the first byte
((unsigned char*) _zBuf)[1] = (unsigned char) usTag & 0x00FF;
usTag >>= 8;
// get the second byte
((unsigned char*) _zBuf)[0] = (unsigned char) usTag & 0x00FF;

// now we need to write the length
unsigned int usDataLength = (unsigned int) _zData.length();

uint32_t uiLenConverted = htonl(usDataLength);
memcpy(_zBuf + 2, &uiLenConverted, sizeof(uint32_t));
// now write the data
memcpy(_zBuf + 6, _zData.length(), _zData.c_str());


```
XOR operator has many use cases in C++ due to the following properties

The XOR of a number with itself is zero.
A ^ A = 0

The XOR of a number with zero is the number itself.
A ^ 0 = A

The order in which you do XOR does not matter.
A ^ B = B ^ A

Assume the following use case
The set is given with a series of integers, where all the numbers are placed evenly except one. Find that number?

for example array[5] = {10,10,80,14,14}  , answer should 80

```c++
#include <iostream>

int FindOddOccurance(int arr[], int n)
{
    int res = 0, i;
    for (i = 0; i < n; i++)
    {
// using above mentioned XOR properties.
        res ^= arr[i];
    }
        return res;
}

int main(void)
{
    int arr[] = { 10,10,80,14,14 };
    int n = sizeof(arr) / sizeof(arr[0]);
    std::cout<<"The odd occurring element is :"<<FindOddOccurance(arr, n)<<std::endl;
    return 0;
}

```


Writing part 2...
Promises vs Callbacks in Javascript
Tags: javascript, webdev, productivity
Published: 2020-03-10 11:24:41

If you are a professional Javascript programmer, you must have previously worked with the Callbacks function and in some cases, you are forced to use an answer function within an answer function within an answer function and so on (especially when dealing with Asynchronous commands such as AJAX operations and dealing with files and databases, etc. .. .) Until you get a relatively complex and hierarchical code as you will see in the following code:


```javascript
function isUserTooYoung(id, callback) {
     openDatabase(function (db) { 
         getCollection(db, 'users', 
         function (col) { 
             find(col, { 'id': id }, 
             function (result) {
                  result.filter(function (user) { 
                      callback(user.age < 18) 
                    } 
                } 
            } 
        } 
    }

```

The isUserTooYoung function enables us to confirm that a particular user is an adult (over 18 years old), and for this, the connection is linked to the database, then the user searches to know his age and at last we confirm the age.

#Use promises
___________

Using promises, we will see that it gives us a clearer, simpler, and more semantic code. Every function that waits for an answer has a function that then picks up the answer from the function before it and passes it to the second function inside. With this concept, we can rewrite the previous code in a more elegant way as follows:

```javascript

function isUserTooYoung(id) { 
        return openDatabase(db) 
        .then(getCollection) 
        .then(find.bind(null, {'id': id})) 
        .then(function(user) { 
            return user.age < 18; 
        }); 
    }

```

This is code in Node.js, but the idea and process are correct for other JavaScript applications.

Certainly, now the code has become clearer to you and easier to understand, as we can say that the openDatabase function promised the getCollection function to access certain data Datas after the successful connection to the database, and if we wanted to use the isUserTooYoung function in our program then it would be this way:

```javascript

isUserTooYoung(id) 
 .then(function(result) {
   // Here you can deal with the end result
 }


```

Do not forget that there are other useful functions when using promises in JavaScript, such as the catch function, which is called when an operation or promises is not successful.

If you want to know more about JAVASCRIPT :

   * [Destructuring Functions in javascript Es6
](https://dev.to/alhiane/destructuring-functions-in-javascript-es6-3eoh)
   * [Object Destructuring Javascript ES6
](dev.to/alhiane/object-destructuring-javascript-es6-4g68)
   * [Array Destructuring Javascript ES6
](https://dev.to/alhiane/array-destructuring-javascript-es6-3e1m)
   * [explain the steps of execution of code in JavaScript
](https://dev.to/alhiane/explain-the-steps-of-execution-of-code-in-javascript-591k)
Selecionar 1 registro baseado no último registro inserido [Stackoverflow]
Tags: sql, subselect
Published: 2020-03-10 11:23:28

---
title: Selecionar 1 registro baseado no último registro inserido [Stackoverflow]
published: true
description: Selecionar 1 registro baseado no último registro inserido utilizando subselect, group by e a condição MAX 
tags: SQL, subselect
references: https://pt.stackoverflow.com/questions/26258/selecionar-1-registro-de-cada-id-baseado-na-ultima-data?newreg=09e713fdd601487ca75ec82ca68b2661
---

Consulta:

SELECT DISTINCT(TQ.[COD_VENDEDOR]), TQ.[VAL_META], TQ.[DAT_ATIVACAO]
            FROM 
                [dbo].[TB_META] TQ
            WHERE 
                TQ.DAT_ATIVACAO = (SELECT MAX(DAT_ATIVACAO) 
                                   FROM TB_META 
                                   WHERE COD_VENDEDOR = TQ.COD_VENDEDOR 
                                   GROUP BY COD_VENDEDOR)

Segue o link do registro: https://pt.stackoverflow.com/questions/26258/selecionar-1-registro-de-cada-id-baseado-na-ultima-data?newreg=09e713fdd601487ca75ec82ca68b2661
Easiest way to do a dark theme with CSS vars (and JS!)
Tags: css, javascript
Published: 2020-03-10 10:50:53

#1. Set up your HTML
```html
<body>
    <div class="container">
      <h1>My beautiful theme</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Repellat nihil nisi quidem pariatur optio iste vero id velit deleniti tenetur, sit deserunt.
      </p>
      <button id="theme-switcher">Switch theme!</button>
    </div>
</body>
```
We will use a simple button so that our users can change the theme.

#2. Set up your CSS, using vars
```css
:root {
  --background: #f7fafc;
  --container: #edf2f7;
  --text-primary: #1a202c;
}

.dark {
  --background: #4a5568;
  --container: #2d3748;
  --text-primary: #f7fafc;
}

body {
  background-color: var(--background);
  font-family: sans-serif;
  color: var(--text-primary);
}

.container {
  background-color: var(--container);
  padding: 10px;
  text-align: center;
}
```
The `:root` variables will be those used by default when the page loads, and `.dark'` matches the dark theme.
NB: You can define as many themes as you want

Now, if you apply the class "dark" to the body:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/69prywkoyjmylpdkk50v.png)

#3. Set up the "switch theme" button

```js
 const themeSwitcher = document.getElementById('theme-switcher');
      themeSwitcher.addEventListener('click', function() {
          document.body.classList.toggle('dark'); 
      })
```

We simply add an event listener on the button to change the theme on click! Now, if you click on the button, it works!

#4. Save the user's choice in localStorage

First, add this line on the eventListener:
```js
localStorage.setItem('theme', document.body.classList);
```

When the user changes the theme, we save it into localStorage.
Then, at the top of the script:
```js
if(localStorage.getItem('theme') === "dark") { 
    document.body.classList.toggle(localStorage.getItem('theme'));
}
```

Now, as soon as the user visits your site, the theme he has chosen will be automatically applied!
You can find the code here: https://jsfiddle.net/03h84v6m/1/

🦄
Ably Masterclass | Episode 2 - Building an IoT based realtime attendance system for Slack
Tags: beginners, tutorial, showdev, iot
Published: 2020-03-10 10:42:48

Hello again realtime tech aficionados 👋🏽

I just concluded the second episode of the masterclass series where I talked about building an RFID based access card scanner that can publish messages directly into a Slack channel. In this article, I’ll summarise what happened and link to all the essential resources you may need to build this yourself or learn more about the various components involved.

You can see the recorded video of the actual session on our [YouTube channel](https://www.youtube.com/channel/UCC-sGGUfT-ot_E8i1ARYQVw):

%[<iframe width="560" height="315" src="https://www.youtube.com/embed/qGg7lSsYC8o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>]

The slides presented during this masterclass episode are [available online](https://speakerdeck.com/srushtika/ably-masterclass-episode-2-building-an-iot-based-realtime-attendance-system-for-slack) and are very much self-explanatory. I’ll of course explain the rest in this article:

I started off the masterclass with a brief explanation of the all the concepts involved, including MQTT, Webhooks, IoT components, etc. Later moved onto explaining the code to build this app.

A [detailed written tutorial](https://www.ably.io/tutorials/reactor-event-zapier) to build this out is already available on our tutorials site.

![0*-R0ajwJnmvrAR1lV.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1583836109020/lzTD6mLt2.png)

At the end of this masterclass, I demonstrated the full application, picked up an access card and put it near the RFID reader and a Slack message magically came through as shown below:

![0*ID9YP7TFaQBHchH_.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1583836086605/qku0a95Nv.png)

Btw, I secretly announced a link to join our brand new dev community (which for now is the Slack org that you see in the screenshot above) which is still being properly set out. But if you’d like to get an early access to this community, [feel free to join in.](https://go.ably.io/join-dev-community) 🤓

### Useful resources from this masterclass episode
1. [Recorded masterclass video](https://youtu.be/qGg7lSsYC8o)
2. [Presentation slides](https://speakerdeck.com/srushtika/ably-masterclass-episode-2-building-an-iot-based-realtime-attendance-system-for-slack)
3. [A detailed written tutorial](https://www.ably.io/tutorials/reactor-event-zapier)
4. [GitHub repo with full source code](https://github.com/ably/tutorials/tree/mqtt-rfid-attendance-system)
5. [Ably Reactor integration docs](https://www.ably.io/documentation/general/events)

We’ll announce the next episode in this masterclass series very soon. Stay tuned! Ciao for now 👋🏽

In other very unrelated news, a super handy tip that I recently learned myself, press ctrl + cmd + space on your mac computer to launch the emoji keyboard 🎉🦄🌚🕵🏽‍♀️ Thank me later!