teleren/devto huggingface dataset:
Reverse a string: awful answers only
Tags: challenge, programming, jokes
Published: 2020-11-02 15:52:39

---
title: Reverse a string: awful answers only
published: true
description: Challenge to write a function that reverses a string, but badly.
tags: challenge, programming, jokes
series: awful answers only
//cover_image: https://direct_url_to_image.jpg
---

Today's challenge is to write a function that when given a string returns the string with the characters in the reverse order.

E.g.

```javascript
reverseString('hello');
//output: 'olleh'
```
But instead of trying to make a nice shiny function, write something bad. Throw space and time optimisations out the window. Double down on cyclomatic complexity. Make the compiler sad.

### Tests

```
reverseString('Use Markdown to write and format posts.') == '.stsop tamrof dna etirw ot nwodkraM esU';
reverseString('You can use Liquid tags to add rich content such as Tweets, YouTube videos, etc.') == '.cte ,soediv ebuTuoY ,steewT sa hcus tnetnoc hcir dda ot sgat diuqiL esu nac uoY';
reverseString('In addition to images for the post\'s content, you can also drag and drop a cover image') == 'egami revoc a pord dna gard osla nac uoy ,tnetnoc s\'tsop eht rof segami ot noitidda nI';
reverseString('') == '';
```
Linting functions that need to be called from specific lifecycle method
Tags: android, androidstudio, androidlint, intellij
Published: 2020-11-02 15:51:57

---
title: Linting functions that need to be called from specific lifecycle method
published: true
description: Policing lifecycle-sensitive function calls
tags: android, androidstudio, androidlint, intellij
cover_image: https://i.imgur.com/VJuk87T.png
---


