teleren/devto huggingface dataset:
NATO Condemns Cyberattack, Pegasus Cyber Espionage Tool, Steam’s New Console, & more on DevNews!
Tags: news, podcast
Published: 2021-07-22 13:23:44

---
title: NATO Condemns Cyberattack, Pegasus Cyber Espionage Tool, Steam’s New Console, & more on DevNews!
published: true
description: Listen to S5E1 of the DevNews pod!
tags: news, podcast
series: DevNews Season 5
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

Season 5 of the DevNews podcast is here!

{% podcast https://dev.to/devnews/s5-e1-pegasus-cyber-espionage-tool-steam-s-new-console-gunshot-detecting-tech-and-nato-condemns-a-cyberattack %}

**Hosts:** @saronyitbarek & @joshpuetz 

**Guest:** [Marcus Carey](https://twitter.com/marcusjcarey), Enterprise Architect @ ReliaQuest 

---

_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ _— or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx)._ 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s5-e1-pegasus-cyber-espionage-tool-steams-new-console/id1525581923?i=1000529678334)
- [Spotify](https://open.spotify.com/episode/78vzczaR9YWT1b2b3c4dkJ)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzMz?sa=X&ved=0CAQQkfYCahcKEwjY1ebY4vbxAhUAAAAAHQAAAAAQCA)
- [Stitcher](https://www.stitcher.com/show/devnews/episode/s5-e1-pegasus-cyber-espionage-tool-steams-new-console-gunshot-detecting-tech-and-nato-condemns-a-cyberattack-85594899)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews-dev-fH8hvsClkWp/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=164637671)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods website](https://devpods.herokuapp.com/podcasts/devnews/episodes/174)

#### _Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season five sponsor, [Scout APM](https://scoutapm.com/devnews) ❤️ 


We hope you enjoy the season premiere of DevNews!
How to Localize Banner Ad Campaign
Tags: javascript, html, webdev
Published: 2021-07-22 13:08:00

Depending on your industry, the language of communication with potential clients can be more or less important. Every content must be in the language with which your users feel most comfortable.

Translating your banner advertisement into other languages can really impact the effectiveness of your marketing creatives.

In this article, we’re not only going to provide some advice on translating advertising creatives, but also show you how to make this process much more streamlined. For more tech-savvy marketers, I will show how to easily manage HTML translations of banners and how to automatically display the appropriate language version.

Read More:
https://medium.datadriveninvestor.com/how-to-localize-banner-ad-campaign-e6ec698d0bc
Introduction to video games creation course
Published: 2021-07-22 13:06:25

If anyone of you is interested in learning game development from a course, here is the link and a short description:

Introduction to Video Games Creation -course, 25 ECTS University credits, FREE of Charge



Games are one of the most exciting, fast moving, and lucrative creative industries worldwide. In the last 15 years the industry has matured and diversified. There are several key disciplines people can specialise in. The most successful games are creative powerhouses that have revenue returns that far outstrip comparable products in other mediums. Examples include PUBG, GTA series, Need for Speed, Temple Run, Angry Birds, Clash of Clans to name a few massive success stories.

This course will provide a beginners guide to hands on games industry and creation. The modules stand separately with deliverables but interlink so that a student completing all 25 ECTS credits will have a basic understanding how games are developed.

The lectures includes introduction to the games industry, artificial intelligence (AI) for games, data analytics, innovation in games, production and history of games. Then after the warm-up modules you will be developing your own game designs, and full games yourself such as a mobile snake game for smart phones!

The lectures are delivered mostly in forms of videos that you follow covering 2D painting, 3D modelling, C# and Unity development.

https://www.xamk.fi/en/open-amk-courses/introduction-to-video-games-creation/
tmux rotate-window
Tags: cli, linux, tmux
Published: 2021-07-22 13:03:28

---
tags: ['cli', 'linux', 'tmux']
title: tmux rotate-window
published: true
canonical_url: https://waylonwalker.com/tmux-rotate-window/
series: tmux
---

Rotate window is the main way that I navigated tmux before I learned
`select-pane`.  It allows you to change your focused pane, or rotate the
position of the panes easily.


Default keybindings

``` bash
bind-key        C-o rotate-window
bind-key          o select-pane -t :.+
```

My keybindings look just a bit different than the default ones, I do not like
needing to hit prefix for every command, especially for repeated commands.  I
set a similar keybinding to the default one that uses mod instead of prefix.

``` bash
bind -n M-o select-pane -t :.+
bind -n M-O rotate-window
```

---

Be sure to check out the full youtube playlist and subscribe if you like it.

https://www.youtube.com/playlist?list=PLTRNG6WIHETB4reAxbWza3CZeP9KL6Bkr


{% post https://dev.to/waylonwalker/how-i-navigate-tmux-in-2021-2ina %}

> Also check out this long form post for more about how I use tmux.
Question regarding best practice on managing state
Tags: react, question, state
Published: 2021-07-22 12:52:04

I am working on an app that presents a list of questions to the user and expects answers. The representation of data is something like this:

```jsx
const steps = [
  {
    title: "Health",
    question: "How satisfied are you with Health",
    answer: null,
  },
  {
    title: "Career",
    question: "How satisfied are you with Career",
    answer: null,
  },
  {
    title: "Love",
    question: "How satisfied are you with Love",
    answer: null
  },
];
```

My question is, should I store this whole object in the state, or only store the answers?

In the first case, the code would look something like the following. Here we can see that questions and answers are bundled together, which makes it easier to iterate over them and display them together.

```jsx
const WheelOfLife = () => {
  const [stepsData, setStepsData] = useState([
    {
      title: "Health",
      question: "How satisfied are you with Health",
      answer: null,
    },
    {
      title: "Career",
      question: "How satisfied are you with Career",
      answer: null,
    },
    {
      title: "Love",
      question: "How satisfied are you with Love",
      answer: null
    },
  ])

  const setAnswer = (index, answer) => {
    const newStepsData = [...stepsAnswers]
    newStepsData[index].answer = answer
    setStepsAnswers(newStepsData)
  }

  return (
    <ul>
      {stepsData.map(step => (
        <li key={step.title}>
          {step.title}: {step.answer}
        </li>
      ))}
    </ul>
  )
}
```

In the second case, I am following the recommendation of the [React docs](https://reactjs.org/docs/thinking-in-react.html) that says _"Does it remain unchanged over time? If so, it probably isn’t state."_, but now questions and answers are separated and it becomes a tiny bit more complicated to access the data:

```jsx
const stepsData = [
  {
    title: "Health",
    question: "How satisfied are you with Health",
  },
  {
    title: "Career",
    question: "How satisfied are you with Career",
  },
  {
    title: "Love",
    question: "How satisfied are you with Love",
  },
];

const WheelOfLife = () => {
  const [stepsAnswers, setStepsAnswers] = useState(new Array(stepsData.length))

  const setAnswer = (index, answer) => {
    const newStepsAnswers = [...stepsAnswers]
    newStepsAnswers[index] = answer
    setStepsAnswers(newStepsAnswers)
  }

 return (
    <ul>
      {stepsData.map((step, index) => (
        <li key={step.title}>
          {step.title}: {stepsAnswers[index]}
        </li>
      ))}
    </ul>
  )
}
```

Thank you for the feedback!
Livewire Components
Tags: livewire, alpinejs, blade, laravel
Published: 2021-07-22 12:45:58

Starting the tallstack development sometimes is exhaustive, create all forms components, buttons, cards.... Wireui has a lot of blade components ready to use.

Advantages:
Notifications, Dialogs, modals and form components

Enjoy the livewire components

https://github.com/PH7-Jack/wireui
Append a new User-Agent to WebView in Android
Tags: android, webview, useragent
Published: 2021-07-22 12:45:15

Sometimes you need to pass another user-agent when opening a URL in the Webview, so here how to do it in Android app:

```java
String userAgent = String.format(
   "%s %s/%s",
   this.webView.getSettings().getUserAgentString(), 
   "Your Custom User-Agent", 
   BuildConfig.VERSION_NAME
);

this.webView.getSettings().setUserAgentString(userAgent);
webView.loadUrl(url);
```
diary.by
Tags: showdev, php
Published: 2021-07-22 12:40:14

Very excited and happy to introduce my new project - diary.by!

diary.by is a project I've been carving away at for some time now. It's a super simple blog/diary/notes/journal platform that will let you write in peace, without tracking, ads, likes and other digital noise. The focus here is to give you a simple, easy to use and clean slate on the internet to share your thoughts with the world.

You can check it out here: https://diary.by/
Example post: https://diary.by/~paul/minimalism-again

**Note**: diary.by is currently invite-only. If you'd like to try it out, please send me a DM and I'll be happy to provide you with an invite code.
My First Impression of Angular
Tags: angular, javascript
Published: 2021-07-22 12:37:15

My first impression of Angular is that it's a lot bulkier than other frameworks. There's more "Angular" syntax that you have to get used to. 

You can realize how bulky Angular is just by creating a simple component. When you create an Angular component using the Angular CLI it automatically creates 4 files for you: 1) the html file, 2) the css file, 3) the typescript file, and 4) the test file. I made a couple apps in Vue and all the logic, css, and html are in one file which I think makes it more convenient.

