teleren/devto huggingface dataset:
Theme Changer using localStorage and CSS custom properties(variables).
Tags: javascript, css, html, localstorage
Published: 2019-09-02 11:23:45

If you have never used localStorage before [check out Mozilla docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), we will be using a little different Syntax than shown, but it will give you an idea on how Localstorage works

First of all create a stylesheet and link it in your HTML
```html
<link rel="stylesheet" href="main.css">
```
Then create a button and give it a class
```html
<button class="changeTheme">Change Theme</button>
```

Then add a script tag on the bottom of your HTML
```html
<script src="main.js"></script>
```
Your HTML should now look like something like this
```html
<html>
<head>

    <link rel="stylesheet" href="main.css">

</head>

<body>
    <button class="changeTheme">Change Theme</button>

    <script src="main.js"></script>
</body>
</html>
```

In the CSS file we start off by creating our variables and assign it to what ever we want the change the color of. In this case I create an variable called themeColor and use it on the background-color on the body. The reason --themeColor is empty is because we give it its property through the javascript. We do this to prevent the page from flickering.

```css
body{
    --themeColor: ;
    background-color: var(--themeColor);
}
```

Time for the javascript, start off by making an variable for your button.
```javascript
let themeChangerBtnElem = document.querySelector('.changeTheme')
```

Now we want to create the localStorage but before we create it we have to check if it already exist. We do that to prevent overwriting it.

```javascript
if(localStorage.currentTheme == null){
    console.log('currentTheme does not exist', )
    localStorage.currentTheme = "blue"
}else{
    console.log('CurrentTheme does exist', )
    console.log('Localstorage: ', localStorage.currentTheme)
}
```
Then make an updateUI function, we call this everytime we want to update our page so remember to call the function somewhere in your code. Whats happening is that we set the property of the --themeColor depending on the localStorage

```javascript
updateUI();
function updateUI(){
    if(localStorage.currentTheme == "blue"){
        document.body.style.setProperty("--themeColor", "blue")
    }else if (localStorage.currentTheme == "grey"){
        document.body.style.setProperty("--themeColor", "grey")
    }
```

at last we give our button an eventListener which change the localStorage.
If the localStorage is blue, change it to grey and vice versa. And then we call our updateUI function.
```javascript
themeChangerBtnElem.addEventListener('click',()=>{
    if(localStorage.currentTheme == "blue"){
        localStorage.currentTheme = "grey"
    }else if (localStorage.currentTheme == "grey"){
        localStorage.currentTheme = "blue"
    }
    updateUI();
});
```

This tutorial were requested by a fellow student, I hope it were helpful
Why doesn't ReactJS appear in my HTML website?!
Tags: react
Published: 2019-09-02 12:38:01

Hello guys!

I've been trying to add a ReactJS component to my HTML website but it still doesn't work. I followed all the instructions written here https://reactjs.org/docs/add-react-to-a-website.html (including the 3 links+ embedding the file name at the end of the page+ and creating a div with an id+ running the 3 commands of Babel in the command line+ ReactDOM.render(< Component Name />, document.getElementById("#id");) and none of what is written in the page is working. What do I do?! And are there further instructions not written in the link I provided?!

P.S. The file is written in .jsx extension
Do you find it difficult to unplug?
Tags: discuss, career, productivity
Published: 2019-09-02 11:58:44