Repeatedly, I made few mistakes while using the new [`registerForActivityResult`](https://developer.android.com/reference/androidx/fragment/app/Fragment#registerForActivityResult(androidx.activity.result.contract.ActivityResultContract%3CI,%20O%3E,%20androidx.activity.result.ActivityResultCallback%3CO%3E)) API, resulting in error:

```
Fatal Exception: java.lang.IllegalStateException: Fragment MyFragment{e964a6} (573498bb-7d87-4d58-9e84-59223f13f14c) id=0x7f0a00b3} is attempting to registerForActivityResult after being created. Fragments must call registerForActivityResult() before they are created (i.e. initialization, onAttach(), or onCreate()).
       at androidx.fragment.app.Fragment.prepareCallInternal(Fragment.java:3)
       at com.package.name.android.ui.MyFragment.registerForActivityResult(MyFragment.java:15)
```

Developers should be provided with compile-time lint error or/and [Code Inspections](https://www.jetbrains.com/help/idea/code-inspection.html) for such specific misuse of lifecycle-sensitive function calls. 


I wrote myself one to remind me that I'm ending up in usability issue. This lint check searches for usage of `registerForActivityResult` outside `onCreate` or `onAttach` lifecycle functions in `Fragment` or `Activity` subclasses. 

It considers unary expressions, such as:

`registerForActivityResult(contract, callback).launch(argument)`

and binary expressions:

`launcher = registerForActivity(contract, callback)` 

which object will be used to call launch(arguments) .

This lint won't show warning, if function call is made in another function, unfortunately deeper function stack is not considered, also calls inside lambdas remains unchecked.  

{% gist https://gist.github.com/NikolaDespotoski/f25a65aaa782baef99d8fca03e835b8d %}
How to trace distributed logs using Spring Cloud Sleuth?
Tags: springboot, microservices
Published: 2020-11-02 15:45:39

Tracking logs across different applications/microservices is very easy with Spring Cloud Sleuth.
It automatically does the work in the background.
Here is a quick post explaining the feature with a demo:
https://fullstackdeveloper.guru/2020/11/02/how-to-trace-distributed-logs-using-spring-cloud-sleuth/
An Intro to React Recoil
Published: 2020-11-02 15:43:20

Recoil is a state management library for ReactJS, made by the developers of React. React has the major limitation of components only sharing state through a common ancestor. Recoil allows state to be stored individually and separately from the components through the use of atoms and selectors. The components then call on the atoms as needed. This creates a data-flow graph going from the atoms through the selectors to the components. 

## Atoms
Atoms are individual units of shared state which are undateable and subscribable. When an atom is updated, each subscribed component is re-rendered with the new value. Components that read the value of the atom are automatically subscribed to the atom. Atoms are created using the atom function:
```
const textState = atom({
  key: ‘textState’, // must be a unique value among atoms and selectors
  default: ‘’,
});
```
To read the contents of this atom we use `useRecoilState()` which takes a passed atom and returns a two element array of a getter and a setter. The setter is a function which takes a value and returns a transformation which is then assigned to the default of the atom.

## Selectors
Selectors represent **derived state** or a transformation of state. A way to conceptualize it is to imagine a derived state as the output of passing state into a pure function which then outputs an alteration of that state without modifying the original state. 
```
const charCountState = selector({
  key: 'charCountState',
  get: ({get}) => {
    const text = get(textState);
    return text.length;
  },
});
```
This example uses the atom `textState` by getting the default and returning the length of the string. We can then use this value by calling the `useRecoilValue()` method which only returns a getter, since selectors are not updatable.

With this system of atoms and selectors, we can easily distribute state to whichever components might need it, while avoiding the ones that don't. This saves valuable time and memory when rendering components.
Save time using global .gitignore
Tags: git
Published: 2020-11-02 15:38:24

Sometimes we are ignoring the same files for every projects like .DS_Store or npm-debug.log*,we can save time using a global .gitignore.

>Note: Be Keep in mind, that it will change your default behavior in your computer. If you shared project be careful which directories you set into it for example if you add >node_modules/ then you can't add or .vscode.


These steps works in Linux and Mac.

1- Create gitignore in the root path.
```bash
touch ~/.gitignore
```

Edit the .gitignore and include these files you always need to ignore.

```bash
.nyc_output
.DS_Store
npm-debug.log*
```

From terminal configure git where the gitignore file is located.
```
git config --global core.excludesfile '~/.gitignore'
```

Done!!!

Photo by <a href="https://unsplash.com/@goumbik?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Lukas Blazek</a> on <a href="https://unsplash.com/s/photos/time?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Mithril & WickedElement
Published: 2020-11-02 15:19:25

Adding WickeElement to Mithril allows to create "custom-elements" very easily.

You can test it here [Chrono](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ALAOgMwA4A0IAzgMYBOA9rLMgNoAMeAjAJwC6BAZhAobaAHYBDMIiQgMACwAuYagWLl+U+EuQgAPFAgA3AATFYgwoQC8AHXABPALTEJFfuQsA+dQHot252f6ad+w2NzK1t7RScQVw8db34QAkJ4BGIpCEVeMUYkACZmazokOhAAXzwBYVFxACteeUVlVTEIMAAHclIpXWAoeC5+eGLdDgowXQByAHcIYgBreChrJPgRJUIxgG4fHwROgGEwx10TIYBXfhS0-l0ACgBKLp9dXR39cjPO47p1p8fn+E6tIRBAAjBBQI5DQSwRKbK5-TqpESkWFPF6EKSCDoQu5HZxdRHwUgQxJSACSSkJ2ih1xxJjxwFe710AGpjoxvoCQWCIVJSCd4N8wBhSPNSIIJndivdir80VJyC1sfc6V0DPBMeTlKQqbBrgTSLcORAgaD5hCOFCYbohSKoGKJbdiij4boRSSlbiuuiFXdvgomZ9BrL-rpOabsejBFIToRlXjI9HCMHOtoIPAJh6VTRfk8wNcLBJGBY8IylLc8DnrfmQMCTlJ5fxi11FAZpjMkJGOiWw9ykKHjVz5qVdBZO1ILOXK3mLLX64om8AW7A2x35S1h6O1xOK3Dc9XZw2F0uV27-huQKfxyBbr9WL8RdHSHCGZXU+ndH23xnfjL+L+fBwZwXIoroqD0pC7OQrR6piADm-wlgorSKCoUj3MAOZCmAbxKDBpDwVIiFQW0-Rlj4-78D0fTwNWGBgDYdgOBEJYYbuED8BAUg4qxTy8SKlGEpB0FSBIxoYEsKyEbo+xMTeu5Bn+ck+PERBLMB-AZCA2TZDkOAlGUIBCCIagYMQxgqQoFKNCAJTsCAy78DMGQ0OUxliJAImkNwKknKQ1BiNIUgtIQSBuG4ZwtDMsGmVBbgefY3AAAKMBgKUoHFnEJbAGA1CpUiWC0lQkF5LRSLZBBGZUMnhCUQA)

```html
<div class="my-chrono"></div>
<div class="my-chrono"></div>
```
```js
import {define} from 'wicked-elements';

let Chrono = function () {
  let count = 0;  
  let disabled = false;
  let timer;
  let start = () => {timer = setInterval(() => { count += 1; disabled = true; m.redraw()}) }
  let stop = () => {clearInterval(timer); disabled = false; m.redraw()};
  let reset = () => {stop(); count = 0} 
  let disable = (status) => status
  let view = () => [
    m("h1", count),
    m("button", {onclick:start, disabled : disabled}, "start"),
    m("button", {onclick:stop}, "stop"),
    m("button", {onclick:reset}, "reset")
  ]
  return  { 
    view : view 
  }
}

function renderComp(target, component) {
   m.mount(target, component)
}

define(".my-chrono", {
   init() {
     renderComp(this.element, Chrono)
   } 
})


```
Drawing La Muerte with CSS and HTML
Tags: css, html, showdev, codepen
Published: 2020-11-02 15:16:43

---
title: Drawing La Muerte with CSS and HTML
published: true
description: How to draw an illustration of La Muerte/La Catrina using HTML and CSS, with videos!
tags: CSS,HTML,showdev,codepen
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jpxilydtc40j9td0rtvo.png
---

This past weekend was Halloween and Día de Muertos, and we spent some time at home watching themed movies. One of them was [The Book of Life](https://www.imdb.com/title/tt2262227/), which tells a story of the Day of the Dead (or Día de Los Muertos).

In the end credits, there's an illustration of one of the characters (La Muerte/La Catrina) that I really liked, so I tried to come up with a similar looking drawing and ended up with this:

{% codepen https://codepen.io/alvaromontoro/pen/gOMzaxj %}

This illustration took me a little longer than usual (around 2 hours) because I had some issues figuring out some of the shadows and gradients... and it is not exactly as I wanted. Still, I'm happy with the result in general.

Also, I kind of regret using the `vw` unit instead of `vmin` because the drawing gets cut in bigger screens, and it looks a bit weird.

As with the other illustrations I've shared before, here it is a 20x [video on Youtube on how it was done](https://www.youtube.com/watch?v=9ZMiTIHCqoM):

{% youtube 9ZMiTIHCqoM %}

If you want a shorter version, here's a [**1-minute version of the video above**](https://www.youtube.com/watch?v=ZRnK7Q9Cfgg), showing the whole process.
Announcing the new "Redux Fundamentals" core docs tutorial!
Tags: redux
Published: 2020-11-02 15:02:40

---
title: Announcing the new "Redux Fundamentals" core docs tutorial!
published: true
description: Learn "how Redux works", from the ground up
tags: redux
cover_image: https://redux.js.org/img/redux-logo-landscape.png
---

I'm _very_ excited to announce that:

📖📖The new "Redux Fundamentals" core docs tutorial is LIVE!📖📖

This is a complete rewrite of the old "Basics/Advanced" tutorial, and teaches "how Redux works and how to use it" from the ground up:

**https://redux.js.org/tutorials/fundamentals/part-1-overview**

The goals for the rewrite were:

- Improve explanations
- Drop outdated references ("Flux", "container components")
- Show simpler patterns (inline action types, single-file logic)
- Explain how Redux works "bottom-up"
- Teach modern practices
- Show how Redux Toolkit simplifies Redux logic

The tutorial still builds a todo example app, but it's now a real app that gets bigger as the tutorial goes along and is used to demonstrate all concepts including async logic.

We've got numerous CodeSandboxes throughout the tutorial showing the changes at different steps.

This effort pairs with [our "Redux Essentials" tutorial](https://redux.js.org/tutorials/essentials/part-1-overview-concepts), which teaches "how to use Redux, the right way" for real-world usage.

Like with the "Essentials" tutorial, each page now starts with "What You'll Learn" and ends with "What You've Learned" summaries. There's callout boxes with links to more info, and expandable "Detailed Explanation" sections that give more background.

All of the old tutorial pages have been removed entirely, and we've added redirects pointing to matching content in the new "Fundamentals" pages instead.

That completes the effort to rewrite our tutorials, but there's still a lot more docs work left to do!  We've got many more pages that need to be updated / reorganized, and we want to add new material as well.

If you'd like to contribute, see this issue:

https://github.com/reduxjs/redux/issues/3592
Como começar a aprender a linguagem de programação Elixir?
Tags: elixir
Published: 2020-11-02 15:02:05

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

Uma coisa que quase sempre perguntam em eventos sobre Elixir é: *como começar a aprender a linguagem de programação Elixir?* Abaixo vai o que eu acho que são boas estratégias para começar, de acordo com o perfil da pessoa. Discorda ou quer complementar? Comente abaixo!

Você é um iniciante em programação e não consegue acompanhar materiais em inglês? Siga as lições do site [Elixir School em português](https://elixirschool.com/pt/) e tire dúvidas com a comunidade brasileira no [grupo do Telegram "Elixir Brasil".](http://t.me/elixirbr)

Você já consegue acompanhar materiais em inglês mas é um relativo iniciante em programação? Escolha e leia um dos livros para iniciantes (eu gosto muito de [Programming Elixir](https://pragprog.com/titles/elixir16/programming-elixir-1-6/) e de  [Learn Functional Programming with Elixir](https://pragprog.com/titles/cdc-elixir/learn-functional-programming-with-elixir/)). Estes dois livros supõem que você já saiba algo de programação. Mas não se assuste. Dá para acompanhá-los sem saber programação.

Se não conseguir os livros, ou se preferir acompanhar sites, siga as lições da [Elixir School em inglês](https://elixirschool.com/) ou ainda o [Getting Started guide](https://elixir-lang.org/getting-started/introduction.html) que está no próprio site da linguagem.  Para tirar dúvidas, além do grupo Elixir Brasil você pode usar também o [Elixir Forum](https://elixirforum.com/) e os grupos no [Slack](https://elixir-slackin.herokuapp.com/) e no [Discord](https://discord.gg/elixir).

Você entende bem inglês, já programa relativamente bem em alguma linguagem de programação e quer saber o que Elixir tem de tão especial? Leia [Elixir in Action, de Sasa Juric](https://www.manning.com/books/elixir-in-action-second-edition). 

E, claro, participe das discussões na comunidade no Telegram, no Slack, no Discord, no Forum ou ainda no Twitter (seguindo a hashtag [#myelixirstatus](https://twitter.com/search?q=%23myelixirstatus&src=typed_query&f=live)). Todos não, né? Não dá tempo. Escolha um ou dois.

A [Comunidade de Elixir](https://www.youtube.com/watch?v=DOFMn5gosBk) é rica em [recursos](https://youtu.be/SeOEdGtAwv0) para quem quer aprender. Os acima são apenas alguns para que você não se perca e comece já!
Refactoring: Functional Cross Referencing
Tags: typescript, javascript
Published: 2020-11-02 14:59:59

Scenario:
Two Views: A Parent View, containing a Child View.  Each also have one typescript module each. We prefer to put most of our code into the modules because we want to focus on reusability.  

**Cross Functional Referencing** 

```typescript
//Both of these functions are in 
//the folder named functions, 
//they are our reusable code.

function alterChild(ap:Parent){
  // Contains Child
  let child = ap.child;
  child.property = "New Value"
}
 
function async fillAParentGrid(bc:Child){
 let persons = await bc.service.getPersons();
 // 5 levels deep from child component
 bc.Parent.matTable.dataSource.data = persons;
}
```
 
While this design works well, there is a question:  

>"In the function fillAParentGrid, shouldn't there be less mandatory knowledge just to set the data"?  

While it's true that intellisense easily autodiscovers everything we see above; a new person to the team, will not have knowledge of how a MatTable works.

>This requires cross-functional internals knowledge that shouldn't be required. 5 levels deep is too much.

**Morphism is great but...**
We want to make our api, 'new user' friendly, therefore we can do this:

In our parent function module simply add this function.
```typescript
function async setData(ap:Parent, data:array<T>){
  // this hides the internals,  
  // the how it's done part.
  ap.matTable.DataSource.data = data;
}
```
This makes having to know the API of the parent View much easier in the child module.

```typescript
function async fillAParentGrid(bc:BChild){
 let persons = await bc.service.getPersons();
 // 3 levels deep from child component
 await bc.AParent.setData(persons);
 // or in the child view itself
 // 2 levels deep.
 await AParent.setData(persons)
}
```
If we standardize our API and reserve the name setData for each component we're all set.

This is more in line with the new developer's thoughts at the time. "I want to set the data in the Parents' datagrid.  To call this function from the BChild View it's simply

```typescript
fillAParentGrid(this);
```

**A Better Improvement**

```typescript
 // This function name is ambiguous
 fillAParentGrid(this);
 
// These function names are not

//non compositional
 fillAParentGridPersons(); 
//compositional is better
 fillAParentGrid(persons); 
 
```

The compositional pattern is better because the new developer may want to reuse the function to fill in different types : employees, cities, addresses, reports etc.
Prevent an object's properties value from updating
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-11-02 14:58:33

```js
const obj = {name: 'Codedrops'};
console.log(obj.name); // Codedrops

/* Set the 'writable' descriptor to false for the 'name' key  */
Object.defineProperty(obj, 'name', {
		writable: false
});

obj.name = 'ABC';
console.log(obj.name); // Codedrops
```
---
**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Reverse a string in JS
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-11-02 14:57:34

```js
const reverse = str => str.split("").reverse().join("");
reverse('Codedrops.tech'); // hcet.spordedoC
```
---
**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Ruby vs. Javascript in Several Images
Tags: ruby, javascript
Published: 2020-11-02 14:56:13

**My Learning Ruby Video Playlist:** https://www.youtube.com/playlist?list=PLY6oTPmKnKbZp8Kh6jS5A6j-6H2kGY12e

![The Basics of Ruby](https://i.imgur.com/hIVV5O8.png)

![Loops in Ruby](https://i.imgur.com/jKGUGgi.png)

![Ruby Arrays and Hashes](https://i.imgur.com/i2MQ9ld.png)

![Ruby Functions](https://i.imgur.com/8I8ofJD.png)

![Ruby Blocks](https://i.imgur.com/4JgGsbr.png)

![Ruby Classes](https://i.imgur.com/TEKg2LN.png)
Announcing Auth0’s Social Impact Program for Secure, Inclusive Access
Tags: security, inclusive, access
Published: 2020-11-02 14:29:35

We are excited to announce the launch of Auth0.org, our social impact program that is committed to secure, inclusive access for all.
[Read more...](https://auth0.com/blog/announcing-auth0-s-social-impact-program-for-secure-inclusive-access/?utm_source=content_synd&utm_medium=sc&utm_campaign=inclusive_access)
Mentoring First-Time Managers
Published: 2020-11-02 14:28:09

Transitioning from a software engineering position to a managerial one can be quite a leap.

The roles are drastically different from one another, and without mentors, it can be a daunting task. It's our job as engineering leaders help new managers navigate the change.

In the article "Mentoring First-Time Managers", I offer a few practical tips you can follow to help new engineering managers succeed.

https://nemethgergely.com/blog/mentoring-first-time-managers
Pairing with Community Member Marie Antons
Tags: livecoding, devstream, pairprogramming, ruby
Published: 2020-11-02 14:11:10

On October 22nd, DEV Community member Marie Antons joined Christina and I on the pairing stream to work on improving the Twitch liquid tag.

Aside from code, we talked about culinary school, and some embarrassing things that happened to me. 🤣

{%youtube ajz8nGCqLbM %}

While Marie and I didn't get a chance to start working on the actual issue of podcast validation live, we did discuss what liquid tags are, how to create a podcast on Forem, and debugging my local environment. 

After walking through these concepts together, Marie is now able to start working on the issue!

{%github https://github.com/forem/forem/issues/3588 %}

You can also find the three of us all over the web here:

Marie:

* [Twitter](https://twitter.com/MarieAntons)

Nick:

* [Twitter](https://twitter.com/nickytonline)
* [Website](https://iamdeveloper.com/)
* [livecoding.ca](https://livecoding.ca)
* [YouTube](https://youtube.iamdeveloper.com)

Christina:

* [Twitter](https://twitter.com/coffeecraftcode)

Looking forward to seeing you on future streams! [Follow DEV on Twitch](twitch.tv/thepracticaldev) to be notified when future streams begin. 

I hope everyone had as fun and productive a Hacktoberfest as I did.