Also Angular has a lot of syntax that you have to get used to. For example, Angular uses a decorator function that generates three metadata properties 1) element selector, 2) templateUrl(html), and 3) styleUrl(CSS styles). In React, you just have to import the css file but in Angular you have to use a decorator function. Although it is done automatically by Angular, the syntax is quite different from anything in React of Vue.

I did read that Angular's advantage is that it's a framework meaning that it has built-in capabilities such as state management, http request functions, server-side rendering, etc. which saves time. Also, the architecture of Angular projects are very similar everywhere.

I did write a couple posts trying to learn Vue but I recently got a job where I have to use Angular. So, I will document my progress learning Angular from now on.
The one about 'breaking down' - WEEK 11
Published: 2021-07-22 12:01:06

Week 11. The week I will NEVER ever forget. 

As expected, the week began with the solo project for Frontend. I used HTTP requests using react to interact with my Backend project and HTTP response codes to update my UI accordingly.

Lectures were delivered to help scalability and reuse of code using React hooks. I used Figma to help plan the project and so I thought everything was going well...

Wednesday hit and it hit hard. I struggled to form any kind of logic with my project. I had my components all set up, added some functionality with a couple of GET requests, played around with the styling and then everything got a little too much.

It was a difficult week, as almost everything that could have happened, HAPPENED !

