teleren/devto huggingface dataset:
Adding TailwindCSS to your Rails 6 Project
Tags: rails, tailwindcss
Published: 2020-09-12 11:54:41

# Tailwind + Rails 6
Steps to configure tailwindCSS in you rails 6 application

### Install Tailwind CSS
Run the following command to add tailwind to the `package.json`
```
 yarn add tailwindcss
```

### Create Tailwind Configuration 
The following command will create a `tailwind.config.js` file where you could setup the default configuration for `TailwindCSS`
```
npx tailwindcss init
```

The taildwind config file will be empty and should look like
```js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

Here is an example of my `tailwind.config.js`
```js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#fef6eb",
          200: "#f7c686",
          300: "#f4b35d",
          400: "#f2aa49",
          500: "#f1a035",
          600: "#d99030",
          700: "#c1802a",
          800: "#a97025",
          900: "#916020",
        },
      },
    },
  },
  purge: {
    content: ["./app/**/*.html.erb"],
  }
};
```
### Adding tailwind to PostCSS config
You will need to add the following line to the `postcss.config.js` file. 
```
require("tailwindcss"),
```
here is an example of my `postcss.config.js` file

```js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require("tailwindcss"),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}
```

### Import tailwind to your Javascript Pack 
You will need to import tailwind via javascript. 

create an `application.css` file in `app/javascript/layouts/` 

> I usually keep this in a folder called `layouts`, you could choose any other folder that's convenient for you inside the `app/javascript` directory

add the following to your `application.css` file that you have created now

```
/* tailwind */
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
```

Import `application.css` in your `app/javascript/packs/application.js` file. 
(add the following line)
```
import  "../layouts/application.css";
```
### Import Tailwind to your layout
Now that you have added `TailwindCSS` to your application pack, you will have to import it in `application.html.erb` to use tailwind globally in your application. 

Add the following line to `app/views/layouts/application.html.erb` in `<head>`
```ruby
<%=  stylesheet_pack_tag  'application',  media: 'all',  'data-turbolinks-track': 'reload'  %>
```
CSS Perspective WHW(What? How? When?)
Tags: css, webdev, html, 3danimation
Published: 2020-09-12 10:47:14

**Hey Folks!** join me to discuss *WHW(what? how? when?) about CSS Perspective* along with creative examples and some hidden secrets.

https://medium.com/@neeldedhia/css-perspective-whw-286262a505d8

Click the claps if you like it and let me know your thoughts in the comments section.
Difference between function and method keywords
Published: 2020-09-12 10:39:53


A method is a function that belongs to the object. Methods have a "receiver" while functions do not.

```js
const someObject = {
  someMethod: function () {
    console.log('Hello, World!');
  },
};

// method call
someObject.someMethod(); // `someObject` is a receiver, `someMethod` is a method

const someFunction = someObject.someMethod;

// function invocation
someFunction(); // JavaScript functions are invoked without a receiver, using parenthesis syntax

function helloWorld() {
  console.log('Hello, World!');
}

helloWorld(); // logs "Hello, World!"

// When a function is declared on the global scope, it becomes a property of a global object
// The `window` is the receiver of `helloWorld,` which would make `helloWorld` a method and not a function. However, in JavaScript, it is still considered a function.
window.helloWorld(); // logs "Hello, World!"
```
New to web development, which tech should I learn?
Tags: angular, react
Published: 2020-09-12 10:20:44

Hi,

This is my first post on this community, until now I was crawling this site and I would like to thank all of you since I am saw lots of inspiring stories.

I've decided to learn web development, personally I am coming with .Net experience (MVC, Blazor, Wpf), I know Javascript, HTML and CSS basics but I still cannot decide if I should go for React or Angular.

I am planning to use one of them in combination with TypeScript, since it almost seems like C#. Should I fist learn more about TypeScript or this can be learned along the way?

Which one would you recommend, React or Angular?
Aggressive refactoring
Tags: haskell, testing
Published: 2020-09-12 10:19:29

Here is a small example of aggressive refactoring in Haskell. I am in the codebase of a compiler for a small smart contract language, and I'm replacing occurrences of `Integer` with occurrences of `Word256`, since the code generator in question targets Ethereum which has 256-bit word sizes.

The compiler was originally made with `Integer`, and in some cases its very own `Word256` which was made in a crude way. `Integer` because this is a very convenient data type in Haskell, even though arbitrary precision in this case is actually wrong, and the crude `Word256` because it seemed simpler to make this type rather than import a library.

But now this is no longer convenient, so I've decided to use `Word256` of the `data-dword` library since that's what [Hevm](http://hackage.haskell.org/package/hevm) uses. There are alternatives: `largeword` and `wide-word`, but the important part for now is interoperability.

And here is the type error I'd like to show:

```
src/Lira/Backends/Evm/EvmCompiler.hs:695:22: error:
    • Couldn't match expected type ‘Integer’
                  with actual type ‘Data.DoubleWord.Word256’
    • In the first argument of ‘push’, namely ‘i’
      In the expression: push i
      In the expression: [push i]
    |
