teleren/devto huggingface dataset:
data-locators with Selenium (or the frontend dev stole my id)
Tags: selenium, automation
Published: 2019-08-01 11:41:57

---
title: data-locators with Selenium (or the frontend dev stole my id)
published: true
description: 
tags: selenium,automation
---

What can you do if your front end developer will not let you use the ID? Or what if the class or name attributes keep randomly changing because of unamed Javascript Framework Number 3001?

There is another way to mark elements as unique and it is a well known good practice. It is called a data attribute. See my link at the bottom for more information.

You can have any HTML element and add any type of data on to that element as long as the name starts with "data-"

For instance if you had a button element you could mark it like this with a data- attribute.

```html
<button id="32132132" class="red-button" data-id="loginbutton">click me</button>
```

In the example above the data-id element has a value of loginbutton. You can use that to locate the element on the page. By using data-id that lets the front end developers use id/name/class as they normally and your tests will still just work.

Below is how you would locate that element in Selenium.

```python
driver.find_element(By.CSS_SELECTOR, "[data-id='red-button']")
```

The name data-id is not special. You can make your data- elements more domain specific. Like data-username or data-password or data-statedropdown. Anything that makes sense to your site or domain.

This is a great way to involve your front end developers with QA/testing. Get your front end devs to add specific data- elements to their markup. They can help you make the tests more robust and hopefully make both of your lives easier.

I will show one example for a local web site that I have running on my machine. I made an HTML element that had a data- element that looks like this (I picked an odd name just to show that the name does not matter).

```html
<a href="test.html" data-frog="burp">hey</a>
```

```python

from selenium import webdriver
from selenium.webdriver.common.by import By

import time
driver = None

try:
    cpath = "e:\\projects\\headless\\chromedriver.exe"
    driver = webdriver.Chrome(cpath)
    driver.get("http://localhost:2015/")
    e = driver.find_element(By.CSS_SELECTOR,"[data-frog='burp']")
    print(e)
    e.click()
    driver.save_screenshot("test0.png") 
finally:
    if driver is not None:
        driver.quit()
```

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
What is an example of an in-house server application with an Azure SQL database?
Published: 2019-08-01 11:34:23

Well, since Azure SQL Database runs on Azure, in the cloud, you don’t have it “in-house”. It’s by definition not local. So, any examples of applications will be apps that run within Azure and/or connect to Azure (which you can bridge to your own internal AD network) and consume the data from there. As to specific examples of apps… pretty much any app that can connect up can consume the data, so there’s not a real limit there that points towards certain applications, so the example is “all of them”. However, you do pay more when moving the data out of Azure, so architecting your application so that the data stays within Azure and you just display it through web pages hosted on <a href="https://mindmajix.com/microsoft-azure-training">Azure</a> is considered a better approach overall.

It’s really important to separate the concept of a database as a service from the older concepts of a server with an instance that hosts databases. You just think about them differently and architect solutions around them differently.
Convert angularJs1.4 code to ionic 4 angular 7
Tags: angular
Published: 2019-08-01 11:27:36

Hi
The mobile app developed Angularjs 1.4. The plugin also developed Angularjs 1.4. the plugin part of code used in angularjs app. Now I am newly developed ionic 4 & angular 7 code. I want to convert plugin part code into angular 7. the code is below:This is customized plugin to access server. here is full code:

if (pluginName == 'getDeviceModelAndOSVersion') {
 var vectorAppRootScope = angular.element(document.querySelector('[app-root]')).scope().$root; 
 browser.executeScript({ code: successFunctionName + '("' + vectorAppRootScope.this.device.model + '","' + vectorAppRootScope.this.device.version + '");' 
 }); 
 }

Please help
EoPL + Elm
Tags: eopl, elm, plt
Published: 2019-08-01 11:26:17

---
title: EoPL + Elm
published: true
description: 
tags: eopl, elm, plt
cover_image: https://thepracticaldev.s3.amazonaws.com/i/mj5mmtpdoev16nli5z3u.jpg
---

For the next few months I'd be switching gears and diving into [programming language theory](https://en.wikipedia.org/wiki/Programming_language_theory).

