teleren/devto huggingface dataset:
A brief guide to Animations in CSS
Tags: webdev, css, codenewbie, programming
Published: 2021-04-10 02:49:02


Don't be afraid of animation. They're easy. This small started guide will help you in creating 4 simple type of keyframe animations. 

---

## Keyframes

You can use CSS keyframes to create some cool animation by transitioning between CSS properties. This quick intro to keyframe animation will cover the animation properties and show you five simple examples. 

### Animation Properties 

To apply keyframe animations to your element you need to use the animation properties. Think of these as the setting for the animation. 

```css
.animated-element {
  /*The name of the animation keyframes */
  animation-name: rotate;
  /*How long the animation should be*/
  animation-duration: 0.5s;
  /*How many times should it play*/
  animation-iteration-count: infinite;
  /*Anyd elay before the animation starts*/
  animation-delay: 1s;
  /*Specifies the speed curve of the animation*/
  animation-timing-function: ease-in-out;
}  
```

### Animation keyframes 

You also need to create the keyframes. An animation has timeline (0-100) and you can set a keyframe at any point in the timeline to change the look of the element using any CSS property. To code will then work out the frames in between and leave you with a smooth animation. 

```css
@keyframes animation-name{ 
    /*start*/
    0% {
      width: 0;
    }
    /*end*/
    100% {
      width: 50%;
    }    
    
```


#### Scale

```css
.animation--rotate {
      animation-name: rotate:
      animation-duration: 6s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }    
    @keyframe rotate {
    0% {
       transform: rotate(0deg);
    }
    50% {
       transform: rotate(360deg);
    }
    100% {
       transform: rotate(0deg);
    }
  }
```

#### Translate

```css
.animation--translate {
    animation-name: translate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes translate {
    0% {
        transform: translate(0, -50%);
    }
    25% {
        transform: translate(0, 50%);
    }
    50% {
        transform: translate(-50, 0);
    }
    75% {
        transform: translate(-50%, 0);
    }
    100% {
        transform: translate(0, -50%);
    }
}
```

#### Fade

```css
.animation--fade {
    animation:fade;
    animation-duration: 4s;
    animation-iteration-count: infinite:
    animation-timing-function: ease-in-out;  
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 0; 
    }
    100% {
        opacity: 1;
    }
}
```



Thanks for Reading | Happy Animating 🚀

---

### RemovalAI - [SPONSOR]

Remove background from multiple images in a single upload straight to your desktop using Bulk Photo Background Remover for Windows.             
- ✅  Drag & Drop Multiple Images
- ✅  Optimize Product Images
- ✅  Select Your Background
- ✅  Set Your Output Size
- ✅  Exceptional Results

<img src="https://removal.ai/wp-content/uploads/2021/02/gif-new-2.gif">

Visit -> <a href="http://bit.ly/removalai" target="_blank">RemovalAI</a>
Scratch Diff Using Vim
Tags: vim, diff
Published: 2021-04-10 02:29:04

First as I have not seen this term utilized let me define what I mean by a "scratch diff." I have chosen this in reference to a "scratch pad." The idea is that you have some text and would like clarity in what is different between them, but you don't need to make a big deal out of the comparison.

Previously I have done this with creating two files and placing the text desired in both of them. Getting the filesystem involved at times just seems like too much for the desired diff. But an internet diff is also not acceptable because at times I need to manipulate the formatting/structure to get a decent comparison.

Well I finally took some time to learn the vim approach to making a scratch diff and isn't too bad.

After opening Vim

```
:vnew
:diffthis
<ctrl+w><ctrl+w>
:diffthis
```
Why I don't like to use Styled-Components
Tags: discuss, css, javascript
Published: 2021-04-10 02:28:49

It's been a while since I post something here (Really busy, sorry!) and I will start to do it again with a polemic opinion. First, it's important to say that this is completely an opinion and I'm not trying to say "Don't use it!!", but creating a space to discuss some things I do not like about StyledComponents and why I don't use it. 

### _- Not a natural syntax:_
This is probably the main reason and I mean, it's weird...There is no natural syntax about 

```javascript
const Wrapper = styled.div`
   width: 30px;
`
```

What the heck is that string template after the div?! (I know what it is, but come on). It's used to do function callings, method callings, prop passing, but it's weird to get used to tagged template literals for CSS at least.

### _- There's no clear convention to use it:_ 
If you see this: 