Kid's school trips, assemblies, end of year exams, parent's evening and so on all happened this week. The house project resumed with 101 unresolved issues from re-wiring the whole house to plumbing issues. Alongside Eid preparations for the following week with the dreaded PMS. Appointments, family drama and all the rest of it all happened this week. 

I reached out to a Northcoders tutor about some concerns with the upcoming project phase and so the call ended up being a half hour counselling session. I truly and finally had reached breaking point. The tutor was brilliant and identified that I'm 'mentally exhausted'. My body was shutting down on me as I felt like I'd been run over by a train and it was not over yet. 

I had a review on my project which wasn't as bad as I thought considering how I was taking steps, day by day, hour by hour. 

The weekend was hot and NOT relaxing. We had a family (more like 'tribal') BBQ at my mums then decided to take the kids to the beach on Sunday, which resulted in standing on the M60 with three kids, as our car broke down. 

I had reached the pinnacle.
Keep a Sparkfile
Tags: inspiration, lists, tools
Published: 2021-08-16 08:04:51

---
title: Keep a Sparkfile
published: true
date: 2021-07-22 11:51:28 UTC
tags: inspiration,lists,tools
canonical_url: https://dils.blog/keep-a-sparkfile/
cover_image: https://images.unsplash.com/photo-1509910110001-4e756f86fbd3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDF8fHNwYXJrfGVufDB8fHx8MTYyNjk1NDM4NA&ixlib=rb-1.2.1&q=80&w=2000
---
A Sparkfile is a bit of an old concept that has been quite useful for me over the years. It's basically a notes file about a topic that you keep adding and building upon.

**The original rules are**

- Keep it unformatted
- Add to the bottom
- Don't change the past
- Review for patterns and inspiration
- Remix past to come up with the future