It's an interest I've wanted to explore for a very long while so I've decided to take the necessary time to dive deep into it.

I'll be reading [Dan P. Friedman](https://cs.indiana.edu/~dfried/)'s and [Mitchell Wand](https://www.ccs.neu.edu/home/wand/)'s book [Essentials of Programming Languages](http://eopl3.com/). The book is an analytic study of programming languages. Its goal is to provide a deep, working understanding of the essential concepts of programming languages.

I've read it at least twice before, once all the way through to assimilate the ideas and another time I reached as far as Chapter 4 using Haskell as the implementation language.

This time around I hope to finish the book and complete a majority of the exercises while using Elm as the implementation language.

As I learn I'd share my notes and the interesting ideas I come across.

If this sounds interesting to you then you can follow my progress as I blog about it and/or via my [eopl3 repo](https://github.com/dwayne/eopl3).
Building Command-Line Applications with Python
Tags: python, beginners, learning
Published: 2019-08-01 11:05:50

You can do a lot of amazing things with Python. When I started teaching myself Python last year, one of the most interesting things I discovered was how relatively easy it was to create CLI apps. Since I learn best by doing, I went ahead to create [norris-cli](https://github.com/wangonya/norris-cli) among other apps, and discovered the possibilities were endless 😄.

Building these kinds of projects is a great way to learn, and it's super fun. To improve my skills and help others learn, I'll be doing a whole series on "Building CLI Apps with Python". I'll start with the basics and go step by step. In the end, we'll put what we've learned into practice by creating a practice project<sup>*</sup>. Of course, what we'll make won't be very useful, but we'll learn enough in the process to go ahead and make something truly useful.

### What I'll cover:
* Setting things up (Python 3.x, pip, Virtualenv, Click, etc)
* Commands, options & arguments
* Using Setuptools
* Prompting users for input
* CRUD (with an online API) **(Practice project)**
  * Working with data structures
  * Writing to local files
* Testing with pytest
* Posting a package on [Pypi](https://pypi.org/)

I hope both the experienced and those just starting out with Python will find this series useful.

#### Update
<small><sup>*</sup> I initially intended to do two practice projects but it seemed redundant so I settled on making the CRUD section the project.</small>
Add Offline-Caching to Your React Reducer with 5 Lines of Code 
Tags: react, javascript, typescript
Published: 2019-08-01 10:56:12

---
title: Add Offline-Caching to Your React Reducer with 5 Lines of Code 
published: true
description: A simple re-usable way to implement state caching with React reducers
tags: react, javascript, typescript
---

When building web applications I often use this method to add local storage caching of my state. 

Suppose we're starting with :

```typescript

const [state, dispatch] = React.useReducer(
  reducer,
  initialState
)

```

as a first step we create a method that takes in a reducer and outputs another one, a higher-order function:

```javascript
const withLocalStorageCache = reducer => { return (state, action) => {
  const newState = reducer(state, action);
  localStorage.setItem("my-state", JSON.stringify(newState));
  return newState;
}};
```

and we wrap our reducer with it before passing the result to the `useReducer` hook.

```javascript

const [state, dispatch] = React.useReducer(
  withCache(reducer),
  initialState
)


```

And finally we replace initialState with the latest cached version of it : 

```javascript 
const [state, dispatch] = React.useReducer(
  withCache(reducer),
  localStorage.getItem("my-state")
)
```

And that' s it ! 

One line of code modified and 5 new ones and our whole state is synced with localStorage.

We can, of course, limit our caching to only specific parts of the state instead of the whole state object. And limit our updates to the cache by action or state. But we'll leave that as an exercise to the user.

> [localStorage is supported by 97.62% of browsers.](https://caniuse.com/#search=localstorage)

Complete demo 

{% codesandbox add-offline-caching-to-your-react-reducer-t6zds %}
How Do I Hunt Down Social Media Accounts Using Sherlock?
Tags: linux, security, github, python
Published: 2019-08-01 10:40:25

"**Social media is one of the easiest platform for hackers to find out information about any particular person or target. - Ankit Dobhal**"

Today! I wake up very late in the morning,& later at 9:30 I had a breakfast.
Then something happened one of my friend sent me a link about a tool **Sherlock** which could hunt down social media accounts with username.

Well as I usually do !!
I sat down in a cheer in front my computer with a cup of coffee,boot up my operating system.
Then I go through [github link](https://github.com/sherlock-project/sherlock) of **Sherlock** & started learning about that tool.

# **What is Sherlock?**

Sherlock is a python based tool which can reveal many user accounts created by the same person in the multiple social media platforms with their **screen_name** or **username**.
sherlock script is written on python. You can checkout the whole script from its [github](https://github.com/sherlock-project/sherlock) link.
![](https://thepracticaldev.s3.amazonaws.com/i/i5s59ny60iirfedqyno4.JPG)

 

## **How I Hunt Down Social media Accounts With Sherlock?**

**Step 1 -> Installed Sherlock**
 In a terminal window I copied the link of sherlock from [github] 
 (https://github.com/ankitdobhal/sherlock) and run following commands.

 ![](https://thepracticaldev.s3.amazonaws.com/i/3ox2dolbvwaz1ko6cb2i.JPG)
 **Note : Python3 and python3-pip have to be installed.**

 To get help about Sherlock I tried **python sherlock -h** command from inside 
 the Sherlock folder.

 ![](https://thepracticaldev.s3.amazonaws.com/i/947hil9pokhs7zqkzf6k.JPG)

**Step 2 -> Identify screen name**
Just after reading the help I was ready to start script.But wait how to find out screen name of my target? Then I found screen name of my target by running a Google search and "Twitter."
 
My target was Sir **[Robert Baptiste](https://twitter.com/fs0c131y) aka elliot_alderson**. He is french security researcher & I admire his work on security a lot.
 
 ![](https://thepracticaldev.s3.amazonaws.com/i/mii62u4ur7lqkmjgp3bc.JPG)

**Step 3 -> Scan for accounts**
Then finally I ran sherlock.py script with following commands in my terminal screen **python target_name -r --print-found** to find out all social media account of my target.

![](https://thepracticaldev.s3.amazonaws.com/i/ux8c4jwmmzjsza9ljsox.JPG)
**Note : '-r' argument in the above command will organize the list of found 
          accounts by which websites are most popular,& '--print-found' will 
          show all accounts in terminal screen.**

So as you can see above example that how I hunt down account all over internet using sherlock.py script.I also tried to contribute some file in this tool You can go through with this link to find out [sherlock](https://github.com/ankitdobhal/sherlock) tool.
-> https://github.com/sherlock-project
Which dev.to loading GIF do you prefer?
Tags: discuss, showdev, help
Published: 2019-08-01 10:16:57

---
title: Which dev.to loading GIF do you prefer?
published: true
description: I made some dev.to loading gifs
tags: discuss, showdev, help
cover_image: https://thepracticaldev.s3.amazonaws.com/i/38v27i6fggg0pyiyua2s.jpg
---

So I've gone ahead and made some dev.to loading gifs based on the logo. Which one's your favourite? 
_This large gif is a bit choppy - see the actual gifs further below ;)_

![Which one is best?](https://thepracticaldev.s3.amazonaws.com/i/ppe8z0ilpi0pv0qtfviw.gif)


Whenever I start a [side product](https://chrisdermody.com/products/), one of the first things that pops into my mind is the loading animation. Lately, I've found a nice tool that I'd like to share called [Anima](https://www.animaapp.com/). It's a sketch plugin that lets you animate things like this. It's quite powerful and I'm still discovering more about the tool every week. 


**If anyone's interested, I'll make a quick tutorial showing how to make the GIF everyone likes, and maybe then I'll jump in and try contribute to the project on Github - that'd be cool :)**

My first thoughts were what if the "V" moved to the left, replicating a console, and then "loading" just scrolled across...

![](https://thepracticaldev.s3.amazonaws.com/i/qb0wtz2xaqbgub8slcic.gif)

I quite like this, but it wasn't quite right. After chatting with my lady friend (who's also a dev, hey Catia 😘), she suggested doing something like "npm run DEV" - which I really like the idea of. So, we came up with:

![](https://thepracticaldev.s3.amazonaws.com/i/czf56wunsqu2jkzx9yqi.gif)

And a slight variation on that

![](https://thepracticaldev.s3.amazonaws.com/i/90l6yftawx9kbiqyejlu.gif)


### Some other options
It's always good to have options! While building the above, I thought what if I just faded the letters in and out sequentially. So:

![](https://thepracticaldev.s3.amazonaws.com/i/0vbfzhjcsjs0u716x88o.gif)

And another version of the above

![](https://thepracticaldev.s3.amazonaws.com/i/664ckj1det1xhop9mwni.gif)

## Which do you prefer?
I know which is my favourite, but let me know what you think is best, and obviously if you've any ideas for how to improve it, lemme know. 

PS: you can check out some of my other animations over [here](https://chrisdermody.com/tag/animation/?r=devto), like:
* [This "coding" animation I made with CSS and SVG](https://chrisdermody.com/css-only-coding-loading-animation-step-by-step-tutorial/?r=devto)
* [This one I made using MKBHD's logo](https://chrisdermody.com/mkbhd-logo-animation-step-by-step-tutorial-in-svg-and-css/?r=devto)
* [Or this one I made using the Tesla logo](https://chrisdermody.com/if-tesla-had-a-loading-icon/?r=devto)
Book Review: Sapiens: A Brief History of Humankind (2014)
Tags: bookreview, watercooler, culture, history
Published: 2019-08-01 10:02:08

This might be a bit off-topic for Dev.To, but I recently came across a list of recommended books for software developers and saw _Sapiens: A Brief History of Humankind_ by Yuval Noah Harari on the list. The recommender put forth this book as an example of a work that should be read to understand our role as humans at large, rather than particular humans accomplishing particular things. Obviously, it's not directly related to software development. But anyone interested in the bigger picture, or especially in anthropology, human cultures, and the history of our species would certainly love this book as much as I do.

Without further ado, here is [my review of this book](https://www.goodreads.com/review/show/2905133552):

---

Just 6 million years ago, the human species did not exist: "a single female ape had two daughters. One became the ancestor of all chimpanzees, the other is our own grandmother." The wide variety of human species -- _sapiens_, _erectus_, _neanderthalensis_ -- evolved from evolutionary pressures like any other species. Why did _sapiens_ survive and thrive and what particular characteristics enabled our species to dominate the planet so completely as we do today?

The mastery of weapons and fire enabled us to hunt, to cook our food, and to control our environment (primarily by burning down forests and as weapons against predators). But all human species enjoyed these technologies. It was _Homo sapiens_' big brains, evolved only ~150,000 years ago, which enabled us to conquer the planet, eliminate all other human species, and control the planet.

Around 30,000 years ago, a cognitive revolution occurred -- _sapiens_ were now able to imagine and describe things which do not exist in the real world. This "fictive language" has enabled all finance, culture, religion, and politics in the millennia since. The ability to believe in an afterlife can lead to a belief in morality, which can lead to a belief in human rights. None of these concepts exist in the natural world, they are all collective imaginations of humanity. Yet they all shape the destiny of our species and our planet, more than our genetic code ever has.

This book is a fantastic exploration of the evolution of modern humans from their appearance in Africa millions of years ago, to their extreme technological and self-improving advancements today. Why did _Homo sapiens_ dominate the other species of humans? How did we move from a primarily hunting-and-gathering society to a primarily agricultural one? How have capitalism, religion, liberalism, and the scientific revolution improved or degraded our lives? And are any of these inherently good things? Are any of us happier now than our early ancestors, hunting game on the plains of Africa? I strongly recommend this book for anyone interested in the answers to the above questions.
How do you pass the time when you can't fall asleep?
Tags: watercooler
Published: 2019-08-01 09:55:21

---
title: How do you pass the time when you can't fall asleep?
published: true
description:
tags: watercooler
---

True story. It is almost 6am and I have not gone to sleep yet.

How do you pass the time?

The other day, I read Bundler and Nokogiri documentation. Today I ordered pet supplies. I feel weird about coding this early/late so I end up reading on my phone.

☕
How can I make a list of group data by month-year in rest Framework with json output?
Published: 2019-08-01 09:38:50

The json data format I want like this:

    [
      {
        monthName: "AUG 2019",
        items: [
          {
            day: "03",
            description: "Baseball",
          },
          {
            day: "08",
            description: " Baseball 2"
          },
         
        ]
      },
      {
        monthName: "Sep 2019",
        items: [
          {
            day: "03",
            description: "Baseball",
          },
          {
            day: "08",
            description: " Baseball 2"
          },
         
        ]
      }
    ]
Admin Dashboard Templates Mega Sale Falt 50% Off
Tags: admintemplate, admintemplates, admindashboardtemplate, dashboardtemplate
Published: 2019-08-01 08:59:42

Are you looking for a super cool Admin Template in just a few bucks? No need to worry anymore here I am with a huge sale offer. There is an Independence Day Sale for 2 days for [CodedThemes](https://codedthemes.com/?ref=kishan) Admin Dashboard Template at flat 50% off Discount. 

![Admin Dashboard Templates Mega Sale](https://blog.codedthemes.com/wp-content/uploads/2019/08/Big-mega-Sale.jpg)

Today there are many admin templates and their providers are available in the market. Among all other best dashboard template provider one is CodedTheme. All their templates are highly rich in Quality, Design, and Components. All backend templates design standard is derived from real-world web applications. All tiny pieces of information are used and represented in a way that helps the end-user in their day to day life. It comes with a fully developer-centric code and all templates are tested with real devices.

They develop backend template in different categories like [Bootstrap Admin Template](https://codedthemes.com/item/category/templates/admin-templates/?ref=kishan), [Angular Admin Template](https://codedthemes.com/item/category/templates/angular-dashboards/?ref=kishan), [React Admin Template](https://codedthemes.com/item/category/templates/react-admin-templates/?ref=kishan), and [Bundle](https://codedthemes.com/bootstrap-mega-bundle/?ref=kishan). All of their Admin Template comes with multiple unique dashboard layouts like Analytics dashboard, Sales dashboard, Project management dashboard, Help desk, E-commerce, and many more layouts. All this Admin panel Layout comes with different page layouts like Vertical, horizontal, Light & Dark, RTL, etc… with many different widgets, component color, fonts, pages, and other unique choices which makes developer task super easy and quick.

Undoubtedly this deal will be the **best deal of the year 2019 for Admin Dashboard Templates**. All admin templates of CodedThemes will be available at **flat 50% off** for 2 days 14 & 15 August. Admin Dashboard Template mega sale starts on 14 of August at midnight and will be available till the next 48 hours. If you might visit any one of there template during this 2-day sale then there would not be a reason to miss their [premium templates](https://codedthemes.com/item/category/all-categories/?ref=kishan). So don't you miss it, just grab the deal?

Purchasing any of their templates before this 2 days sale will give you **10% special off** from CodedThemes by using this discount code “**K10DIS**”. This code is valid until 13th August 2019.
📦 Convert relative file system paths into safe URI paths
Tags: replit, python, functorflow
Published: 2019-08-01 09:31:50

---
title: 📦 Convert relative file system paths into safe URI paths
published: true
tags: replit, python, functorflow
---

```python
from functorflow import f

# Properly encode URI path segments
r = f('uri-path', '../abc/@#$%¨&()[]{}-_=+ß/môòñ 月 قمر')
print(r)
# -> '../abc/%40%23%24%25%C2%A8%26()%5B%5D%7B%7D-_%3D%2B%C3%9F/m%C3%B4%C3%B2%C3%B1%20%E6%9C%88%20%D9%82%D9%85%D8%B1'
 

# Also supports paths with Windows directory separators
print(f('uri-path', 'a\\b\\c'))
# -> 'a/b/c'
```

{% replit @functorflow/uri-path %}