teleren/devto huggingface dataset:
OOP: Secrets injection with delegates
Tags: oop, security, codenewbie, programming
Published: 2021-04-21 21:53:20

In this short post I wanna share just a way to pass a secret to a specific service.

Let's suppose we have a service class that it needs to work of a secret (e.g. a *password*) or something containing sensitive data (e.g. a *connection string*). 

In this scenario, an instinctive approach could be something like shown below, where a class receive a plain text secret in the constructor and provides a service using this secret.

```
   public class DummyService
    {
        private string _Secret;

        public DummyService(string secret)
        {
            _Secret=secret;
        }

        
        private void DoSomenthing(string secret)
        {
            //Doing stuff
        }

        public void ProvideService()
        {
            DoSomenthing(_Secret);
        }
    }

```

But what's wrong with this approach? Eventhough apparently it seems all OK, actually there is a security problem: 

*The secret is passed in plain text and stored in memory as is, not encrypted, during all the life cycle of the service, and so it could be (potentially) read by some utility able to dump and analyze the memory*.

How can we solve this problem? (or how can we reduce this risk?)

A safer approach could be to avoid passing the plain text secret to the constructor  but *just a way to get it*. The idea is to *run a function* to get this information. 

A [**delegate**](https://en.wikipedia.org/wiki/Delegate_(CLI)) could be a solution because it's just we need, a *function pointer* giving us a way to represent a method to get the secret without store it in memory. 

Take a look at this second version of our *DummyService* where we inject a *secret reader* (our delegate).

```
    public class DummyService
    {
        private Func<string> SecretReader;

        public DummyService(Func<string> secretReader)
        {
            SecretReader =  secretReader ?? throw new ArgumentNullException(nameof(secretReader));
        }

        
        private void DoSomenthing(string secret)
        {
            //Doing stuff
        }

        public void ProvideService()
        {
            DoSomenthing(SecretReader.Invoke());
        }
    }
```
In this version of our *DummyService* the injected delegate (the secret reader) could implement a decryption function to get our *plain* secret. 

In this way we have reduced a lot the **plain secret memory life time** because the secret will be used just when it'll be necessary reducing so the probability that it could be read in memory by using some utility.

See you

AM
How to embed GIFs on dev.to posts with Azure
Tags: 5days5blogposts, azure, devto, gifs
Published: 2021-04-21 21:51:16

Yesterday I had an idea to show text completion by Autohotkey with animated images (GIFs)
{% link https://dev.to/kopieczekdev/speed-up-git-commands-with-autohotkey-m46 %}

Unfortunately dev.to changes pasted images to *.png. After the image is pasted to the text, it's being changed to a proper markdown image placeholder: 
```markdown
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj3ef8hw44slxqk1agn1.png)
```

Seeing AWS in the image source immediately triggered me to use my existing Azure subscription to host *.gif files. 

# How to upload GIF to Azure Storage

1. Let's assume you have existing Azure subscription. If not, you may consider reading/watching different tutorial.
2. Create a new Storage Account. I suggest using a new, separate resource group for your "blog stuff" 
    ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2aye92j18p9wgdgevfu.png)
    ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdbt7r947sbr98svr2ry.png)
  
3. Provide account name (f.e. "kopieczekdevstoraccount"), select Azure region of your choice (any will be good, as [dev.to](http://dev.to) readers are from all over the world), set **standard** performance, **v2** account type and replication of your choice (I chose LRS because I don't need any backup). Other settings are irrelevant.   
4. Wait for the account to be created and create a container. Give it any name, f.e. "images" and set **Blob** public access level.
    ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23kxdtrfsy7yadnjfh78.png)
    ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92eynwpw78zqzv9w9519.png)  
    
5. Now just open newly created blob and upload your GIF.
6. Click on the uploaded gif on the blobls list and copy the blob URL. 
    ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udcuou9vlm3gcc6n8hbk.png) 

7. Paste the URL to your post:
```markdown
![image](https://kopieczekdevstoraccount.blob.core.windows.net/images/No1p3JHaGb.gif)
```

