teleren/devto huggingface dataset:
Code Newbie
Tags: css, beginners, webdev, html
Published: 2020-06-11 08:59:51

 The other day was a Monday, and on Monday, like most people I look at it as a fresh week. A week where I can start anew, and decide what direction to take my life for the week, month, year, and beyond. Diets, workout plans, job goals, and learning all start on Monday, and for most, myself included, you fall flat on your face by Tuesday like the creature of gross habit you are. I joke, but only a little, because i can attest to the fact that I have done this process more times than I'd like to count, with everything I listed and more. 


 I've started Monday with egg whites and one slice of plain wheat toast, and then finished it with a 10 piece spicy nugget from Wendy's (if it's not spicy, you're wrong) and said to myself, "We will start again on Monday." I feel like that happens with most "goals" or "resolutions" we make with ourselves to do better and do more. ![Spicy Nuggets](https://cdn.vox-cdn.com/thumbor/8zgKLe7oMSpGJncXhFmOAutD-r8=/0x0:1500x500/1200x800/filters:focal(636x172:876x412)/cdn.vox-cdn.com/uploads/chorus_image/image/64996883/1500x500.7.jpeg)

 Since I was young it has always been this way, but I've finally decided to start something and stick with it, because at 30 years old I've wasted enough time breaking promises to myself to improve my life. I've always been interested in computers, and I've always disliked school, but not learning.  I enjoy learning, if I enjoy the material I'm learning about, and I’m not being forced by someone else to do it.  
  
 With that said, two months ago I began learning to “Code” and if you’re like me, you were not sure exactly what that meant, other than what you’ve seen in movies and on TV which are baseless and completely off 99% of the time. I realized that once I got that first “Hello World” to show up on a website after typing in some code into a text editor, this was what I wanted to do.  
  
 Fast forward to a few weeks ago, and I publicly committed to do 100 Days of Code on twitter, as a way to not only hold myself accountable, but also to give myself some drive and direction in what I'm doing and avoid that “Tutorial Hell” everyone talks about.  

 Now I've committed my second solution to the Frontend mentor challenge site, I've been coming along with CSS and while I may still be getting stuck on some positioning things, the fact that I've got grid down even a little bit makes me ecstatic. You can check out that project here! 

{% twitter 1270994667312680962 %}
 
 So I am also going to do my best to update this blog regularly, to keep myself fresh, and to hopefully teach some concepts along the way, and I’m sure I will make a fool of myself by posting improper code more than once. I look forward to hopefully meeting other like minded people, who are in a similar boat, and want to make the transition into coding/programming at a later stage in life.
Laravel Export PDF from html
Tags: laravel, php, pdf, html
Published: 2020-06-11 08:33:56

Generating PDFs in PHP can be tricky. The main struggle we have faced was making PDFs look exactly the same way as it looked in HTML.

In this tutorial, we will introduce a new library for generating PDFs from HTML.

Snappy is a PHP5 library allowing thumbnail, snapshot or PDF generation from a url or a html page. Under the hood, it is using two popular open source HTML to PDF command line tool. They are wkhtmltopdf and wkhtmltoimage.

Snappy is built with some simple yet very friendly API. We like it because of its simplicity.

It is time to get our hands dirty.

{% youtube P43fuBbmD1c %}

> [Laravel Export PDF](https://www.youtube.com/watch?v=P43fuBbmD1c "Laravel Export PDF")
Open Redirect in Flattr
Tags: hacking, bugsanderrors
Published: 2021-06-17 08:28:41

---
title: Open Redirect in Flattr
published: true
date: 2020-06-11 08:32:29 UTC
tags: hacking,BugsandErrors
canonical_url: https://hackberry.xyz/open-redirect-in-flattr
---

## Summary

This bug in Flattr was a low impact Open Redirect that allowed attacker to redirect the victim after authorizing Twitter.

## PoC

```
https://flattr.com/settings/connect/twitter?redirect=https://hackberry.xyz

```

## Timeline

- Found vulnerability - 5th June, 2020
- Made contact with Flattr - 5th June, 2020
- Reported vulnerability - 9th June, 2020
- Bug fixed - 11th June, 2020

## Reference

1. [https://cwe.mitre.org/data/definitions/601.html](https://cwe.mitre.org/data/definitions/601.html)
Building my first Django project with pages
Tags: python, django, hugo, jekyll
Published: 2020-06-11 08:30:27

I'm working through [Django for Beginners by William S. Vincent](https://djangoforbeginners.com/). Chapter 3 starts using templates and introduces Class-Based Views.

There is a section introducing Class-Based views, and then mentioning older Function-Based views. It was interesting to see this evidence of the framework progressing, though it's not so surprising for something that's a decade or so old!

The templating syntax was really neat. I'd seen very similar in Hugo and Jekyll, and so the idea of having a kind of 'placeholder' with `“{% block content %}{% endblock content %}` was nice to use. I've admittedly done very little webdev though. I was curious what other approaches might be common alternatives? If you have an example please let me know in the comments!

Something that was curious to me was the inversion of structure in django vs hugo.

In hugo, I've very regularly used partials such as in [the SatRdays theme here](https://github.com/satRdays/hugo-satrdays-theme/blob/cfc0873e03a7f278f8e09227875affbfcc50169f/layouts/index.html). Here, I have a single home page with my headers and footers, and 'inject' a partial into it with `{{ partial "nav.html" . }}`. In django I feel like it kind of works the other way. We create a project, and then the equivalent to a hugo partial would actually be a django app within the project? Then, each app shares top level content through lines like `{% extends 'base.html' %}` within each apps template?

It seems like it might be more brittle to me, but maybe also more powerful? There's more duplicate lines to get wrong, but also more opportunities to vary what it does?

What do veteran djangians(is that right?) think? Does anyone use both Hugo and Django, but for different projects and for specific reasons?
Consciously Thinking This Thought Today
Tags: womenintech, codenewbie, devjournal, codeland
Published: 2020-06-11 08:18:11

_This post was originally published on June 11, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Relaxed, chilly, cloudy Thursday morning. Here's what I'm working on today:

I'm consciously thinking this thought: "Doing one thing each day to move myself forward is far better in the long run than trying to 'do it all' every single day."

It feels good. It feels great! Sticking to it.

Yesterday, I recorded and edited the intro of a podcast I'm planning to launch in the coming weeks (!!!), and today I'll be recording/editing the outro. Exciting.

Walking through my CodeLand Conference talk. A couple days ago, I submitted my slides for review, and now I'm focused on tightening up my talk and really getting a few points down and solid.

If time allows: working on my Wellbean project code a little bit. I met with one of my old colleagues, a software engineer, last week via Zoom to catch up and go over some of my code, and he helped me find a specific area that could be improved/optimized. Again, if time allows, I'll hop into the project; if not, no worries.

Cheers!


Thanks for reading! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)
React useEffect hook delays before updating after dispatch
Tags: react, redux, reacthook, webdev
Published: 2020-06-11 08:02:21

I'm currently working on a side project, an app like <a href='unsplash.com'>unsplash.com </a> 

I have been able to get most of the features done, however I'm not satisfied with the performance I get when opening an image in a modal window for larger view. 

This issue starts when I have mapped through a large array of data, thereby creating numerous photo component-

```javascript
//Components

//For holding the image and the actions related to it
//It has an event listener to dispatch the current photo ID to State
<PhotoComponent payload={...}/>

//For creating a dialogue overlay for showing currently viewed image
<Modal />

//The component for loading the currently viewing image
//Has a useEffect() to listen to state so it renders the current image ID in state
<View payload={...}/>

//Liking the photo
<Like />

//Adding photo to collection
<Collect />

```

So basically all these components are wrapped inside the PhotoComponent. And when I map through the photos array-

```javascript
const photos = [...] //Where length is over 100
photos.map(p=> <PhotoComponent payload={p} />)

```
And click on an image, it is supposed to dispatch to state the clicked image ID so that I retrieve that ID in state. 
However this event is dispatched and state updated with the image ID. 

However, the useEffect() hook takes time (about 2-3sec depending on how much the photos are) to update the <View /> with the value from state. 

This is really impacting on the app and making it slow to render. I am learning React and I can't think of a better way to solve this. 

I'm sorry if I'm not being descriptive enough. 

Summary is:
1. Click on a photo
2. Dispatch an action to update state with the photo's ID
3. Opens up a modal to load the image whose iD was dispatched in 1 above

The problem is the modal component delays before it is updated with the item in state (useEffect())

And if the photos are over 200, it takes even more time to effect. 

My observation is, it seems there is a loop running through all the images before the update is done. 


I need help please, can't seem to figure this out. Thanks
Webroot.com/safe
Tags: webroot, webrootcomsafe, webrootsafe
Published: 2020-06-11 08:01:34

 <a href="https://howebroot.com/">webroot.com/safe</a> - Internet is the basic need in this modern world of technology for getting various information, even for transactions, shopping, and much more. Theexcess use of the internet invites various malware and inferior elements into the system. For avoiding these elements from the device, it is recommended to use the most reliable antivirus program, "<a href="https://iewebroot.com/">webroot.com/safe</a> ." It keeps the device error-free by removing multiple viruses and malware from the device.
linux : user management and permission
Published: 2020-06-11 08:01:23

This is one of the best part of linux, we can grant access for all services, directories, files, and even commands that can be executed for a specific user or group.

---

# User management

- Check who am i

```
$ whoami
```

- Check the user id

```
$ id USERNAME
```

- Check the group of user

```
$ groups USERNAME
```

- Check who is currently logged in

```
$ w
```

- Check the last logged in

```
$ last
```

- Change user

```
$ su
```

- Add a new user

```
$ useradd USERNAME
```

- Set password for a user

```
$ passwd PASSWORD
```

- Change user name

```
$ usermod -l USERNAME NEW_USERNAME
```

- Add a user to a group

```
$ usermod -a -G GROUPNAME USERNAME
```

- Change user primary group

```
$ usermod -g GROUPNAME USERNAME
```

- Remove user from a group

```
$ gpasswd -d USERNAME GROUPNAME
```

- Delete a user

```
$ userdel -r USERNAME
```

- Lock a user

```
$ passwd -l USERNAME
```

- Unlock a user

```
$ passwd -u USERNAME
```

---

# Group management

- Add a new group

```
$ groupadd GROUPNAME
```

- Change group name

```
$ groupmod -n GROUPNAME NEW_GROUPNAME
```

- Delete a user

```
$ groupdel GROUPNAME
```

---

# Permission

After create a user or group, we can grant access for specific user or group.

Permission format :

```
rwxrwxrwx
```

First 3 characters are the user permission, next 3 characters are the group permission, and the last 3 are other permission.

- `r` is for `read` with value `4`
- `w` is for `write` with value `2`
- `x` is for `execute` with value `1`
- `-` is for `no permission` with value `0`

We can also use the value of the characters to define the permission. Simply sum the values of the permissions for each role, and use only 3 numbers to define the permission.

```
# rwxrwxrwx
777

# rwxr-x-rx
755

# rwx------
700
```

---

We can see the files or directories permission by run `ls -l`.

```
$ ls -la
drwxrwxrwx 1 root root  96 Jun 11 07:58 directory
-rwxr-xr-x 1 zaki zaki  96 Jun 11 07:58 file.txt
```

The first column is the permission, the third column is the user, the fourth column is the group name.
Learning React with Typescript
Published: 2020-06-11 07:48:56

I come from an Angular with Typescript background and wish to learn React. 

Could somebody suggest me methodical way to approach learning this new framework. I am looking for suggestion of good courses that will bring you up to speed. I understand it is not a complete end to end framework like angular so need to understand what are the additional libraries that I need to be focusing on while learning React.
What Is New In Flutter 1.17 And Dart 2.8?

Tags: flutter, mobileapps, applications, techtal
Published: 2020-06-11 07:23:44

Flutter is a cross-platform programming framework used for developing Android, iOS apps, and now it’s progressing towards the web. Flutter uses Dart programming language to build android, ios, web apps with a unified UI look across all. The first release for Flutter and dart for the year 2020 is out now.

This new version of Flutter has closed 6339 issues and came with many performance level improvements. During the release of Flutter, the whole world is facing the crisis because of pandemic and most of you are working from home, hence Flutter has named this release as Work-From-Home Edition. 

Let’s see top Flutter 1.17 features with came with this stable release:

20-37% rapid Navigation within the default case
Up to 40% decrease in CPU/GPU usage for animations in iOS
Application size is reduced up to 18.5%
70% of memory reduction scrolling through large images
The default use of Apple’s Metal graphics API, improving rendering time by around 50 percent on iOS
You can also know- Why Flutter is golden technology for ios app development? Flutter 1.17 has introduced a new widget NavigationRail designed by Material Design Team and has also improved the fabric DatePicker widget. 

Let us see the details of the new features.

**Features Of Flutter 1.17-**
*1. Mobile Performance And Size Improvements-*
Flutter 1.17 release is mainly focused on performance and memory improvements. By upgrading the app to the new version, your users can experience faster animations, smaller app size, and low memory use. You can experience 20% to 37% speedup for the default navigation case. There is 40% reduction in CPU/GPU use for ios animations, counting on the hardware. 

This release comes with app size improvement with some fixes that gives an enormous result.  Also, this comes with a 70% reduction in memory usage while scrolling through large images and increases the performance. 

*2. Material Widgets-*
Flutter 1.17 supports new material widgets and also updates to the existing widgets. With this release, NavigationRail is added, which is a replacement widget that gives a responsive app navigation model. It is excellent for apps that will switch between mobile and desktop form factors. DatePicker and TextSelection overflow widgets have also been updated. DatePicker’s new visuals match the updated Material guidelines and add a new text input mode. Now TextSelection has improved fidelity for iOS and Android when buttons are longer than can be displayed without overflowing. Google also releases a new Animation package that provides prebuilt animations by implementing the new Material motion specifications. In short, new release brings- 

The new NavigationRail widget
Updated Material DatePicker widget
Updated text selection overflow on Android
Updated text selection overflow on iOS
*3. Google Fonts-*
Know more at- [https://solaceinfotech.com/blog/what-is-new-in-flutter-1-17-and-dart-2-8/]
How to remove white color circular border in google devices like pixel
Tags: android, titanium
Published: 2020-06-11 06:59:23

Here is step :

Go to tiapp.xml
Edit android->mainfest->application touple
Previously it was :

`<application android:theme="@style/Theme.connectMobileTheme" >`
After changed :

`<application android:theme="@style/Theme.connectMobileTheme" android:roundIcon="@mipmap/ic_launcher_round"  android:icon="@drawable/appicon" >`

This will manipulate below file :
`/Projects/titanium/build/android/AndroidManifest.xml` file to apply.

For this you required to maintain icon inside `/Projects/titanium/platform/android/res/`

![Screenshot of file structure ](https://dev-to-uploads.s3.amazonaws.com/i/ofo5ofo7qc76k53tmuke.png)
https://i.stack.imgur.com/34c0N.png
Subscription in Flutter/Dart (Support)
Published: 2020-06-11 06:58:23

Someone should kindly help me with this?

When a user clicks on an option within my app, i want at that time the app should check if user has subscribed. If not, the app should display payment or subscription page(the user should have 4 different subscription plan to choose from), But if already subscribed then directly to the next page.
Introduction to TensorFlow
Tags: opensource, tensorflow, python, machinelearning
Published: 2020-06-11 06:55:39

TensorFlow is an open-source neural network framework that makes it easy to build and deploy Machine Learning (ML) models across many different devices.  In order to install TensorFlow, you’ll need to have Python installed first.

You can reference the following if you need some help getting TensorFlow installed:
[https://www.tensorflow.org/install/pip#virtual-environment-install](https://www.tensorflow.org/install/pip#virtual-environment-install)

I would strongly recommend installing TensorFlow in a virtual environment.  Once that’s installed, if you’re comfortable with python you should be familiar with the concept of importing packages.  One way of checking you have TensorFlow installed correctly is to try to install it while in interactive mode.

For example:

    (venv) … $ python
    …
    >>> import tensorflow as tf
    
Well, don't stop there.  Let's try to print the version:

    >>> print(‘tensorflow version’,tf.__version__)
    tensorflow version 2.2.0
    
How about add?

    >>> print(tf.add(1,1))
    tf.Tensor(2, shape=(), dtype=int32)
    
You good???  No vicious erros??  I’m impressed.  You appear to be somewhat comfortable with TensorFlow, so I think next time we’ll be ready to talk about Keras, which is a high-level neural network built on top of TensorFlow.

**References:**

 1. A LIGHTNING-FAST INTRODUCTION TO DEEP LEARNING AND TENSORFLOW 2.0.
    [https://builtin.com/machine-learning/introduction-deep-learning-tensorflow-20](https://builtin.com/machine-learning/introduction-deep-learning-tensorflow-20).  Last accessed: 6/11/2020.
    
 2. TFRT: A new TensorFlow runtime.[https://blog.tensorflow.org/2020/04/tfrt-new-tensorflow-runtime.html](https://blog.tensorflow.org/2020/04/tfrt-new-tensorflow-runtime.html).  Last accessed: 6/11/2020.

 3. The Google’s 7 steps of Machine Learning in practice: a TensorFlow example for structured data. [https://towardsdatascience.com/the-googles-7-steps-of-machine-learning-in-practice-a-tensorflow-example-for-structured-data-96ccbb707d77](https://towardsdatascience.com/the-googles-7-steps-of-machine-learning-in-practice-a-tensorflow-example-for-structured-data-96ccbb707d77).  Last accessed: 6/11/2020.
Understanding Istio: part 7 – Traffic Mirroring
Tags: kubernetes, devops, docker, beginners
Published: 2020-06-11 06:44:52

---
title: Understanding Istio: part 7 – Traffic Mirroring
published: true
description: Serie of sketchnotes about Istio. Explaining in a visual way Istio principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Istio in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/oebge57yc4oivm6vbin6.jpg
---

Understanding Cloud technologies, like Kubernetes, can be difficult or time-consuming. In order to spread knowledges about it, I started to create [sketchnotes about Kubernetes](https://dev.to/aurelievache/kubernetes-sketchnotes-pods-4ib0) and know it's time to talk about a perfect companion of Kubernetes, a service mesh, Istio.

We continue our new serie of Sketchnotes about Istio, with a sketchnote about traffic mirroring.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oebge57yc4oivm6vbin6.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7vsyy4ft5njha7pujg37.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/17mr5d7uaq2lqzd4gkak.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tcm5h9slmc44hoa5q0qz.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7cu0k8n5hf7f1zshist7.jpg)

If you are interested, I published a book with all the sketchnotes on Istio (and new ones!): ["Understanding Istio in a visual way"](https://gumroad.com/aurelievache#vJYhM).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
CSS Blurry Background Image
Tags: css
Published: 2020-06-11 06:34:13

Today we are going to look into making a background image look blurry. It is easy to achieve in `CSS`.

Let's get started!

## HTML Structure

We are going to create two divs next to each other, one with a blurred image and one with a normal one.

```html
<div class="container flex">
  <div class="blur flex">
    <span>BLUR</span>
  </div>
  <div class="no-blur flex">
    <span>NO-BLUR</span>
  </div>
</div>
```

Nothing fancy, just a container and two divs with a span inside.

> Do note the span will also become blurry in this setup!

## CSS Blur Filter

For the container part, we use [flex box centering](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/).

And for the divs, we make them both 50% width and 100% height.

This is going to be the no-blur one:

```css
.no-blur {
  background: url('https://images.unsplash.com/photo-1591775995956-a6c811374d9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')
    no-repeat center center;
  background-size: cover;
  width: 50%;
  height: 100%;
}
```

And then for the blur we add the following extra:

```css
filter: blur(8px);
-webkit-filter: blur(8px);
```

This compiles into the following code:

```css
.blur {
  background: url('https://images.unsplash.com/photo-1591803452190-8f1455681025?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')
    no-repeat center center;
  background-size: cover;
  width: 50%;
  height: 100%;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
```

You can play around with the blur levels in this Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="rebelchris" data-slug-hash="bGEEKrq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Blurry Background Image">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/bGEEKrq">
  CSS Blurry Background Image</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

This is sadly enough not the best-supported `CSS` function, but still very nice to use as the extra spice on your website.

![CSS Filter support](https://caniuse.bitsofco.de/image/css-filters.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)