Simple enough right?

**Use it for anything**

- Garden ideas
- Blog posts
- Travel ideas (someday)
- Side projects that you never complete 🤭

**Go your own way**

I've kept one in the Bear app for a few years. I tend to review, edit, format and add to it every so often. Everything is very brief so its packed with ideas I can work on.

Try it out. Start with one and make a few by topic. Use paper or any notes application you have access to.

**References**

- [The Spark File | by Steven Johnson | The Writer’s Room | Medium](https://medium.com/the-writers-room/the-spark-file-8d6e7df7ae58) – the original post.
- [Keep a ‘Spark File’ to Brainstorm With Past Versions of Yourself | by Michelle Woo | Forge](https://forge.medium.com/keep-a-spark-file-to-brainstorm-with-past-versions-of-yourself-fcae4564d2fb)
- [Defrag Your Brain With a Spark File](https://lifehacker.com/defrag-your-brain-with-a-spark-file-5941997)
- [Private Markdown Notes for iPhone, iPad and Mac | Bear App](https://bear.app/)
iOS Engineer (f/m/d/x) - Berlin, Germany - hybrid working model
Tags: ios, swift, tdd, music
Published: 2021-07-22 11:47:28

Looking for awesome **iOS Engineers** to join [SoundCloud](https://soundcloud.com/discover) team in Berlin (hybrid working model home/office)
* We reach hundreds of millions of listeners globally every month
*Swift, object oriented patterns, Core data, XCTest
* Our [Engineering Blog](https://developers.soundcloud.com/blog/)
* Apply via this [link](https://jobs.soundcloud.com/job?gh_jid=4584996002)
Django JSON Response safe=False
Tags: django, python, programming, json
Published: 2021-07-22 11:31:23

**Hi👋 everyone, I'm happy to see my self writing blogs to you once again after a while due to some reasons.**

#### _So, today;_

I would be sharing with you shortly, why `safe=False` is important in rendering **{JSON}** data in **Django**.

### Firstly, what is JSON?

**JSON** simply stands for **JavaScript Object Notation**. It is a standard text-based format for representing structured data based on *JavaScript object syntax*. 

It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).

### __So, driving straight into what `safe=False` is and its usefulness.__

- **Firstly, what is the function of the safe parameter?**

The safe parameter here decides on the type of python data type (tuples, dictionaries, strings etc.) you're wanting to pass. So concisely explained, it is the influencer of the data, JSON is to receive and pass across.

- **Secondly, why is it mostly set to False?**

The JSON Response in Django set `save=True` by default, and the safe parameter as a data influencer makes JSON accept the Python Data-Type {Dictionaries} and nothing less. So, at this point any data sent contrary to {Dictionaries} would actually fire up errors. 

So, setting the safe parameter to `False` actually influences JSON to receive any Python Data Type.

Personally and professionally, it is advisable you set it the safe parameter to `False` because it makes JSON accept both {Dictionaries} and others.

```
return JsonResponse(<'your python data-type'>, safe = False
```

Thanks for reading, please kindly comment below for feedback and you can link up with me on [Twitter](https://twitter.com/chryz_codez) and on this platform for more engagement🤝!⠀

Thanks 🙏
Arrays Questions: Reverse an array
Tags: algorithms, arrays, codenewbie, cpp
Published: 2021-07-22 11:13:11

In this series of posts, I will discuss coding questions on the `Arrays` Data structure.
The posts in this series will be organized in the following way,

1. Question Link ❓
2. Possible Explanation 📝
3. Documented C++ Code 🧹
4. Time and Space Complexity Analysis ⌛🌌

## The Question

[https://www.hackerearth.com/practice/data-structures/arrays/1-d/practice-problems/algorithm/print-array-in-reverse/](https://www.hackerearth.com/practice/data-structures/arrays/1-d/practice-problems/algorithm/print-array-in-reverse/)

> 💡 Give yourself at least 15-20 mins to figure out the solution :)

## Explanation

The idea is to maintain two index variables `start` and `end`, initially pointing to the *first* element and *last* element of the array respectively.

And then, we will *swap* values in the following order: **(first, last)** → **(second, second-last)** → **(third, third, third-last)** ....until we reach the *middle* element of the array. 

Here's the pseudo-code,

```
	while start < end:
			swap(arr[start], arr[end])
			start = start + 1 //move start ahead by one step
			end = end - 1 //move end back by one step
```

> 💡 If you are wondering why there's `<` instead of `≤` ? It's because `start` will be equal to `end` only in the case of *odd* length arrays and they both will point to the *middle* element of the array. And it does no good to swap it with itself as the array is already reversed by then.

### Still confused? 
Assume index starts from zero.

- Think what happens when `arr.length = 3`(*odd*), after one iteration, `start` and `end` both will point to index=1 and array is already reversed.

- Think what happens when `arr.length = 4`(*even*), after two iteration, `start(2)` will be greater than `end(1)` and array will be reversed.

## C++ Code

### Solution

```cpp
#include<iostream>

using namespace std;

void reverse(int* arr, int start, int end){
	//untill we reach the middle 
	while(start < end){
		//swap arr[start] and arr[end]
		int temp = arr[start];
		arr[start] = arr[end];
		arr[end] = temp;

		start++;//move start ahead
		end--;//move end back
	}
}

//driver code
int main(){
	int n;
	cin>>n;
	int arr[n];
	for(int i=0; i<n; i++){
		cin>>arr[i];
	}

	reverse(arr, 0, n-1);

	for(auto val: arr){
		cout<<val<<"\n";
	}

	return 0;
}
```

## Complexity Analysis

`N`: length of the array

### Time Complexity: O(N)

Since we are iterating nearly N/2 times, thus time will be O(N/2)  = O(N).

### Space Complexity: O(1)

We didn't use any extra space.
Useful information and books to help you learn React.
Tags: react, graphql, typescript, javascript
Published: 2021-07-22 11:06:45

The tutorials in the official React documentation are out of date⚠️

Here are some sites that you can refer to in order to develop using TypeScript and React Hooks.

I'm sure there are many other useful links out there, but too many would be too much work, so I've narrowed it down to those that I think are useful and don't seem to have any overlap.

In this Issue, we introduce the renewal of the official React documentation.

New React Docs · Issue #3308 · reactjs/reactjs.org
https://github.com/reactjs/reactjs.org/issues/3308

## JavaScript

For people who are worried about JavaScript itself before React.

![https://wesbos.com/javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k78sx32y5bijm4yefcxb.png)

Beginner JavaScript Notes - Wes Bos
https://wesbos.com/javascript

## React

For those who want to learn React comprehensively.

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

Learning React, 2nd Edition [Book]
https://www.oreilly.com/library/view/learning-react-2nd/9781492051718/

## React + TypeScript

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

React TypeScript Cheatsheets.
https://react-typescript-cheatsheet.netlify.app/

## React Hooks

![スクリーンショット 2021-07-23 0.10.03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqeduhgw0okpa4tjbmbv.png)
 
This is an unofficial but React documentation site that has been changed to a tutorial on React Hooks.

React – A JavaScript library for building user interfaces
https://reactwithhooks.netlify.app/

## React + GraphQL

- Learn a comprehensive implementation of React + Apollo + GraphQL.

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

Course Introduction | GraphQL React Apollo Hooks Tutorial
https://hasura.io/learn/graphql/react/introduction/

- Learn React + GraphQL + TypeScript web service development from front-end to back-end comprehensively.

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

Full stack open 2021
https://fullstackopen.com/en/

## React + Test

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

Learn comprehensive front-end testing using the concept of Testing Trophy and React testing.

Testing JavaScript with Kent C. Dodds
https://testingjavascript.com/

## React + Redux

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

Learning Resources | Redux
https://redux.js.org/introduction/learning-resources

## Paid service

If you are fine with paid service, this is the way to go.

![スクリーンショット 2021-07-23 0.08.44](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aenn88vmnafvtci5iuvf.png) 

Frontend Masters
https://frontendmasters.com/

![スクリーンショット 2021-07-23 0.09.16](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e89oc2hm2qeba3pclslf.png) 

Get Really Good at React
https://epicreact.dev/