Voila! Now you can use GIFs in your [dev.to](http://dev.to) posts.
Where You Stand Depends On Where You Sit
Tags: testing, agile, 5days5blogposts
Published: 2021-04-21 21:48:51

Let us come back for a moment to my [previous post](https://dev.to/annadayl/weird-testing-job-interview-questions-1o42), where I shared "weird" questions that I was asked on job interviews for software testing role.

Yesterday, during our late evening walk, I asked my partner, a .NET programmer, how he would test a soda machine. Without giving it much thought, he started spilling questions:

* _does it make soda?_
* _is it refillable, like in Pizza Hut (or any kind of fast food chain place)?_
* _what kind of flavours are there?_
* _when you push the button, does it give you the soda you requested?_
* _is the soda sufficiently sparkly?_
* _is the soda cold?_

He didn't even think of a _vending machine_. I asked him other questions, about the pen, the paper cup and the clock, and his train of thought was slightly different from mine in each case.

**To build a shared understanding about the product, that the development team has to deliver, we need different perspectives.** 
Imagine a simple user story that is two sentences long. Everyone _seems to get it_, but often it turns out there were some misconceptions, because everyone interprets those sentences differently. 
It is important for the team to consists of a diverse people - men and women, people with various cultural background, ethnicity or geographical location, etc. They bring their own perspective, knowledge, insides and experiences to the table.
Add meta tags for social media with HtmlWebpackPlugin
Tags: javascript, webdev, webpack, html
Published: 2021-04-21 21:10:42

Social media meta tags are `<meta>` tags in the `<head>` of your web page that control how URLs 
are displayed when shared on social media. 

If you are using [`webpack`](https://webpack.js.org/) you can use the `meta` option from the [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) to add the 
social meta meta tags to your web page: 

```js
// webpack.config.js

// ... 
new HtmlWebpackPlugin({
  meta: {
    'description': { name: 'description', contnet: '...' },
    'keyword': { name: 'keywords', content: '...' },
    'og:title': { property: 'og:title', content: '...' },
    'og:description': { property: 'og:description', content: '...' },
    'og:type': { property: 'og:type', content: 'website' },
    'og:url': { property: 'og:url', content: '...' },
    'og:image': { property: 'og:image', content: '...' },
    'twitter:card': { name: 'twitter:card', content: 'summary_large_image' },
    'twitter:title': { name: 'twitter:title', content: '...' },
    'twitter:description': { name: 'twitter:description', content: '...' },
    'twitter:image': { name: 'twitter:image', content: '...' }
  }
})
// ...

```
🚧 The Einstellung Effect 🚧
Tags: productivity, watercooler, todayilearned, programming
Published: 2021-04-21 21:01:19

Hello everyone, welcome to my very first blog post! I hope it will provide you some value, and what's more important, a bit of reflection. 🧠

Today I'll briefly cover the Einstellung effect, something I recently discovered while progressing [Learn how to Learn course](https://www.coursera.org/learn/learning-how-to-learn) by dr Barbara Oakley. 

## What does it mean? 🤔
The German word *Einstellung* can be loosely translated as **mindset** or **attitude**. In terms of problem solving, it means to create sort of an automated state of mind. 🤖 This can be useful, especially when we want to master a repetitive manual task - see this [takoyaki master](https://youtu.be/Kki-cUV_FCs?t=303). In case of a software engineer however, it can sometimes make our life harder!

## Why does it matter? 🤷
The Einstellung can be also referenced as a problem solving set. It determines our predisposition to handle given problem in specific way, often ignoring better or more appropriate solutions. Think of a last time when you solved an issue that you found relatively easy, maybe even trivial - depending on your experience it can be related to implementation, design or architecture. You didn't give it much thought, did you? Yeah, and neither did I! 

Our brains have this amazing superpower to create **neural patterns**, kind of paths that our mind follows step by step after initial thought. It takes time and repetition to create such patterns, otherwise they faint and disappear. When we learn something new and keep repeating this thing over and over, it strengthens our neural pattern and leads us to automaticity - this is exactly what Einstellung is all about.

## How can we prevent it from affecting us? 🛡
The best way to make sure we don't fall for our mind's traps is stopping for a while and simply asking yourself a question - is this really the best way to do it? Try a different approach from time to time, always keep doing your research. Look for current state-of-art solutions, compare it with yours. Simply put, give it another thought!

## Wrap up 🎗
Today we learned about The Einstellung, a of mechanised way of thinking. We discovered how this negative effect of previous experience can influence our problem solving effects, and how to handle falling for it!

## Thank you for reading! 🙇 
Consider giving me a feedback on how to improve in writing, I will be grateful for life. 🙏
Also, follow me here and on Twitter ([@kasper_mroz](https://twitter.com/kasper_mroz)) if you found my post interesting and/or want to connect!
Crossplatform Tensorflow Lite
Tags: android, ios, tflite
Published: 2021-04-21 20:59:07

## Why crossplatform?
Today Tensorflow Lite is available as a library for both iOS and Android using Swift and Kotlin, and this is great if all you need is just running inference using some model. But what if your pipeline is more complicated? like running various image processing tasks before/after using the model output? in that case it would be more efficient to develop the entire pipeline once in C++, and use it in both iOS and Android.

In this video series we will see how to run inference in C++ using Tensorflow Lite C API and OpenCV. We'll also see how to use that code later in iOS, Android and Windows.

[Source code on GitHub](https://github.com/ValYouW/tflite-crossplatform)

## Converting Tensorflow Object Detecion model to TFLite
{% youtube llEkDLnLocE %}

## Running Object Detection using TFLite C API
In this video we'll see how to develop an ObjectDetector class in C++ that we will be used across all platforms.

We will also test our detector on Windows.

{% youtube EPF0R0M4Fb0 %}

## Running Object Detection on Android

{% youtube axsE34RzbrI %}

## iOS
{% youtube Gx_kdTkW_PU %}
Loopstudios Landing Page 🤩
Tags: javascript, html, css, 100daysofcode
Published: 2021-04-21 20:54:24

Loopstudios Landing Page Using HTML5, CSS3 & LOCOMOTIVE SCROLL JS 😍

Demo : https://loopstudios-lp.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day28

My #100DaysOfCode Challenge
https://github.com/saidMounaim/100DaysOfCode
How To Choose Which JavaScript Libraries To Use (Part 1)
Tags: javascript, webdev
Published: 2021-04-21 20:54:11

So you want to create a JavaScript project? Great! Which library or framework are you going to use, React? Maybe Vue.js? Maybe you prefer using just Vanilla JS? Heck, even jQuery might be an option!

OK, let's say you choose React. Now, how will you do the state management? Redux, maybe MobX? Or maybe I rely just on React Hooks and the Context API?

**Choosing the right tools is one of the most important decisions that you'll have to make when you start a new JavaScript project.** These decisions have long-term consequences, good and bad, for your project. And they play a crucial role in the success (or failure) of it.

In this four-article series, I'll give you my tips and tactics so you can choose the best libraries for your JS project.

## Take Into Account Project Size

**In smaller projects, you should prefer tiny libraries** (or even Vanilla JS) with little boilerplate code. On the other hand, larger, more **complex libraries are better suited for larger projects** that might be worked on by many people.

One of the advantages of (some) complex libraries is that make the code easier to maintain (if you use them properly, of course.) at the cost of more boilerplate code, increased build times, and larger bundle sizes.

However, small codebases are easier to maintain. That means, if you add complex tools you'll get the disadvantages, but not the benefits (because you already had the benefit of maintainability.)

It doesn't necessarily mean that you should use only larger frameworks and libraries on big projects. Size still matters and **if you find a smaller library that does the same thing and does it well, it can be a good option**, as long as they meet the other requirements in this series.

In the next article of this series, I'll talk about comparing new and shiny libraries vs. popular and "safer" ones, and when to choose one over the other.
---
p.s. Did you like what you've read? Every week I send an email with free tips and insights to become a better JavaScript dev. If you're interested, [click here to subscribe](https://nicozerpa.com/newsletter/).
My Remote Productivity Hacks
Tags: productivity, hacks, tips
Published: 2021-04-21 20:53:12

Is remote work something new for you? Are you struggling to keep the productivity you once have in the office?  
These are some tips that can help to improve your productivity levels.

## Long-running Slack threads
In many cases, starting a quick Zoom call will save a lot of time.

## Notifications overload  
Slack, e-mail, meetings, OS... too many notifications!   
Go into do not disturb.  

**Slack:** `/dnd`  
**macOS:** Go to Notification Center and tap `Do Not Disturb`. This is better as everything will be muted.

## Are you in too many channels?
Leave channels that don't offer any value.

## Meetings, meetings and more meetings
* block your calendar.
* once a while, when possible, take calls outside your home... get some fresh air.
* be honest and let people know if the conversation needs to move on (thereby speeding up your meetings).

## Outside work distractions
* get headphones
* enable do not disturb on your mobile

## Time management
Have you heard about [Pomodoro Technique](https://en.wikipedia.org/wiki/Pomodoro_Technique)?
It is an extremely useful time management method that helps to break down work intervals separated by short break intervals.

You don't need to manage the intervals manually, there are many tools that can automatically do it for you.  
My choice is [Flow](https://flowapp.info), a minimalistic pomodoro based focus timer. Increase your productivity and reduce stress at the same time.


Those are the hacks I use daily to improve my productivity. What about yours?
What off-the-beaten-path CI/CD Tools Do You Like?
Tags: discuss, devops
Published: 2021-04-21 20:50:12

Hi everyone. I'm wanting to move my current project away from TravisCI as I feel their quality and dedication to OSS has sharply declined since being publicly acquired and letting go many of their developers.

I'm looking for suggestions on a free (or cheap) hosted CI/CD service like Travis or Circle. I don't want to use CircleCI though because that's what my team uses at work and I don't want to get any personal and professional wires crossed.

I'm especially interested in hearing about newer or less known tools if you have any to recommend.

Thanks in advance!
Django with Tailwind (JIT) and Hot Reloading
Tags: django, tailwindcss
Published: 2021-04-21 20:48:05

---
title: Django with Tailwind (JIT) and Hot Reloading
published: true
description: This article is about setting up Django with the latest Tailwind v 2.1.1 with JIT option
tags: django, tailwindcss 
//cover_image: https://direct_url_to_image.jpg
---

I was trying to set up the latest Tailwind (JIT) option for my latest Django project.
Thanks to the Django-Tailwind package from Tim Kamanin, in less than just 10 minutes, I was able to spin up a Django dev setup with 'hot reloading' feature.

####steps involved 

```python
python -m pip install django-tailwind
```

######Add 'tailwind' to INSTALLED_APPS in settings.py:

```python
INSTALLED_APPS = [
  # other Django apps
  'tailwind',
]
```

######Create a Tailwind CSS compatible Django app, I named it _theme_:

```python
python manage.py tailwind init
```

During the initialization step, choose between Just in time (jit)

Then we need to add the newly created _theme_ app to INSTALLED_APPS in settings.py:

```python
INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme'
]
```

Register the generated 'theme' app by adding the following line to settings.py file:

```python
TAILWIND_APP_NAME = 'theme'
```

Make sure that INTERNAL_IPS list is present in the settings.py file and contains the 127.0.0.1 ip address:

```python
INTERNAL_IPS = [
    "127.0.0.1",
]
```
Install Tailwind CSS dependencies, by running the following command:

```python
python manage.py tailwind install
```

The Django Tailwind comes with a simple base.html template located at theme/templates/base.html. 

If you are using your own template just add `{% tailwind_css %}` to the base template:


```python
{% load tailwind_tags %}
...
<head>
   ...
   {% tailwind_css %}
   ...
</head>
```


The `{% tailwind_css %}` tag injects appropriate stylesheets and, when you’re in Development mode, connects to the browser-sync service that enables hot reloading of assets and pages.

Now you should be able to use Tailwind CSS classes in HTML. 

Start the development server by running the following command and you are done :)

```python
python manage.py tailwind start
```

For more details visit

[https://github.com/timonweb/django-tailwind] (https://github.com/timonweb/django-tailwind)
Workin' Styles Real Quick! Semantic for ReactJS
Tags: react, css, bootcamp, beginners
Published: 2021-04-21 20:22:26

Web Dev bootcamps are a very draining experience. The deluge of information is unrelenting and difficult to manage. Anything that might be done to ease headaches could be considered a blessing!

In labs, there are many quirky projects that provide pre-built chunks of apps with nice looking CSS that let us focus on the work at hand. When it comes to scratch built projects however, we don't have that luxury. And sometimes you just want something nice to look at while you're slamming your head against the wall trying to unlock the functionality of your amateur logic. 

In the past I have tried some other frameworks in the past but they've all left me a bit confused and unsure of their full potential. Recently I dove into Semantic UI for a React project, and I cannot believe how simple it was! So if you are like me and need shallow, pretty looking nascent web apps to keep you coding for your boot camp, check this out.

```$  npm install semantic-ui-react semantic-ui-css```


Throw that command into your bash. And then, in your entry file (which is often index.js) include this line at the top with your imports:

```javascript
import 'semantic-ui-css/semantic.min.css'
```

That's the setup. I know it's crazy! 

Semantic is a front-end framework that allows you to style very quickly. Like Bootstrap, it has some pre-defined stylings and layouts that allow you to put together a site lickity split. Bootstrap is a bit more involved and is a bit more restrictive, so for a beginner, introduction Semantic styling components with Hooks in React has been a dream.

In any component you will be rendering UI elements that you will use Semantic for, you'll need an import line at the top like anything else.

```javascript
import { Button, Divider, Form, Grid, Segment } from 'semantic-ui-react'
```

So what this line is doing is grabbing those five specific components from the Semantic frame work. Then you implement them in your just by calling them in your rendering.

```javascript
<Segment placeholder>
    <Grid columns={2} relaxed='very' stackable>
      <Grid.Column>
        <Form>
          <Form.Input/>
          <Form.Input/>
          <Button content='Login' primary />
        </Form>
      </Grid.Column>
      <Grid.Column verticalAlign='middle'>
        <Button  />
      </Grid.Column>
    </Grid>
    <Divider vertical>Or</Divider>
  </Segment>/>
```

You can pass down props and logic through these just like any other component. This plug and play functionality is possible because Semantic has official integration with React. You can go to their official [documentation](https://react.semantic-ui.com/) and see a very lengthy collection of prebuilt objects you can pick and choose from. And if they _don't_ have something you want, you can build it out in your own css file and reference it without the framework yelling at you.

This is a very basic entry into a framework that does have a decent amount of depth, but it is very easy to start playing around with. Hopefully, this can help you produce some slick styling in your developing apps.
How To Add Styling To An Active Link In NextJS
Tags: nextjs, react, router, nav
Published: 2021-04-21 20:20:00

For my latest project, I wanted to change the background color of the active navigation link in the `<Header>` when being clicked. When working with `<Link>` in React (using React-Router) in the past, I had the possibility to add an `activeClassName` to the `<Link>` to change the style when being active. But this built-in `<Link>` is not available in NextJS. Let me show you the differences and how you can add an active class to a `<Link>` in NextJS.

---

## Table Of Contents

1. [React's `activeClassName`](#chapter-1)
2. [Create An Active Link In NextJS](#chapter-2)

---

## 1. React's `activeClassName`<a name="chapter-1"></a>

This special version of the `<Link>` tag is called `<NavLink>` and adds styling attributes to the rendered element when it matches the current URL. There are two different ways to add styling.

### activeClassName: string

The class is given to the element when it is active by writing:

```
<NavLink to="/about" activeClassName="active">
  About
</NavLink>
``` 

### activeStyle: object

The styles is applied to the element when it is active by writing:

 ```jsx   
<NavLink to="/about" activeStyle={{fontWeight: "bold"}}>
  About
</NavLink>
```    

## 2. Create An Active Link In NextJS<a name="chapter-2"></a>

The default `<Link>` component from NextJS doesn't allow to distinguish between active and non-active links. In NextJS, you can use the built-in router to detect an active link.

I am using the `useRouter` hook inside my "Header function component" and created a ternary operator to check if the `<Link>` to style matches the currently displayed route.

Here's the code:

```jsx
import Link from 'next/link';
import { useRouter } from 'next/router';

export const Header = () => {
  const router = useRouter();
 
  return (
    <header>
      <Link href="/">
        <a className={router.pathname == "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  )
}
```

For more information on `next/router` check out the [documentation](https://nextjs.org/docs/api-reference/next/router).


---
![Thank you](https://docs.google.com/uc?export=download&id=1H1M4tSYBAJPnIuuK_FJ2iWnfyNfyG8Xr)

_Thanks for your reading and time. I really appreciate it!_