695 |   IntVal  i -> [push i]
    |                      ^
```

Because `IntVal i` now contains a `Word256` and `push` was designed for `Integer`, the types no longer align. Looking at `push`:

```haskell
push :: Integer -> EvmOpcode
push = PUSHN . words'
  where
    words' :: Integer -> [Word8]
    words' i | i < 256 = [fromIntegral i]
    words' i           = words' (i `div` 256) ++ [fromIntegral $ i `mod` 256]
```

There is no logic in this function that prevents it from operating on `Word256` rather than `Integer`. In fact, rather than change the function, just loosen the type signature:

```diff
-push :: Integer -> EvmOpcode
+push :: Integral i => i -> EvmOpcode
 push = PUSHN . words'
   where
-    words' :: Integer -> [Word8]
+    words' :: Integral i => i -> [Word8]
     words' i | i < 256 = [fromIntegral i]
     words' i           = words' (i `div` 256) ++ [fromIntegral $ i `mod` 256]
```

Doing an aggressive refactor like changing a base type in the codebase requires hundreds of changes. But when their nature is like this, I can safely leave this change be and proceed to the next type error.
First-class object, first-class function, higher-order function, first-order function, second-order function
Published: 2020-09-12 09:48:08


**The first-class object**, sometimes referred to as a **first-class citizen**, is an object that supports every operation allowed on other objects. First-class objects can be stored in a variable, can be passed as an argument to the functions, can be returned by the function, can be stored in a data structure, can hold own properties and methods.

**The first-class function** is treated as an object, so it has state and behavior, and it can be passed as an argument to the function and returned from the function. In JavaScript, functions are objects, so this is the reason why the first-class function supports the same operations as objects.

```js
// function definition
function logName(name) {
  console.log(name);
}

// function invocation
logName('Lukas'); // logs 'Lukas'

// stored as variable
const logNameAlt = logName;
logNameAlt('Lukas'); // logs 'Lukas'

// first-order function (`callback`) being passed in as argument
function higherOrderFunction(callback) {
  return callback; // first-order function being returned
}

const logNameHigher = higherOrderFunction(logName);
logNameHigher('Lukas'); // logs 'Lukas'

// stored in a data structure
const helpersArr = [logName];
const helpersObj = { logName };
helpersArr[0]('Lukas'); // logs 'Lukas'
helpersObj.logName('Lukas'); // logs 'Lukas'

// hold own property
logName.customProperty = 'Polak';
console.log(logName.customProperty); // logs 'Polak'
```

**The higher-order function** accepts a function as an argument, returns a function, or both. The higher-order function uses first-order functions, and the higher-order function is a first-order function themself.

**The first-order function** accepts a function as an argument.

**The second-order function** accepts a function that accepts a function.
Typescript for beginners: string
Tags: typescript
Published: 2020-09-12 09:37:43

---
title: Typescript for beginners: string
published: true
description: 
tags: typescript
//cover_image: https://direct_url_to_image.jpg
---

As programmers we are using strings to work with textual data all the time.

In typescript we have a word `string` to check if the type is string.

In the function below we are checking whether the argument supplied is a string and we are making sure that we return a string.
```
function getName(name: string) : string { 
return `Hi, my name is ${name}` 
} 