I have just come back from ten days in the lovely [Mijas, Spain](https://www.google.com/maps/place/29650+Mijas,+M%C3%A1laga,+Spain/@36.5915597,-4.6544579,13.83z!) with family. It was amazing and really relaxing - great to get away from all the hustle and bustle of "normal" life for a bit.

However I did find that it took me a good few days to fully "unplug" from thinking about work, whether it was a coding problem at the back of my mind, worrying that I'd miss important team changes or even just miss out on the Slack banter! This also made me realise that it actually impacts my weekends sometimes, this struggle to unplug. I have always tried to live in a balanced way whereby I "work to live" rather than "live to work" (though of course both are important and I always give my best while _at_ work).

Does anyone else have this issue? How do you minimise it and stop it from spoiling your down time?
VinylShop mobile app
Tags: ios, swift
Published: 2019-09-02 11:10:24

Our iOS team at [EL Passion](https://www.elpassion.com) wanted to know what it takes to put our designers' work into motion. We've challenged ourselves to build demanding shots while retaining our trademark high code quality.

One of the outcomes is the [Vinyl Shop mobile app](https://dribbble.com/shots/4996346-Vinyl-Shop-mobile-app) by [@MatPrzegietka](https://dribbble.com/MatPrzegietka) implementation. 

|Dribbble shot|Implementation|
|:-:|:-:|
|[![Shot](https://github.com/elpassion/Showcase/raw/master/content/VinylShop-ios-demo/shot.gif)](https://dribbble.com/shots/4996346-Vinyl-Shop-mobile-app)|[![Preview](https://github.com/elpassion/Showcase/raw/master/content/VinylShop-ios-demo/preview.gif)](https://github.com/elpassion/VinylShop)|

- Swift 4.2
- Unit test code coverage: 100%

## Source

- [Dribbble shot by Mateusz Przegiętka](https://dribbble.com/shots/4996346-Vinyl-Shop-mobile-app)
- [iOS implementation by Jakub Turek](https://github.com/elpassion/VinylShop)

## License

Copyright © 2019 [EL Passion](https://www.elpassion.com)
SwiftLint config per target
Tags: ios, swift, swiftlint, codequality
Published: 2019-09-02 11:07:19

> EL Passion :heart: open source.

In our mission to deliver the highest quality product possible, the iOS team at EL Passion rely on linting tools such as `SwiftLint` to fix common code structuring & formatting issues.

However, there are some scenarios in which we can't easily employ the tooling to work for us. We've encountered this issue when developing [VinylShop mobile app](https://github.com/elpassion/VinylShop) with the following directory structure:

```
Project /
├── Project.xcodeproj
└── Sources /
    └── Controllers /
       └── Login /
           ├── LoginViewController.swift
           └── LoginViewControllerSpec.swift
```

We couldn't easily configure SwiftLint to use a different configuration for the production and for the test files.

## SwiftLint runner

Fortunately, we've been able to fix the issue by implementing a simple Python script which reads the contents of the `.pbxproj` file and modifies the included files in the SwiftLint config prior to the linting. The script is divided into the two simple files:

* [lint.py](https://github.com/elpassion/swiftlint-runner/blob/master/commands/lint.py),
* [xcproj.py](https://github.com/elpassion/swiftlint-runner/blob/master/commands/utils/xcproj.py).

What's even better is that we've released the script as the PyPI package, so you can use it in your own projects, too. It's as simple as running:

```
pip install swiftlint-runner
```

And adding an appropriate build phase:

```
slrunner <project_name>.xcodeproj <target_name> .<swiftlint_config_file_name>.yml
```

You can find more details at the [elpassion/swiftlint-runner](https://github.com/elpassion/swiftlint-runner) repository.

## License

**SwiftLint runner** is maintained with :heart: by EL Passion and released under an MIT license.
Transforming text
Tags: json, javascript, webdev
Published: 2019-09-02 11:53:26

---
title: Transforming text
published: true
tags: json, javascript, webdev
canonical_url: https://remysharp.com/2019/09/02/transforming-text
---

During the weekend I spent an hour coding a hacky bit of code and I thought it might help one or two other people so I posted it on Twitter (on Sunday at 10am UK no less) and [the response was…surprising](https://mobile.twitter.com/rem/status/1168095658638749697). I genuinely thought it would only serve me, but some 120+ retweets and 800+ likes it seems like others found a use too.

Since twitter is rather ephemeral, it made sense to post on my blog (a bonus for all you [RSS users](https://remysharp.com/feed.xml) 😉).

## What is it?

🔗 **[https://transform.isthe.link](https://transform.isthe.link)**

This tool will take a glob of text - an example might some copied data from a browser - and you apply a series of rules to the text until you have the structured data you want.

[![Transform in action](https://remysharp.com/images/transform.png)](https://transform.isthe.link)

It might take a bit of playing around with, and frankly the code behind it is fairly messy, but it does the trick.

## Why?

Before the haters pile on, I absolutely do use command line tools to do string manipulation. I have a whole [course on the command line](https://terminal.training/?coupon=READERS-DISCOUNT) ($80 off with "READERS-DISCOUNT" coupon) and I absolutely did run the original problem through a pipeline of `awk`, `csvjson` and `jq`.

The command line is absolutely fine, but sometimes it's nice to have a webgui to show me what's going on and to perhaps be a little friendlier to a user (though I'm not sure my solution is friendlier - it's fairly bare if I'm frank!).

But that's why. It took me an hour to hack together (you can still see the JS Bin specific runner code in the [source](https://github.com/remy/transform)) and probably another hour to make nicety tweaks (like grid for layout, memorising URLs, etc).

If you're interested in seeing more of my random micro projects, I tend to put them on [https://isthe.link](https://isthe.link) - with links to the source where worthwhile.

_Originally published on [Remy Sharp's b:log](https://remysharp.com/2019/09/02/transforming-text)_
Devs Struggle
Tags: discuss, tutorial, beginners
Published: 2019-09-02 10:24:56

Devs Struggle
The part of being a developer of any kind of programming development is problem-solving. You might say that we make a living from solutions to a problem. Facing a problem can be very frustrating when you feel like your tried everything to solve it.
Here’s a few tips that helps me a lot in situation I get so mad.

• Break your problem into smaller parts
Take a piece of your code and console.log every part and make sure it work.

• Learn to use debugging tools.
Use a debugging tool that suits you perfect. Some example could be:
• JavaScript.
• Debugging.
• Chrome Dev Tools.
• Nodejs.
• Postman.

• Ask for help
Ask for help to a teacher or a friend or even go online and ask example on stack overflow.

• Use pseudo-code
Use Pseudo selector (a mouse over where you can use :hover, :checked and use the elements you like)

• Use flow-charts
Make your mind visual to yourself and plan which order you are have to go.

• Go for a walk to clear your head.
Take a break.
• Work on something else for a while
Go work on some of your other projects and get back to it later

• Think of something completely different
Think of anything completely different from programming. Watch television or exercise if you have to.

Usually I get too frustrated to think and find the solution when I am not looking for it. For me personally I sometimes take a break away from the problem is a good way to find solution. Even small talk with your family or friends that does not programming can make you re-think stuff.
What helps you guys? Write in the comment below and tell me
What was your first year as developer/designer like? Got any advice?
Tags: discuss, beginners
Published: 2019-09-02 10:23:31

Hi there 👋


A lot of developers tend to struggle in their first year, either with staying consistent as learners or finding their first jobs. 

Personally, I had a fair share of my own struggle from deciding what technology was best to start learning to finding the right fit for me in terms of my career.

So I will love to hear from other experienced developers and designers what their experience was like and I feel it'll help beginners just getting into tech feel they are on the right track and it's only normal to feel a certain way.
Reading List Calendar - macOS app
Tags: macos, swift
Published: 2019-09-02 10:22:10

If you are like us, you love to read web articles. No matter if you are interested in functional programming or cooking recipes, there are plenty of resources all over the web to learn from. If you are an Apple fan, you are probably familiar with Safari Reading List - a place for your web articles, stored for later, waiting to be reviewed and read.

Not a long time ago, we were inspired by Marcin Krzyżanowski, who showed us another non-standard way of storing web bookmarks... in his calendar:

![Tweet by Marcin Krzyzanowski](https://github.com/elpassion/Showcase/raw/master/content/ReadingListCalendarApp/tweet_krzyzanowskim.png)

We wanted to explore this way of data visualization, so without waiting another minute, Reading List Calendar app was born. It's a simple macOS app project that synchronizes **Safari Reading List** with your **Calendar**. It's a native Cocoa application, written in Swift, that does not require any third-party services to work.

We tried to keep it as simple as possible, but also incorporate macOS sandboxing and security features. User has to choose bookmarks location and authorize access to the calendar in the app, otherwise it won't be able to read and write data considered to be private (your reading list and calendar events).

![Reading List Calendar](https://github.com/elpassion/Showcase/raw/master/content/ReadingListCalendarApp/screenshot-1.png)

It was a lot of fun to implement this simple project, basing on an idea from a tweet. The application was build in Xcode, with native Apple frameworks, like AppKit. We used Test Driven Development for most parts of the implementation. 

Tech stack:

- [Swift 5.0](https://swift.org)
- [RxSwift + RxCocoa](https://github.com/ReactiveX/RxSwift)
- [Quick](https://github.com/Quick/Quick) and [Nimble](https://github.com/Quick/Nimble)

We love to share it with you. It's open source and [available on GitHub](https://github.com/elpassion/ReadingListCalendarApp).

## Source

- [Tweet by Marcin Krzyżanowski](https://twitter.com/krzyzanowskim/status/1099679842860257280)
- [Implementation by Dariusz Rybicki](https://github.com/elpassion/ReadingListCalendarApp)

## License

Copyright © 2019 [EL Passion](https://www.elpassion.com)
How I demonstrated growth mindset recently
Tags: productivity
Published: 2019-09-02 10:16:30

Before applying to Andela I really didn't knew what Andela was and what they do.
What I knew was that Andela is a place where you can get to improve your technical skills.
I also though we will be learning everything and after implementing it.

But I found it different and more challenging.
Just direction are enough to start doing your own learning and implement what you learnt.
Because almost everything for me was new, I stated thinking of dropping and go to first learn and may be come back after.
But latter, I decided to stay and work harder as I can to learn and implement anything required for the project.
Now I am here and I thing I am progressing day by day and I believe I will work to the end to get all required to improve.

That was how I changed my mindset to do better than deserting.
E-commerce Today's deals interaction, iOS demo
Tags: ios, swift
Published: 2019-09-02 10:12:51

We love implementing challenging designs. Below you can see how we converted a Dribbble shot made by one of our designers 
into native iOS application.

|Dribbble shot|Demo app|
|:-:|:-:|
|[![Shot](https://github.com/elpassion/Showcase/raw/master/content/ecommerce-ios-demo/shot.gif)](https://dribbble.com/shots/3116611-E-commerce-Today-s-deals-interaction)|[![Preview](https://github.com/elpassion/Showcase/raw/master/content/ecommerce-ios-demo/preview.gif)](https://github.com/elpassion/ecommerce-ios-demo)|

- Swift 4.2
- Code coverage: 100%

## Source

- [Dribbble shot by Matt Koziorowski](https://dribbble.com/shots/3116611-E-commerce-Today-s-deals-interaction)
- [iOS implementation by Dariusz Rybicki](https://github.com/elpassion/ecommerce-ios-demo)

## License

Copyright © 2019 [EL Passion](https://www.elpassion.com)
How to Change Author URL Slug in WordPress Without Any Plugin
Tags: wordpress, change, author, slug
Published: 2019-09-02 09:06:05

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m4rnxyuraq8ku4o499r9.png)

WordPress default Author URL slug same as Author username. Thus, anyone can know the username of the Author. For security reasons, you want to hide your real username from Author URL slug. In this article, we are discussing How to change Author Slug is the last part of the Author URL without any plugin.

Change Author URL Slug in WordPress
For example, Our Author URL of this site is 
https://speedysense.com/author/sseditorial


And our Author slug is “sseditorial”. We have to change Author slug “speedysense” to make our new Author URL of this site is
http://speedysense.com/author/speedysense


WordPress already have a username and nicename fields. username is used to validate login. However, nicename is used to create Author Permalink and Post Permalink. When creating a new user, WordPress automatically generates the nicename (same as given username). Once the user created, you can not change username later in the admin area. Thus, we display nicename in the User profile screen.


Let’s see how to change nicename to anything unique that you would like without using any plugin. <a href="https://speedysense.com/change-author-url-slug-without-plugin/">Here</a> you can read full artilce as well shotcode.
Just Let Me Build
Tags: docker, python, django, mongodb
Published: 2019-09-02 08:12:58

I tried to host my app on Heroku,
They told me you’re a joker,
The future is Docker.

I was busy building my <a href="https://m.signalvnoise.com/the-majestic-monolith/">majestic monolith</a>,
They told me that’s useless,
The future is Serverless.

I’ve learnt the hard way,
I’ve railed on, the Rails way,
Now they say Go is the way to go.

I’ve fought <i>Pythons</i> in the <i>Django</i>,
I moved from MySQL to Mongo,
Now I wouldn’t be surprised if there’s such a thing as Mango.

Hello world,
Just let me build.
How to create first react native app(Stopwatch)
Tags: reactnative
Published: 2019-09-02 08:07:22

How to create your first react native app with complete guide step by step explanation. I am sharing you the complete tutorial about this. Hope you all will get the good ideas from this. 

Read this article about the React Native App. And you can also create some more application with the help of this guide.

https://codersera.com/blog/first-react-native-app-stopwatch/

read this and give your valuable feedback about this article and you will see some more article related to this in future.
Rebasing off a repo root
Tags: git, gitgud
Published: 2019-09-30 06:57:15

---
title: Rebasing off a repo root
published: false
tags: git, gitgud
canonical_url: https://thomashartmann.dev/blog/rebasing-off-a-repo-root
cover_image: https://thomashartmann.dev/images/rebasing-off-a-repo-root.svg
published: true
---

<div><p>Ever had to change something about all the commits in a git repo before pushing it to a remote? As in from the <em>very first</em> commit in a repo? Maybe you’ve started a repo locally and when you’re ready to push it, you realize that you’ve used the wrong author or messed up the format of the commit messages; or maybe you just want to squash those first few commits into a single concise package.</p>
<p>In these situations, my first response is to do to an interactive rebase (<code>git rebase -i</code>). Usually when I’m rebasing, though, I’m in a project that has an upstream and where I’m rebasing off a specific commit or branch. For situations where you don’t have a commit to rebase off, but you want to rebase the <em>entire</em> history or at least the <em>very first</em> commit: What do you do?</p>
<p>The answer, my friend, is that you pass the <code>--root</code> option:</p>
```sh
git rebase -i --root
```
<p>That’ll let you pick, reword, edit, squash, fixup, exec, drop, label, reset, or merge <em>all</em> of your commits from the ‘dawn of time.’</p>
<p>Have fun!</p></div>
React 17.0 is going to be awesome...
Tags: react
Published: 2019-09-02 07:15:26

Everyone know that in React 17 most of the depracated since `16.3` update and now they want us to rename the old lifecycles as UNSAFE_ and only they will work in `17.x` React update. Now as a developer and more comfortable with these deprecated lifecycle methods, I am struggling to migrate the existing `componentWillMount`, `componentWillReceiveProps`, `componentWillUpdate` code to `static getDerivedStateFromProps` and `componentDidUpdate`. It would be awesome, if someone from this DEV community to provide us some guidelines to how to migrate with some examples. For an instance, if someone can provide us an example of how to migrate user profile edit which is coded using `componentWillReceiveProps` to newer lifecycle methods, that would be a great help.
Thanks in advance...
Workplace without hate
Published: 2019-09-02 07:13:58

TL;DR the reason why there is no hate between any of the workers in my current workplace is we avoid gossip.

I guess the best known part of the bible (the old testament) is its' stories, but the most important part of the bible and in Judaism is Halacha (Jewish law). And one of the most important rules of the Halacha (in my opinion) is the rule forbidding slander and gossip.

what it means in a nutshell, is that a person should not say, imply, signal, or even listen to a bad thing told about another person (even if the bad thing is true, yes it's crazy, I know). Now that I describe what slander is it's pretty obvious why, if everyone is avoiding slander, there is no hate. By not letting any slander or gossip enter the workplace, by not repeating even the details of an incident between 2 co-workes, you're keeping it from evolving and spreading.

How can we achieve it? Honestly, I'm not an expert and my experience is short, but I will be happy to share my own experience from my current workplace. I started working in my current workplace almost 3 years ago. 
I made this rule for myself, that any time I would hear slander I say "this is a slander, I'm not accepting what you just said". Even though hearing it might be annoying or even make me somewhat an annoying person in the office, I knew it required gentleness and also an understanding of my co-workers, for me to know when I can say it and to whom and after a while people got familiar with it and even further embraced it.

Today, after almost 3 years I certainly feel the effect this behavior had on our workplace and the unexpected happened when my CEO told me he started spreading this rule of no gossip and slander to his daughters and their friends in school.

After hearing about this article by chance, my previous CTO wanted to share his point of view on the matter:

> My name is Snir David and I have been Bnaya’s manager at the said company for several years. One of the most vivid memories I have from my time as Bnaya’s manger is his rule of no gossip.

> What started as a funny rule for us, mostly enforced by Bnaya alone, quickly became an office habit. First as a joke, when someone spread gossip or slander around when Bnaya wasn’t present, we repeated Bnaya’s phrase.

> From there, the road to have much less gossip and slander than is usual in an office environment was short. This, in my opinion, was one of the cultural building blocks of the company that paid high dividends down the road. Thank you, Bnaya.
The Blackout
Tags: devjournal
Published: 2019-09-02 07:03:11

It's been a couple of days since I moved into my new place, and in that time, I have not wrote a single line of code. Although I have this sort of guilt towards my personal work, it's not enough to make me sit down and code, I'm never going to unpack if I did that. The other major hurdle here is the blackout, I have food and water but no WIFI, how do you cope in a no WiFi situation? Short of getting 5G I'm just going to wait until the 7th.