teleren/devto huggingface dataset:
RunCSS and MithrilJS
Published: 2020-06-29 12:45:39

[RunCSS](https://dev.to/mudgen/runcss-a-runtime-version-of-tailwindcss-5dic), A Runtime Version of TailwindCSS and Beyond...awesome.

If you like Tailwind, but don't like it's verbosity like here : [Building a table component with Tailwind CSS](https://blog.logrocket.com/building-a-table-component-with-tailwind-css/), look at this :

```html
<html>
<head>
  <script src="https://unpkg.com/mithril/mithril.js"></script>
<head>

<body style="display: none;">

  <div id="table">
  </div>

  <script>
    const classTable = {class : "shadow-lg bg-white"};
    const classTR = {class:"bg-red cursor-pointer hover:bg-blue"};
    const classTD = {class : "text-white border px-8 py-4"};
    const classTH = {class : "bg-orange border text-left px-8 py-4"};
    const header =  ["Company", "Contact", "Country"];
    
    const data = [ 
      ["Alfreds Futterkiste",  "Dante Sparks",  "Italy"],
      ["Centro comercial Moctezuma",  "Neal Garrison", "Spain"], 
      ["Ernst Handel", "Maggie O'Neill",  "Austria"]
    ]
    
    const Table = 
      m("table", classTable, 
        m("tbody",
            m("tr", header.map((c) => m("th", classTH, c))),
            data.map(d => m("tr", classTR, d.map((c) => m("td", classTD, c))))
        )
      )
      
    m.render(table, Table)
    
  </script>
  
  <script type="module">
    import processClasses from 'https://unpkg.com/runcss@^0/dist/runcss.modern.js'
   
    for(const element of document.querySelectorAll('*[class]')) {    
      processClasses(element.className)
    }  
    // Display elements
    document.body.style.display = "block"
  </script>
</body>
```
You can play with it here [RunCSSMithril](https://flems.io/#0=N4IgtglgJlA2CmIBcBWADAOgJwBYA0IAzvAgMYAu8UyIGAFuWLCAQGYQKHIDaoAdgEMwiJLQZMWIUgHs+lOTQA842AD4AOn2XwBUDXwAEBxYVIAnCAAdyBwmdIBedSAblLhJAHpPAVz6WAawBzDBkwT0hyOgtYCIgomIwAK0JnVUVPUwtrfW1dfU1FACNpKABPW3IyhCcQKAhCS1gBMqQDPll4AG40zU0jRXqANwNoWvIBIoRew2NPYYLZk3Mrcn0jIxk+QhtSZsJCABVJhAMHA2A9gQODNudCOl1pAHcAWlgggyKg1+e6ePgzgAvj1ZptZDsDFcDocAEpnC7QjzOb6vMxUKE+MyEaRmV6WaQQOTwMwGOjSIYkpCoqY+QEgEH9DZbSFIw4AEQRl32hFuBmclAAHuRfv9KF9cVASQZLILXgAOGVlV44YGgjZQiG7HmHAASXKRfJRP1xAj4QXgErMUtJQpFCFYNllCqVKrVTPB2xsdB0NoRBm4zgAwtIwJYzWVnHh+SAQ3IBBQozGQ35yGZIyAALrqjYezVegxQAQTBHcflgjaBkAAQVgrHRUF5ADEfORKGYAg1KEmY+yzeKAMrhjupFhGZwASQmsAzmbweaMVaD8DkZmkmuE9ggAlgBgAstIKPAAF4+MACHvOAByOl3AHEBGYLDi+EnnEOBETnHPyxrF84AFEzALXUzSlWA3xAPcBCCIIIEtAB5AByG8OAgscY2rHwdgsC8szzTM8zzFkbGOKZLXOBcDDAAAKAUTnpaM2QY6MqKMWiBRKcoozYv8OJANMkx9XQSQwc9LBomjSAASjOVRqLogS6CTNldSY6SNPnCs-w2IsJjEgQJKgOSFIFMwVJ1WFoygAyJKk2SHHk-jyCgCzriOdl1I06TeJ87SDD8nS8zADB0T4G0aImcjozIhBAtzJZMhWHImSZZZshsKpLHgWowFKHxphAdYNggMNcSdNdSHgA4gx5aqDHrUMDCQ1x3C8Xx-GCUJQ08Mw-FIA4AAEAD00HmLtev6g4xNKEk+GSQgkI9PNWFxKStQMEh4GEOQDGkVhC0PM8V3IDAAEc6XTActooXFa1gGikIAKm4JFMyQjSLg1KjLEq6rCFq9zqporadtOpEryEeB4qMIFxwrbwDHZBomhaTaEDB1IKygI6wYwLiygwHZqngDB6kaZoKkokApkPAJnDSpKMtyTwCdUSRiDIcgIAhGg0CQNAVRwJAAHYGTwfgoZoBbJC2eRyBocXJeEaWBq4Ag5ZOxWgTnEBBBV0RYT8IMBwHBkgA)
Browserstack, iOS and Windows 10
Tags: browserstack, ios, qa
Published: 2020-06-29 12:07:17

---
title: Browserstack, iOS and Windows 10
published: true
description: How to get Browserstack to work with iOS devices
tags: Browserstack, iOS, QA
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6hmbx8xk1b2kgrgz3kqr.jpg
---
My memory's not great so these days, when I learn how to do something, I try and jot it down somewhere. And today, that somewhere is dev.to. Hello, strangers and forgetful future version of me! This is how you can check local sites using iOS through Browserstack.

Unfortunately, when you try and visit any URL starting with `localhost` in iOS under Browserstack, it replaces it with `bs-local.com` (I assume here that <q>BS</q> stands for <q>Browser stack</q>, rather than something ruder). Browserstack say this is due to <q>[restrictions](https://www.browserstack.com/question/759)</q>, and then just sort of get on with their lives. No, I'm not being quite fair there. They do have [a tiny bit of documentation](https://www.browserstack.com/question/663), but it's still pretty confusing.

Here's what you _really_ need to do.

## Setting up local connections

If you haven't already, you'll need to download an installer which, I dunno, does something.

You can find the installer in that little side bar, at the top where mine currently reads `Force local: ON`

![The toolbar in Browserstack](https://dev-to-uploads.s3.amazonaws.com/i/grbvuzk7s6mfym7am71v.png)

The configuration for the Browserstack local app has a bunch of proxy setting in it. Ignore them. This is a red herring.

## Finding your actual IP address

There's a couple of ways to do this.

### The h@xx0r way

* Hit the Windows key and `R`, like the Windows key is a shift (on the keyboard or in a car, dealer's choice)
* Type `CMD`
* Type `ipconfig/all`
* Nod, as if you understand what all that gibberish means (this is mostly for the benefit of any onlookers)
* Find the entry which reads `IPV4 Address`
* Take a note of that IP address, but ignore the `(Preferred)` bit
* Type that into a browser address bar, with any ports or paths you need after it
* If that URL resolves to the site you're expecting, perfect! That's the URL iOS needs within Browserstack
* If it doesn't, I'll be honest: I'm out of ideas

### The mouse-only way

* Right-click on your internet connection icon in your system tray (bottom right of the taskbar, by default)
* Select <q>Open Network & Internet settings</q>
* Find the tiny blue link for <q>View your network properties</q>
* Look for <q>IPv4 address</q>
* Your IP address is everything before the forward-slash. It'll probably start with `192.168`. I still don't know why.
* Type that into a browser address bar, with any ports or paths you need after it
* If that URL resolves to the site you're expecting, perfect! That's the URL iOS needs within Browserstack
* If it doesn't, this is where this page is useless

That's all I've got. Goodbye!
Daily Developer Jokes - Monday, Jun 29, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-29 12:00:05

---
title: "Daily Developer Jokes - Monday, Jun 29, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Jun%2029%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125925337e5.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the constant break up with the variable?

___A:___ Because they changed.
 -->
Day 2: Operators
Tags: python
Published: 2020-06-29 11:56:37

### Hello! 
It's always good to understand operators in the language you are working in, so learning them just after datatypes seems like the best time. Day 2 of the 30 days of code concentrated on this subject. Operators are symbols that work with values or variables to produce desired results:

**Arithmetic operators**
(+) Addition, (-) Subtraction, (*) Multiplication, (/) Division, (%) Modulus, (//) Integer Division

**Conditional operators**
(>) Greater than, (<) Less than, (>=) Greater than or equal to, (<=) Less than or equal to (==) Equal

**Logical operators**
(and), (or)

The challenge this week was to find a meals cost by factoring in the price of the meal plus tax and tip. Here’s my solution:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d2t5xxv87lbqvg1s9edx.png)
How to design a trello board: Boilerplate
Tags: management
Published: 2020-06-29 11:52:32

👋 Hi there,
For developers, Trello is a very useful tool. There are many different ways to use Trello depending on the project's need. I have a general template that I use almost in all of my projects. I would be more than happy, if that helps one from the community.

![Trello Board](https://dev-to-uploads.s3.amazonaws.com/i/2o6thl0vxd84qy0qtly5.png)

Here are the main components;

**📜 Product Backlogs:** Product backlogs contains all the features that have to be implemented. You can use different tags to identify things like which team would be responsible, priority and so on.

**📃 Current Sprint:** In this section, you can place all the features that you will implement in this sprint.

**🟠 In Progress:** On going tasks go here.

**🏁 Done:** Completed tasks go here.

**⚠️ Bugs / Improvements:** Bug / Improvement records go here.

**💬 Discussion Topics:** For the following team meeting, discussion topics could be listed here. You can tick out as you finish discussing. Also you can take notes under comment section for future reference.

**📝 Research Topics:** Often time, we need to do some research for the project. We can save those information for future reference. 

[Here is the link to the public board](https://trello.com/b/RlUC3FyF/example-project "Example Project"), if that would help anyone.

You can also have a look at the post: [Planning for a Project: Boilerplate](https://dev.to/despider/project-planning-boilerplate-26pj "Planning for a Project: Boilerplate"), which might help you to plan for a project.

Thank you for reading. I hope you liked it. Feel free to share your view. Have a great day 👋
What wireframing tools do you use?
Tags: webdev, discuss, productivity
Published: 2020-06-29 11:39:32

---
title: What wireframing tools do you use?
published: true
description: 
tags: webdev, discuss, productivity
//cover_image: https://direct_url_to_image.jpg
---
Wireframing is schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. It's an essential step after the initial planning of the idea, data and users.

Recently I discovered [draw.io](https://drawio-app.com/), which has been awesome for this purpose.

What wireframing tools do you use?
Post Makers - Week 15
Published: 2020-06-29 11:02:12

15 weeks have now come and gone since graduating from the Makers Academy. Whilst the sign of covid seem to be optimistic from the UK (with the opening of pubs happening next week), I cant seem to help think that we are still in this for the long run... The so called second waves happening around Europe, America, and as of this morning China may be a picture of what is to come. 

This had me thinking, what have I achieved in 15 weeks since graduating, and more importantly, am I a better developer today than I was way back when?

The answer is yes. 

The time is takes to solve almost any problem is less, not necessarily because I know more, but because I am becoming more and more used to struggling. This may sound strange but struggling is part of the game, knowing how to cope, think positively and be intuitive are all skills I have since acquired more of. 

The ability to understand new concepts is also drastically less. I can almost place a new syntax, principal or component in the "same same but different" zone when comparing it to other tech, and it seems to me now that most tech I have started to use more and more (most recently the Jest and Enzyme testing suites) are the same as the Jasmine library for example. And they are used in similar ways to the Capybara test suite of my old haunt Ruby.... This linkage has become a powerful tool for me to power though, understand and use technology more efficiently. 

This enthusiasm has allowed me to put the proverbial cherry on top of several projects I had finished, but not quite finished, this week I managed to style the Recipe Book app i created using Ruby/Sinatra, create a saved state update via an AJAX request for my Thermostat application, feature test me twitter clone using the PERN stack, and unit test the RESTful API backend. 

I will carry this momentum into next week where i will attempt to discover extensions to React, mainly Redux and styled components.

As always, stay safe!

David
Kradnoel Flutter Mobile Series : Chapter 01 - Project Structure
Tags: flutter, tutorial
Published: 2020-06-29 11:28:04

##Intro

Hello there, if you're in this page that mean that you decided to give this serie a try - Yay. So I hope you enjoy it.

##Project Structure

Having a good project structure is good practise on software development. If you go to google and search for "Flutter project structure" you will find a lot of articles talking about it. The project structure that I use here may not be ideal for you (as assume that you'll use bloc for state managment) but will give you a hint on the best way to structure you code.

After you create a flutter project it appear as show below: 

![Alt Project-Structure](https://dev-to-uploads.s3.amazonaws.com/i/6puvb7j847cztqw252vs.png)

The project structure will start on the lib folder in the flutter project:

![Alt Project-Structure](https://dev-to-uploads.s3.amazonaws.com/i/eqc6qkdibugp5nxez3eo.png)

From the lib directory, the project is divided in "core" directory, "ui" directory and main.dart

├─ core : The directory where has all the 
  logic from the project.

├─ ui : The directory where has all the views
 (pages) from the project.

├─ main.dart : the main dart file which initialize our project calling the "ui/app.dart" that we will talk later.

From the core directory, the project is divided in "bloc" directory, "data" directory, "shared" directory, and routes.dart & system.dart

├─ bloc : The directory where we put all the bloc files, with the logic of our application.

├─ data : The directory where we put all the models, services that can be used on bloc.

├─ shared: The directory where we put files that configure our fonts (app_fonts.dart), colors app_colors.dart, icons app_icons.dart, global variables (app_global.dart) and more.

├─ routes.dart : File where you configure your routes. [Optional - I use to configure Fluro routes]

├─ system.dart: File where you configure your system behavior. [Optional - I use to configure statusBarColor and more => search on google]

From the ui directory, the project is divided in app.dart and more

├─ app.dart : File where you configure the MaterialApp, Bloc initializaion, Route initializaion.

You can find the code in the Repo below

{% github kradnoel/chapter01_project_structure %}

What are you thoughts on the project structure showed above, let me know commenting this article
Kradnoel Flutter Mobile Serie
Tags: flutter, tutorial
Published: 2020-06-29 11:24:02

##;TLDR
Some months ago (February, 2020 to be specific) I initiated a project on flutter, a Business Card Management for Android (iOS in future) using things like state management, internationalization (i18n), local database, peer-to-peer network to send data. And the serie will show you how to implement some of the things that a learnt while working on the project.

#Introduction

I’ve been programming for more than 4 years, from web frontend to backend and mobile (Android) . And in that time I learnt a lot from the Community that I decided is time to give back (at least a little bit :] )
And the other reason to do the serie is that I want to improve my English skills as a non-native English speaker and writer.

Some moths ago (February, 2020 to be specific) I initiated a project on Flutter, a Business Card Managment for Android (iOS in future), which was in My Dev Ideas Notebook (a Real notebook made with Paper) and I decided to give a try. It's realy awesome using stuff like state managment, internacionalization (i18n), local database, peer-to-peer network to send data with help of bluetooth or wifi hotspot.

In the eventuality that the project take much time that I would like to, I decided to give to the community some part of the code that may help using some of the techniques I used in the project.

So I hope you enjoy as much I'm writing this articles.
Web3 and Business Requirements in the 21st Century
Tags: blockchain, beginners, architecture, todayilearned
Published: 2020-06-29 11:07:05

Recent global events have led to the refinement of what it means to operate a business in the 21st century. A lot of changes have taken place since the feats of ingenuity achieved by Nikola Tesla and other engineering minds. 

Digitization of organizations and their processes is a very new concept. For example, Cloud technology has not existed for a long time. It’s application in modern contexts was first observed in 2006. Only a few years after that, a new digital medium of payment, Bitcoin, would be introduced to redefine the financial industry. 

Every business needs to create new ways of surviving in these trying markets. As new distractions arise each and every day, more organizations are finding it increasingly more difficult to differentiate between good resources and cost centers, disguised as profit centers. 

Organizations need new ways of not only surviving but also shaping the future so that they may carve their objectives into reality in the new era of Web3, artificial intelligence, biotechnology, and black swans. 


<a href="https://bitcoin.ng/leading-venture-capitalist-describes-blockchain-as-the-most-important-invention/" src="https://bitcoin.ng/leading-venture-capitalist-describes-blockchain-as-the-most-important-invention/">Source: Bitcoin.Ng<a/>
Day 1 & 2: Learning about Tailwind CSS
Tags: tailwindcss, bootstrap, learning
Published: 2020-06-29 10:44:45

Ok, I was watching a video or two on Friday seeing how Tailwind CSS works as 
* Being looking for alternative to Bootstrap (I hear 5.0 is in alpha and was super excited about it… until  remember the bloat)
* Mick (my other half) suggested to look at Tailwind CSS as he’s been looking into it himself.
* Tailwind CSS is more utility-based and I like that it’s lot less div wrapping divs and more friendlier to coders (who are not designers)
* Customise - FTW
* Never used node before… so this is new for me

## Setting Up Tailwind and PostCSS (screencast)
👉 [Setting up Tailwind and PostCSS - Tailwind CSS](https://tailwindcss.com/course/setting-up-tailwind-and-postcss/)

Steps from the screencast recap:

1. `npm init -y`
2. `npm install tailwindcss postcss-cli autoprefixer`
3. `npx tailwind init`
4. `touch postcss.config.js`
5. Added code:
module.exports ={
    plugins: [
        require(‘tailwindcss’),
        require(‘autoprefixer’),
    ]
}
6. `mkdir css`
7. `touch css/tailwind.css`
Added:-
@tailwind base;
@tailwind components;
@tailwind utilities;
8. In “package.json”, modified the entry of “test” with:
“scripts”: {
    “build”: “postcss css/tailwind.css -o public/build/tailwind.css”
  },
9. `npm run build`
10. Create index.html in “public” folder - link to “tailwind.css”

The following is optional, run a small live server to view the changes
* If it’s not installed:-
`npm install -g live-server`
* `live-server public`

The screencasts from their site is quite good, I’ll probably (hopefully) write things that I found amazing, and won’t write every step I did from their screencasts. It's pretty straight forward, and loving it being utility-based. The coder in me feels much happier.

👉 [Designing with Tailwind CSS - Tailwind CSS](https://tailwindcss.com/screencasts/)

Right now, my leanings are towards using Tailwind CSS instead of upgrading one of my sites to Bootstrap5 when it comes out, and yep, it’s in Alpha right now.

👉 [Bootstrap 5 alpha! | Bootstrap Blog](https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/))

The interesting part comes when I actually start porting one of my sites to using Tailwind CSS, it badly needs a revamp:

* Django (can't even remember what version, it's that long since I looked at it) - it'll probably be a big upgrade, although it should be painless. 🤞🏼 I've done a big, big upgrade before many yonks ago, and it wasn't too bad. Instead I was fighting with so many changes Heroku brought in, that I don't use it to deploy anymore, plus it would have started to become expensive for me to use, especially for a not-for-profit site. 😅
* Bootstrap 3 (yeah, I'm still using a really old version of Bootstrap, so jelly of some of the new features in Bootstrap 4)
Redis Streams API Coming to Deno
Tags: redis, deno, typescript, data
Published: 2020-06-29 10:24:30

---
title: Redis Streams API Coming to Deno
published: true 
description: Draft nearing completion, needs review
tags: redis, deno, typescript, data
//cover_image: https://direct_url_to_image.jpg
---

🦕 💾 The Redis Streams API will land in deno-redis pretty soon. I'm nearing completion with this pull request and hope for a thorough review.

🏞 🍕 There's been a lot of activity in this repository, which is encouraging!

https://github.com/denolib/deno-redis/pull/86
Executable Specifications
Tags: tdd
Published: 2020-06-29 10:06:22

---
title: Executable Specifications
published: true
description: Comment on Damien Burke's essay "[Specifications not Tests](https://damienburke.com/specifications-not-tests)"
tags: #tdd
//cover_image: https://direct_url_to_image.jpg
---

I've been listening to Greater Than Code episode 188 "[Going Off the Rails with Damien Burke](https://www.greaterthancode.com/going-off-the-rails)". It had lots of important discussion and I recommend you to listen it.

While looking at the episode notes, I read Damien Burke's essay "[Specifications not Tests](https://damienburke.com/specifications-not-tests)". I think his text misses one point. It's called "Test Driven Development" because those specifications are written as tests. They are not only testable, but also executable.
Refactoring absolute paths to relative ones
Tags: vscode, refactoring, javascript
Published: 2020-06-29 10:03:36

---
title: Refactoring absolute paths to relative ones
published: true
description: how to refactor easily hundreds of broken "magic paths"
tags: vscode,refactoring,javascript 
//cover_image: https://direct_url_to_image.jpg
---

This is hardly a post, more like simple advice to anyone willing to move his/her codebase to relative paths.

I came to despise magic paths as I believe they solve no problem and usually introduce several non-trivial compilation bugs as soon as you move things around a little.

I did this kind of refactoring several times in the past and noticed that often people just go brute force at the problem, rewriting all the absolute paths one by one and wasting hours of their time.

A simple way to critically reduce the time spent on the task is to use VSCode regexp pattern matching to only target files located at a specific depth level. Assuming you have a magic path pointing to your `components` folder and a project structure like this:

```
...
├── package.json
└── src
    └── components
```

You can refactor it by a simple find and replace:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oakcsc2dmgwkm0ad8ak4.png)

      
And then you just go recursively:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7vjd6l3v23fqnaapi68q.png)

Hope this will save someone some minutes :)