getName("Paul") // Hi, my name is Paul
getName() // error "Expected 1 arguments, but got 0."
getName(true) // error "Argument of type 'boolean' is not assignable to parameter of type string"
```

To break it down into smaller bits, this functions reads as follows:
`function getName(argument : type to check) : type we want to return {.....}`

We can also type check variables:
```
let postCode : string = "LT-3422"; 
postCode = 4232// error "Type 'number' is not assignable to type 'string'".
```
A hilarious browser game
Tags: react, webdev, showdev, node
Published: 2020-09-12 08:00:43

Hi all!
I’m here today to show you a platform developed by me during the *quarantine* 😷 in Italy and launched yesterday on **[Product Hunt](https://www.producthunt.com/posts/bad-cards)** (*Leave some upvotes* 🔥).

It’s an open-source project, an online implementation of **Cards Against Humanity**, here the [GitHub repo](https://github.com/epavanello/bad-cards-game) for some stars 😜

Let’s talk about technologies, this is a web application based on a lot of new technologies and hosted on Netlify for the frontend and on Heroku for the backend.
All are under CI/CD with GitHub actions for the deploy.

### Frontend side
* 🎣 **React** with hooks
* ⚙️ **Typescript**
* 💅🏻 **Tailwindcss**

### Backend side
* 🐧 **NestJS**

### Shared 
* 🔥 **Firebase** for real-time DB and authentication

## Roadmap
On the next step, there is the porting of the game as a native mobile game. (*What's better? React Native or Flutter?* **Anyone wants to collaborate?** 💔 )
Of course, contributions, stars, upvotes and sharing are welcome ♥️ 

## Some fun

Here [the GAME](https://bad-cards.netlify.app/) 🚀

Here [the Discord Server](https://discord.gg/HF7QSCW) 💻

Play online with your friends!

Let me know what you think in the comments below 💬
Leetcode #1 First Unique Character in a String (#387) with Ruby and Hash
Tags: ruby, rails, 100daysofcode, leetcode
Published: 2020-09-12 08:55:14

{% youtube cqHCzmSmHCg %}

Enjoy the video 😀🙏

Also written version https://losseff.xyz/leetcode/001-first-unique-character-in-a-string/ruby/
JavaScript Currying 4 - Trace
Published: 2020-09-12 08:34:51


Function composition using point-free style creates a very concise and readable code:

```js
const trace = (label) => (value) => {
  console.log(`${label}: ${value}`);
  return value;
};

const compose = (...functions) => (x) =>
  functions.reduceRight((y, f) => f(y), x);

const g = (n) => n + 1;
const f = (n) => n * 2;

const h = compose(
  trace('after f'), // 'after f: 42'
  f,
  trace('after g'), // 'after g: 21'
  g
); // function application order is from bottom to top

h(20); // => 42
```

Compose can be a fantastic, utility, but a more convenient way of reading code is top-to-bottom:

```js
const trace = (label) => (value) => {
  console.log(`${label}: ${value}`);
  return value;
};

const g = (n) => n + 1;
const f = (n) => n * 2;

const pipe = (...functions) => (x) => functions.reduce((y, f) => f(y), x);

// updated usage
const h = pipe(
  g,
  trace('after g'), // 'after g: 21'
  f,
  trace('after f') // 'after f: 42'
); // function application order is from top to bottom

h(20); // => 42
```

Currying can be a useful abstraction to specialized functions:

```js
const map = (fn) => (mappable) => mappable.map(fn);
const double = (n) => n * 2;
const doubleAll = map(double);
doubleAll([1, 2, 3]); // => [2, 4, 6]
```

If the `trace` function were not curried, it would look like this:

```js
const g = (n) => n + 1;
const f = (n) => n * 2;

const pipe = (...functions) => (x) => functions.reduce((y, f) => f(y), x);

const trace = (label, value) => {
  console.log(`${label}: ${value}`);
  return value;
};

const h = pipe(
  g,
  (x) => trace('after g', x), // 'after g: 21'
  f,
  (x) => trace('after f', x) // 'after f: 42'
);