```javascript
export const MyComponent = () => (
   <Button />
)
```

It's `<Button />` a component or a Styled-Component? Can be both and we have to search for it and, depending on how big your project is, can be a pain in the a$$. 

Some code editors (sometimes VsCode does this) even have problems going to the code line when you `cmd + click` the Styled-Components making it a little awkward to track. 

Sometimes even it's exported from a "General" style file and that makes it even harder to know what you have to do or fix.

Some projects use: 
```javascript
const StyledWrapper = styled.div``
```
to differentiate between a React Component and a Styled-Component, but there's not a real convention. 

### _- You can do theming without it:_

You can easily build a `ThemeProvider` using `React Context API` that could manage the theming for the whole app and can be accessed anywhere you want. You can even build a simple `useTheme()` custom hook to make it more descriptive and can manage a lot of things without installing another dependency on your project. 

---

Again, I'm not saying that Styled-Components are bad or that the creators are bad people or something, this is just my personal opinion based on projects that I've been working with. 

Do you have a different opinion? Do you think just like me? Do you like to add something to the post? Do it in the comments below!

I do this completely non-profit, but if you want to help me you can go [here and buy me a coffee](https://www.buymeacoffee.com/danielsilva) ;)
SOSL in Salesforce
Published: 2021-04-10 02:20:59

Salesforce Object Search Language (SOSL)to construct text-based search queries against the search index.

Syntax:
FIND {SearchQuery} 
[ IN SearchGroup ]
[ RETURNING FieldSpec [[ toLabel(fields)] [convertCurrency(Amount)] [FORMAT()]] ]
[ WITH DivisionFilter ]
[ WITH DATA CATEGORY DataCategorySpec ]
[ WITH SNIPPET[(target_length=n)] ]
[ WITH NETWORK NetworkIdSpec ]
[ WITH PricebookId ]
[ WITH METADATA ]
[ LIMIT n ]


[ UPDATE [TRACKING], [VIEWSTAT] ]

By default, SOSL queries scan all entities. The search engine looks for matches to the search term across a maximum of 2,000 records.

Search text, email, and phone fields for multiple objects, including custom objects, that you have access to in a single query in the following environments.
*SOAP or REST calls
*Apex statements
*Visualforce controllers and getter methods
*Schema Explorer of the Eclipse Toolkit

If your org has relationship queries enabled, SOSL supports SOQL relationship queries.

<b>When to USE:</b>
Don’t know which object or field the data resides in, and you want to:
Retrieve data for a specific term that you know exists within a field.
Retrieve multiple objects and fields efficiently where the objects might or might not be related to one another.
Retrieve data for a particular division in an organization using the divisions feature.
Retrieve data that’s in Chinese, Japanese, Korean, or Thai. Morphological tokenization for CJKT terms helps ensure accurate results

<b>To Refine search use clauses:</b>
IN: Limits the types of fields to search, including email, name, or phone.
LIMIT: Specifies the maximum number of rows to return.
OFFSET: Displays the search results on multiple pages.
RETURNING: Limits the objects and fields to return.
WITH DATA CATEGORY: Specifies the data categories to return.
WITH DivisionFilter: Specifies the division field to return.
WITH NETWORK: Specifies the Experience Cloud site ID to return.
WITH PricebookId: Specifies the price book ID to return.

All detail available at 
https://developer.salesforce.com/docs/atlas.en-us.soql_sosl.meta/soql_sosl/sforce_api_calls_sosl_syntax.htm
How to Set Environment Variables in Next.js
Tags: nextjs, javascript, react, webdev
Published: 2021-04-10 02:12:43

Hello friends, today I was trying to use environment variables inside a Next.js project, and it is really easy to work with.

First of all, you don't need to download [`dotenv` ](https://www.npmjs.com/package/dotenv) package anymore.

## Steps to work with Environment Variables

1. Create a `.env.local` file inside the root of your project.

2. Put your private keys inside the file in this format:

```
// .env.local
API_KEY="...."
```

3.Save the file and add it to the `.gitignore` file.

```
// .gitignore
.env*.local
```
4.Access your keys with `process.env`. You can access your environment variables inside the `pages` directory or while you are fetching data with the `getServerSideProps` function. 

```js
export const getServerSideProps = async () => {
  console.log(process.env.API_KEY);

  const res = await fetch(`${server}/api/?key=${process.env.API_KEY}`)
  const articles = await res.json()

  return {
    props: {
      articles,
    },
  }
}
```

5.Add your environment variables in Vercel deployment.

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

You can store your environment variables on Vercel, shown in the picture.

## Wrapping Up

I hope you will not have any trouble storing your environment variables in your Next.js projects. Whenever I try to use environment variables, something goes wrong; but Next.js worked perfectly. 

If you like this post, share it on your Twitter account to support me writing more, also you can support me by [buying  a coffee.](https://www.buymeacoffee.com/hulya)

<a href="https://www.buymeacoffee.com/hulya" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="40" width="170" ></a>

You can follow me on [Twitter](https://twitter.com/hulyakarkya), and [Github](https://github.com/hulyak). We can connect with each other. Also, you can check out my other posts. I have shared resources that can help you learn Next.js.

{% link https://dev.to/hulyakarakaya/learn-next-js-for-free-with-these-resources-jfi %}
Update your branch name at where you are deploying 🤦🏻‍♀️
Published: 2021-04-10 01:07:22

![facepalm](https://media.giphy.com/media/yFQ0ywscgobJK/giphy.gif)

Yup, a rookie (or rusty) mistake. One thing I forgot... update the branch name of my repo after moving it from **master** to **main** at where I'm deploying my site. In this case, it's [netlify.com](https://netlify.com).

Since no-one told me, it helps to check your build status badge after committing changes too. 😅

Good thing this is a wee side project! 😆

So now it all works! 

![high 5](https://media.giphy.com/media/xThuWpoG470Q0stGmI/giphy.gif)
Bash Script to log file modifications with osquery
Tags: bash, osquery, linux, mac
Published: 2021-07-29 16:08:03

---
title: Bash Script to log file modifications with osquery
published: true
date: 2021-07-29 00:58:00 UTC
tags: Bash, osquery, Linux, Mac
canonical_url: https://www.petefreitag.com/item/915.cfm
---

Here's a bash script that uses `osquery` to log which files in a specific folder have been modified over a 15 minute period. My use case here wasn't file integrity monitoring, for that you would want to use file events.

Here's the script:

```

#!/bin/bash

WORKSPACE_DIR=`echo ~/workspace`
LOG_DIR=`echo ~/Documents/Logs/osquery_file_logs/`
AGO_TIMESTAMP=`date -v-15M "+%s"`
LOG_FOLDER_NAME=`date "+%Y-%m"`
LOG_FILE_NAME=`date "+%Y-%m-%d"`
LOG_FILE="$LOG_DIR/$LOG_FOLDER_NAME/$LOG_FILE_NAME.txt"

mkdir -p "$LOG_DIR/$LOG_FOLDER_NAME"

touch $LOG_FILE

/usr/local/bin/osqueryi --csv --header=false "SELECT datetime(mtime,'unixepoch') AS file_last_modified_time, path FROM file WHERE path LIKE '$WORKSPACE_DIR/%%' AND type != 'directory' AND mtime > $AGO_TIMESTAMP ORDER BY mtime ASC;" >> $LOG_FILE

```

I tested this bash script on a Mac, but I think it would work just the same on linux. You'll need to install osquery first. If you set this up in a cron job running every 15 minutes, you'll have a nice log of what files where changed when.

### A better way?

It has occurred to me that using osquery here is probably a bit overkill for this task, I think you could create a more rudimentary version of this script like this:

```

find $WORKSPACE_DIR -type f -newer $LOG_DIR/timestamp >> $LOG_FILE
touch $LOG_DIR/timestamp 

```

Using the `-newer` flag of the `find` command it will return all files newer than our `$LOG_DIR/timestamp`, and because we `touch` that file after the script runs, the next time it runs it will show all files changed since it was last run.

That doesn't include the last modified dates in the log file, but it is possible to do with a little more work.
Creating a webhook connection on hookdeck
Tags: webhooks, tutorial, showdev, hookdeck
Published: 2021-04-10 00:55:33

---
title: Creating a webhook connection on hookdeck
published: true
description: Learn how to setup Hookdeck to manage webhook connections
tags: webhooks, tutorial, showdev, hookdeck
cover_image: https://paper-attachments.dropbox.com/s_F73DA173A804DDC241B2C08DEE4A931C54B9FF2A2E13894D8A0798A4513820D1_1617416093192_Hookdeck+webhook+connections.png
---

# Creating A Webhook Connection On Hookdeck

[Hookdeck](https://hookdeck.com/) offers a complete webhook infrastructure to help tech teams instantly and reliably process, manage and troubleshoot their incoming webhooks. Practically that means it's an infrastructure that scales seamlessly and does all the heavy lifting – error handling, retries, alerting, logging, and queuing.



I use Hookdeck to manage my webhook connections with various third-party services.
In this quick guide, I will show you how to set up a webhook connection using Hookdeck via the dashboard. 

## Getting Started

In this section, I'll show you step by step how to create a webhook connection using Hookdeck. 
The first step in creating a webhook connection using Hookdeck is to sign in to your Hookdeck account. Once signed in, navigate to the Hookdeck dashboard and select the **connections** tab.
To create a new webhook connection, click the **create** button at the top of the connections page.

![](https://paper-attachments.dropbox.com/s_131CB7EA0CED5C3D95C824290BE30BA6885F67860701EA0E614608A9437F76EF_1617403306342_61A0B6C5-3B3F-4416-9CFC-A04747455AFD.png)


Next, fill the three required fields on the pop-up menu — Source, Destination & Ruleset. Hookdeck gives you the option to either select previous values or to create entirely new ones. 

![](https://paper-attachments.dropbox.com/s_131CB7EA0CED5C3D95C824290BE30BA6885F67860701EA0E614608A9437F76EF_1617403590968_IMG_1217.jpeg)


After creating a webhook connection, Hookdeck provides you a unique URL. You should copy and use it as the URL endpoint when registering a webhook with your API provider. Once set up, the API provider will send their webhooks to this destination.

## Conclusion

In this tutorial, we have learned how to set up a webhook connection on Hookdeck. With our current setup, we can deploy webhook integrations in production without having to worry about reliability. Hookdeck gives us full visibility and control over our webhooks. 

I'll be writing about various integrations using webhooks. Follow Hookdeck to stay up to date. 
[Try Hookdeck For Free](https://hookdeck.com/?utm_source=devto&utm_medium=forum&utm_campaign=devto). Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.
Create Awesome Product Card | UI Design | E-commerce Card | Using Only Html5 & CSS3
Tags: codepen, css, showdev, webdev
Published: 2021-04-10 00:30:00

---
title: Create Awesome Product Card | UI Design | E-commerce Card | Using Only Html5 & CSS3
published: true
tags: codepen, css, showdev, webdev
---


<hr/>

{% youtube 3IYlUpjsKfI %}

<hr/>

> [**Please do not forget to subscribe in my channel:**](https://www.youtube.com/AhmadEmran?sub_confirmation=1)

<hr/>

{% codepen https://codepen.io/ahmadbassamemran/pen/GRryraq %}
Week 14, 2021 - Tips I learned this week
Tags: azure, vscode, azureiot, iot
Published: 2021-04-10 20:46:51

---
title: Week 14, 2021 - Tips I learned this week
published: true
date: 2021-04-10 00:00:00 UTC
tags: azure, vscode, azureiot, iot
canonical_url: https://techwatching.dev/posts/w14-2021-tips-learned-this-week
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsqkjf4tpjjxmvqv9gtm.jpg
series: Tips I learned this week
---

This week I learned a few things related to vscode and especially about the `Azure IoT Hub` vscode extension.

## Accessing Azure resources in vscode from a specific tenant.

There are a lot of vscode extensions (like the ones in [this extension pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack)) that allow you to access and manipulate your Azure resources from Visual Studio Code.

This [specific extension `Azure Account`](https://marketplace.visualstudio.com/items?itemName=ms-vscode.azure-account) makes it easy for you to sign in to your Azure account and select the subscription you want to use. But what if you are working in a consulting company that works for different companies ? How do you indicate the tenant of the customer to sign in to. Well the answer is in fact quite simple, the extension exposes a setting in vscode to specify a specific tenant to use.

 ![](https://techwatching.dev/posts/images/w142021tips_vscode_1.png)

> 📌 If you like to update the settings in json mode the key to use is `azure.tenant`

## Azure IoT Hub vs code extension is awesome.

I think everything is in the title. I knew about this extension before this week but I did not take the time to really use it. However this week it helped me a lot for my sprint demo where I needed to show new functionalities I implemented on an IoT backend: modify device twin tags in the IoT Hub and send some messages to an IoT device under certain conditions.

The Azure Iot Hub extension adds an `Azure IoT Hub` view in the Explorer where you can see the devices of IoT Hub you selected and can do some actions on them.

 ![](https://techwatching.dev/posts/images/w142021tips_vscode_2.png)

There are also a lot of commands you can use to interact with an IoT Hub and its devices.

 ![](https://techwatching.dev/posts/images/w142021tips_vscode_3.png)

You can do pretty much anything you want from sending C2D / D2C messages to monitoring C2D / D2C messages. I found quite nice to be able to directly visualize and edit a device twin as a json document in vs code.

 ![](https://techwatching.dev/posts/images/w142021tips_vscode_4.png)

To quickly test something related to Iot Hub, the Azure Iot Hub extension is a very useful tool. An interesting alternative to this tool is the [Azure Iot Explorer](https://github.com/Azure/azure-iot-explorer/releases) which is more user-friendly thanks to its simple UI but does not have all the features.

 ![](https://techwatching.dev/posts/images/w142021tips_iotexplorer_1.png)

And that's it for this week, happy learning!
The poor man's feature flag
Tags: featureflags, productivity, cicd, ci
Published: 2021-04-13 08:36:23

---
title: The poor man's feature flag
published: true
date: 2021-04-10 00:00:00 UTC
tags: featureflags,productivity,cicd,continuousintegration
canonical_url: https://jhall.io/archive/2021/04/10/the-poor-mans-feature-flag/
---

I recently had a chat with a developer whose team had recently made the switch from [GitFlow](https://jhall.io/archive/2021/03/09/gitflow-is-anti-agile/) to [trunk-based development](https://jhall.io/archive/2021/03/10/a-case-for-trunk-based-development/). He observed that long-lived features were painful in trunk-based development, due to the lack of feature flags.

While there are many great feature flag frameworks and tools out there, you don’t need to wait for your team to implement one to start using feature flags. You can start today with the poor man’s feature flag:

```
if (false) {
```

Yeah, that’s it.

Wrap your new, incomplete feature in a simple `if (false)` conditional, and merge it into master as normal.

Any unit tests you’ve written will still run and execute your new code—it just won’t be exposed in production builds. Perfect!

When you’re working on it locally, just change `if (false)` to `if (true)`, and hack away. And when the feature is finally complete, delete the conditional entirely.

* * *

If you found this message interesting, I expand on the topic of feature flags in my free [What is Continuous Integration](https://jhall.io/whatisci/) email series.
How to get the size of the file asynchronously using Node.js?
Tags: node
Published: 2021-04-10 00:00:00

---
  title: How to get the size of the file asynchronously using Node.js?
  published: true
  tags: Nodejs
  date: Sat Apr 10 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-size-of-file-asynchronously-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-06477e1296d9a079f3485ac0192e4491.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-size-of-file-asynchronously-nodejs)
  
To get the size of a file asynchronously, you can use the `stat()` method from the `fs` (filesystem) module and then use the `size` property from the `stats` object in Node.js.

Let's say we have a file called `myFile.txt` in which you want to get the file size. Here you can use the `fs.stat()` method and pass:

- the `path` to the file as the first argument.
- a callback function that will get invoked after statistics about the file is obtained, in which the first parameter is an `error` object and the second parameter is the `stats` object which contains all the information about the file.

In our case, the size of the file can be obtained using the `size` property from the `stats` object. The `size` property returns the size of the file in bytes.

It can be done like this,

```js
// require fs module
const fs = require("fs");

// get file size using fs.stat() method
fs.stat("./myFile.txt", (error, stats) => {
  // in case of any error
  if (error) {
    console.log(error);
    return;
  }

  // else show size from stats object
  console.log("File Size is: ", stats.size, "bytes");
});
```

See the above code live in [repl.it](https://replit.com/@melvin2016/get-size-of-the-file-asynchronously-using-nodejs).

If you want to convert it to `mb`, you can divide the `size` by `1024 * 1024` like this,

```js
// require fs module
const fs = require("fs");

// get file size using fs.stat() method
fs.stat("./myFile.txt", (error, stats) => {
  // in case of any error
  if (error) {
    console.log(error);
    return;
  }

  // else show size from stats object
  console.log("File Size is: ", stats.size / (1024 * 1024), "mb");
});
```

That's it! 😀

### Feel free to share if you found this useful 😃.

---