h(20); // => 42
```

**Data the last style** means that function should take the specializing parameters first and take the data later.

The arguments which have been applied to partially applied function are called **fixed parameters**.

**Point-free style** is a way of defining function without reference to its arguments. Point free function is created by calling a function that returns a function such as a curried function.
Emotion controls for the web
Tags: javascript, ia, ux, internet
Published: 2020-09-12 08:22:04

---
title: Emotion controls for the web
published: true
description: Imagine interacting on the web through emotions with your face
tags: javascript, ia, ux, internet
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/p52wn465bk4cezwawszo.png
---

## Information

Imagine interacting on the web through emotions with your face.

This is a browser extension for chrome and firefox that allows you to interact with some websites.

## Video

{% youtube WEkJyCzLQ1M %}

## Demo

{% youtube DwaiqSzMq2g %}

## Controls

The controls are pretty simple you just need your face:

![Controls](https://dev-to-uploads.s3.amazonaws.com/i/tx1lq2moyptr4auoeume.png)

## Install the extension

- [Chrome](https://chrome.google.com/webstore/detail/emotion-controls-for-the/fgdmgldimccokmjlchgbocdhpddjpnal)

- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/emotion-controls-for-the-web/?src=search)

- You have to allow access to the webcam on the websites that I mentioned above.

## Notes

- I recommend to disable the extension or closing the website if you are not using it, because it works even if the tab is not active or you open a new tab in the browser.

- To interact on facebook twitter and instagram, you have to open the publication, it doesn't work in the timeline.

- If you are wearing glasses, it may be difficult for the recognition system to detect a happy or angry face.

## Technologies

- Javascript
- [face-api.js by Vincent Mühler](https://github.com/justadudewhohacks/face-api.js/)

## Source code

- the extension is opensource and you can see that no information is stored on any server.

- You can disable or remove the extension in any time.

[Source code on Github](https://github.com/vivirenremoto/emotion_controls)

## Copyright

Due copyright thing I had to use this song

["It's My Life" Cover - BON JOVI by Dan Vasc](https://www.youtube.com/watch?v=J00uLwMRmBQ)
Gatsby + Figma + Netlify = Free Landing Page
Tags: gatsby, design, opensource
Published: 2020-09-12 07:48:38

So i've been using figma.com for 2 years and i enjoy designing it. I learn how to make a simple landing page design. One of my maker friend @mddanishyusuf (founder of nocodeapi.com) help me out in the coding for gatsbyjs.com and open source the code. 

A year ago i made a no-code game called "supermakers" and got #4 product of the day on producthunt.com I enjoy making the no-code game and share it with the community. I use withkoji.com to make the game. Bought a domain on namecheap.com and also deploy the website on netlify.com and upload my repo on github.com


You can download this landing page template for free.
What's included? - Gatsby Source code & Figma Design File

✅ Official Website: www.supermakers.xyz

🎮 Source Code: https://www.buymeacoffee.com/fajarsiddiq/e/51330

🏝️ Figma File Design: https://www.figma.com/community/file/796832352118720161/Supermakers-2.0-Gatsby-Landing-Page

💯 Fajar Siddiq Community: https://fajarsiddiq.substack.com/p/gatsby-figma-netlify-free-landing
LeetCode September Day 12
Tags: python, computerscience
Published: 2020-09-12 07:28:58

Question - 

Find all possible combinations of k numbers that add up to a number n, given that only numbers from 1 to 9 can be used and each combination should be a unique set of numbers.

Note:

All numbers will be positive integers.
The solution set must not contain duplicate combinations

*
Input: k = 3, n = 7
Output: [[1,2,4]]
*
Solution - 

```
from itertools import combinations
class Solution:
    def combinationSum3(self, k: int, n: int) -> List[List[int]]:
        return filter(lambda x: sum(x) == n, combinations(range(1, 10), r=k))
```

So, here I used python's library function combinations.
Combinations takes an iterable and other argument r denoting number of elements present in each combination, and returns all possible combinations.
For example `combinations([1,2,3], r=2)` will give `[(1,2), (2,3), (1,3)]`.
Happy coding :) !
DigitalOcean - Wordpress PHP Update Required 
Tags: digitalocean
Published: 2020-09-12 07:20:45

#### 1. Take a backup snapshot on your digitalocean server.

#### 2. Back up your Websites: 
Make a backup of your wordpress websites before updating PHP version. Take note that is little risk during the process, making a backup is still recommended.

#### 3. Sign-in to your Ubuntu server using SSH

#### 4. Check your current PHP version
```
php -v
```

#### 5. Add a PPA for PHP 7.3 Packages
_Add the ondrej/php which has PHP 7.3 package and other required PHP extensions._
```
sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
```

_You can check your PHP version again to make sure the PHP has been updated on your server. `php -v` Then, proceed to install related modules._

```
sudo apt install php7.3-fpm php7.3-common php7.3-mbstring php7.3-xmlrpc php7.3-gd php7.3-xml php7.3-mysql php7.3-cli php7.3-zip php7.3-curl
```

#### 6. Disable PHP5 and enable PHP7
```
sudo a2dismod php5
sudo a2enmod php7.3
sudo service apache2 restart
```

Congratulations! Your WordPress websites should be running on the newest PHP version now and you won’t see the warning again in the Dashboard. The PHP update is really important and I highly recommend you to do it immediately if you haven’t done so. It does not only make your site faster for search engines and for your visitors, but also make your website better protected against hackers.
Check out my new project!
Tags: beginners, tutorial, python, security
Published: 2020-09-12 07:18:09

Hey fam!
Today I'm going to share a project that I made. 
It's a Network scanner that scans your wifi (or any other)network and gives you the details of all devices connected to it. This will help you monitor your network for unknown devices. It will also send you the output on Telegram via IoT.

https://www.hackster.io/yadu10a2000/network-wifi-scanner-using-bolt-iot-42e9ef

Do let me know what you think of it in the comments.

Thank you, have a great weekend!
Scholaron.com
Published: 2020-09-12 07:02:29

Textbook guides are essential aids for any college course or discipline. All manners of learning from exam preparation or projects and assignments to self-study becomes easier with a collection of well-prepared textbook solutions. ScholarOn offers the best <a href="https://scholaron.com/textbook-solutions/art-and-architechture-manuals"> accounting textbook solution guides online </a> like <a href="https://scholaron.com/textbook-solutions/solutions-for-advertising-and-integrated-brand-promotion-7th-edition-9781285187815"> Solutions For Advertising And Integrated Brand Promotion 7th Edition </a>.
Execute promises in sequence
Tags: javascript, promises, interview, node
Published: 2020-09-12 06:55:02

The **promise** feature in Javascript is a crucial part when developing applications of any size. Even the smallest of the project like a TODO application requires the use of promises (Of course there are other ways of doing things which promises can do). This makes Promises one of the favorite topics during interviews. Now we all know how to use it for different things. So to test the in-depth knowledge of Promises, interviewers go for questions that require us to know the working of a promise. In a recent interview, I was asked to execute Promises in sequence and give the result of all promises in an array. So in this post, we are going to solve this problem.

##The Problem
Execute multiple promises in sequence and give the result of all promises in an array.

##Explanation
The basic problem explanation here is that we do not want to execute the next Promise before the previous promise is resolved. The first thing that comes to our mind when we hear this is we can create a promise chain, and that will solve the problem. But,

**What if the number of promises is variable?**

Let us establish that for a variable number of promises, we will require an array. Now for this array, how we can ensure that we do not process the next element until the previous element is processed? And how can we gather the result of previous elements, when processing the next element?

Now just read the last questions carefully and observe what array method comes to your mind. Yes, our very own **Array.reduce()**. If Array.reduce() is new to you, you can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). Now the basic idea for our solution is that we will generate the results in the accumulator and process all array elements one by one. 

To simplify, we will perform the following steps:
1. Start with an empty array Promise as an accumulator.
2. When the previous accumulator is resolved, we will make a request to the next Promise.
3. Gather the response of the current promise and return it combined with the accumulator response. 
4. Repeat 2 and 3 for all the elements in the array.

##Code
```javascript
function fakeAPI(str) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {resolve(str + ' resolved.')}, 1000);
  });
}

var arr = ['p1', 'p2', 'p3', 'p4'];
arr.reduce((acc, curr) => {
  return acc.then(res => {
    return fakeAPI(curr).then(resp => {
      return [...res, resp];
    });
  });
}, Promise.resolve([])).then(res => {
  console.log(res);
});
```

##Thoughts
So this was all to execute promises in sequence. So the process to answer these tricky questions is to bring them down to smaller problems and then solve one by one. To be honest, the interviewer is actually looking at your ability to break the problem into smaller problems. 

If you guys have any suggestions on how this can be done better, please comment below. Happy Coding!!