teleren/devto huggingface dataset:
Using Tailwind CSS v3 with Ember JS
Tags: javascript, ember, tailwindcss
Published: 2022-01-11 15:36:17

---
title: Using Tailwind CSS v3 with Ember JS
published: true
description: Using Tailwind CSS v3 with Ember JS
tags: javascript, emberjs, tailwindcss
canonical_url: https://asasmith.com/tailwindcss-v3-emberjs-setup
---

Tailwind CSS v3 has been released and there is a bunch of cool new features available (I'm mostly interested in the "just in time" engine being standard now). The standard setup for an ember project has changed a little and there doesn't seem to be a lot of good resources available for this setup.

Create a new ember project.

```zsh
npx ember-cli new tailwindcss-demo --no-welcome
cd tailwindcss-demo
```

Install tailwind and related packages.

```zsh
npm install tailwindcss autoprefixer --save-dev
# no need for purgecss anymore
```

Install postcss add on.

```zsh
ember install ember-cli-postcss
```

Create tailwind config.

```zsh
# I create a tailwind dir in styles and add the config file there
# this is a personal organizational choice, the config file could live anywhere
mkdir app/styles/tailwind

# create tailwind config file
# last arg is path to config file
# if no arg is provided it will be created at the root of your project
# this path will be needed when updating ember-cli-build.js
npx tailwind init app/styles/tailwind/config.js
```

There isn't a `purge` key in the config file anymore. Update the `content` key with paths to all template files. The config docs are [here](https://tailwindcss.com/docs/content-configuration)

```javascript
// app/styles/tailwind/config.js

module.exports = {
  content: ['./app/**/*.hbs'],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Update `app/styles/app.css`

```css
/* app/styles/app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
```

Update `ember-build-cli.js`

```javascript
// ember-build-cli.js

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const autoprefixer = require('autoprefixer');
const tailwind = require('tailwindcss');

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        // track changes in template, css, scss, and tailwind config files
        cacheInclude: [/.*\.(css|scss|hbs)$/, /.tailwind\/config\.js$/],
        plugins: [
          {
            module: autoprefixer,
            options: {},
          },
          {
            module: tailwind,
            options: {
              config: './app/styles/tailwind/config.js',
            },
          },
        ],
      },
    },
  });

  return app.toTree();
};
```
That's it. You should be up and running with Ember and Tailwind now!

[Repo](https://github.com/asasmith/tailwindcss-v3-ember) for this demo.
How to Switch One PHP Version to Another in Linux
Tags: linux
Published: 2022-01-11 16:34:26

Sometimes we need to change the PHP version in our Linux machine. In this tutorial, we will see that how to switch PHP versions in Ubuntu, Debian, red hut, or any Linux-based distros. Let assume we have installed PHP 7.3, PHP 7.4 and PHP 8  version in our Linux server. Now we need to switch the PHP version from PHP 8 to PHP 7.4 let assume.

So what do we have to do to change the PHP version in Linux? Just follow this below command one after another

[How to Switch One PHP Version to Another in Linux
](https://www.codecheef.org/article/how-to-switch-one-php-version-to-another-in-linux)
Matploitlib - Python's Library
Tags: python, datascience, programming, devops
Published: 2022-01-11 16:25:46

The most popular Python Plotting Library is Matploitlib. It is very useful for those working in Numpy and Python. It’s interface looks like Matlab, just that you have to write more codes but it comes with lots of freedom.

## What is Matploitlib?
It is a comprehensive library used for creating animated and interactive visualizations in Python.

## Advantages of Matploitlib
Matploitlib is not only powerful, it is efficient, fast and open-source. Also, it has:

- High-quality graphics

- Large community support

- Cross-platform

give full control over plot styles

In Yorùbá you can say:

> Ògòngò lọba ẹyẹ, kìnìún lọba ẹranko - so therefore, Python Matploitlib lagbade fun.

![python-matploitlib-rollademy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xme34ei2x52pzjyxk1h2.jpeg)

Matploitlib can therefore be regarded as king of data visualization.

Written by [Rasheedah](https://twitter.com/STEMInstructor_)

If you like this article please like and share. Follow us on [Twitter](https://twitter.com/rollademy). Visit [Rollademy](http://rollademy.one) to learn more about Data Science free of charge.
Integrate-first approach
Tags: architecture, programming
Published: 2022-01-11 16:13:30

Take it from a developer with 13+ years of experience.

One of the most common issues I keep seeing, especially when it comes to building more complex systems, is a tendency to delay the integration and focus on work in isolation.

Be it a frontend and backend integration, a microservice integration, or module-to-module communication, we always tend to avoid the pain of integrating by postponing it for our future selfes.

Let me tell you - **THIS. IS. WRONG.**

Not only is it wrong, but I've seen so many projects struggle (and occasionally) fail due to this. It's like everything goes perfect, sprint after sprint, but once we come to the "we have to integrate now", everything goes to hell.

It's literally the same as eating a cake now and hoping to go for a run later on! It's stupid!

So, take it from an ol' fella - always, and I mean ALWAYS focus on "integrate-first". Always focus on integration immediately, no matter how painful it is.

Chances are, 9 out of 10 times, you'll discover issues early on and minimize the pain to your future self!
I made a short game using Microsoft MakeCode Arcade
Tags: beginners, html, css, javascript
Published: 2022-01-11 16:10:16

I made a game using Microsoft MakeCode Arcade. Here you can access it. 

[Swordo Game](https://makecode.com/_A7E2jLe2p19E)

My Website [Inform Our World](https://inform-our-world.github.io/)

[Previous Chapter](https://inform-our-world.github.io/Saqha/CH 2.5)
How to enable user to upload profile photo in Laravel 8
Tags: laravel, livewire
Published: 2022-01-11 16:01:55

Today I was assigned to develop a user profile function in our client web apps.


Ok, easy enough. I just need a form that has enctype and file upload.


So I thought it only needs to upload the image, then store it in DB and then show it to the front-end.


However, the flow that I thought is wrong. The flow should be very seamless. Which is when the user success registers, they can see the default profile image (set by the system, like example image). Then when users click on the image, their windows appear, choose the image and then save.


![UIX-User-Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63thmuk5pbnle1rsvrf9.png)


The save button should not like the default file upload (refer to Bootstrap File Input).


Also, after the user click Save Photo, the system will behave like SPA. Without refreshing the browser.


That time I know I was in trouble. Because I don't like much play around with JavaScript. I know I can achieve that using vanilla or JS Framework such as Inertia or Vue. I'm using Laravel by the way.


So after searching, I decide to use Laravel Livewire. Why?


This is mainly because I think I can make it using Livewire and not others.  And the best part of Livewire is that even though I code dynamic function for Front-end, but I'm coding it using PHP Laravel. I don't know if this makes any sense to you.


So how do I develop it using Livewire?


First, after I create the component, I create a method named avatar() on User Class.


![Avatar-method-syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gqzqyzzy9x513ipvh8e.png)


Second, in the livewire component, I use the file upload trait (because Livewire does not support file upload by default).


![livewire-trait-syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8naq9up5g86f3i8ciey2.png)


Then I create a method to save the avatar when the user uploaded it. Don't forget to set the avatar null to remove the button right after user successfully upload the image.


![Save-method-syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddlo7pvutae41qvvavpp.png)


Third, in my rendering component file, I show the default image first. Then after the user saves, the image will change into a new image.


![Livewire-rendering-component-syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdqzcl65x4xh9w0ple3n.png)


That's it. With all of these steps, you now will have a User profile functionality.

I've complete the task. Now your turn to do it better than me. Share your experience in the comment section ;)
Component System with Material UI: Typography
Tags: react, mui, system, tutorial
Published: 2022-01-11 16:01:48

This is the second post from a series which will attempt to create a Component System that maps an already created Design System: [VTEX Design Sistem](https://www.figma.com/file/a94lX91ZmYGIDBxvb8shwLn8/00.-Styleguide---Library?node-id=3390%3A38)

In this post I'll be creating the code needed to map the Typography style from the design system into the project. For that I'll be overriding the defaults style values and also creating new variants.

You can check the Typography configuration within Figma [here](https://www.figma.com/file/a94lX91ZmYGIDBxvb8shwLn8/00.-Styleguide---Library?node-id=3390%3A38)

![Typography Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3t96yoozy9nv7dkmxwz.png)
 

---

A Typography is a component to render text into a React App, Mui has an already pre-defined set of variant values for this component, [here is the documentation for it](https://mui.com/api/typography/#props).

## Setting variants styles

{% gist https://gist.github.com/GonzAVic/ffbb4b1e09eda1e574bb9468b73d0b89 %}

In the code example above I'm using the `typography: {...}` property to set the correct styling for the already pre-defined typography variants, and also create new ones, like: bodyBold, small, smallBold.

Also, at the same level than `typography:{...}` there is another property called `components:{...}`, in here I'm using `MuiTypography` to specify which html node should be rendered when any of the new variants are being called (variantMapping).

If I don't set this `variantMapping`, when I use a Typography with variant "small", for example, a `span` will be rendered.


Here is how the code above looks on a React application:

{% codesandbox 9eim9 initialpath=/typographies module=/src/Typographies.js %}

## Customizing Typographies on the flight

The idea of creating and setting variants on Mui is to write more maintainable and clean code, most of the time you only need the default version of Typography but when you need specific changes like the color of the text, you can pass it as a property.

For that you can pass a `color` prop to a Typography component to use any defined color on the theme.

{% gist https://gist.github.com/GonzAVic/af803a87ba5f62e498afcb300f60b48a %}

You can see more examples of this on the codesandbox above.

## Conclusion
Set all your typographies styles needed on your application, create some custom variants if need it and use the `Typography` component so you don't need to set the correct styles on each text you need to display.

Also take advantage of the `color` prop to customize the color in case you need it.
Python Enum
Tags: python
Published: 2022-01-11 16:00:01

---
canonical_url: https://waylonwalker.com/til/python-enum/
cover_image: https://images.waylonwalker.com/using-lifecycle-enum.png
published: true
tags:
- python
- python
- python
title: Python Enum
---

Python comes with an enum module for creating enums.  You can make your own enum by inheriting importing and inheriting from Enum.

``` python
from enum import Enum


class LifeCycle(Enum):
    configure = 1
    glob = 2
    pre_render = 3
    render = 4
    post_render = 5
    save = 6
```

## auto incrementing

Enum values can be auto incremented by importing auto, and calling `auto()` as their value.

``` python
from enum import Enum, auto


class LifeCycle(Enum):
    configure = auto()
    glob = auto()
    pre_render = auto()
    render = auto()
    post_render = auto()
    save = auto()
```

## using the enum

Enum's are accessed directy under the class itself, and have primarily two methods underneath each thing you make, `.name` and `.value`.

``` python
Lifecycle.glob
Lifecycle.glob.value
Lifecycle.glob.name
```

![using the Lifecycle Enum](https://images.waylonwalker.com/using-lifecycle-enum.png)
5 Web Recomended Untuk Freelancer
Tags: freelance, freelancer
Published: 2022-01-11 15:58:20


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64qd22ezo4n2a2wd5is2.jpeg)

5 #Web Recomended Untuk Para Freelancer, apakah kamu mengetahuinya? Yuk belajar bareng serta diskusi dikolom komentar 💬😝

*Stay Young, Be Innovative and Keep Learning
#Fiverr #Freelance #Upwork #Projects #Sribulancer #AditriaPardana
5 Tips Mudah Belajar Coding
Tags: coding, code, it, technology
Published: 2022-01-11 15:56:21

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xat3s10yejac9vdxokc1.jpeg)

5 Tips cara mudah belajar coding, bagaimana dgn metode belajar kamu? Yuk diskusi dikolom komentar 💬😝

*Stay Young, Be Innovative and Keep Learning
#Tips #Coding #AditriaPardana
New in Excel Add-ins 2.6: Support of Excel 2021 and More Updates
Tags: exceladdins
Published: 2022-01-11 15:56:16

---
title: New in Excel Add-ins 2.6: Support of Excel 2021 and More Updates
published: true
description: Devart announced a new release of Excel Add-ins 2.6 with Excel 2021 support and other important updates.
tags: exceladdins
//cover_image: https://direct_url_to_image.jpg
---
Devart, a recognized vendor of world-class data connectivity solutions for various data connection technologies and frameworks, provided the new version of [Excel Add-ins 2.6](https://www.devart.com/excel-addins/?utm_source=devto &utm_medium=referral&utm_campaign=pr_addins_11.01.2022). The main feature is support for the newest Microsoft Excel version – **Excel 2021**.
Now, the users have a more convenient way to share the reports from cloud and database data, created with Excel Add-ins with better Microsoft Excel 2021 collaboration tools. 

**The release includes the following enhancements:**

- Excel Add-in for G Suite was renamed to Excel Add-in for Google Workspace. 
- People API support is available for users.
- Support for the DealsStageHistory object is available in Excel Add-in for Zoho CRM.
- Excel Add-in for BigCommerce gets the ProductCustomsInformation object support. 
- Excel Add-ins for MySQL and PostgreSQL support modern encryption algorithms. 

To learn more about the recent release and download new products, visit: 
https://blog.devart.com/excel-2021-support-and-more-updates-in-excel-add-ins-2-6.html

**Excel Add-ins** allow you to work with database and cloud data in Microsoft Excel as usual Excel spreadsheets. You can get exactly the data you need with visual Query Builder or SQL and refresh the queried external data in a workbook any time with a single click.

**About Devart** 
 
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration, and backup solutions. The company also implements Web and Mobile development projects. 
For additional information about Devart, visit https://www.devart.com/.
5 Web Inspirasi Untuk Programmer
Tags: web, design, inspiration, ui
Published: 2022-01-11 15:52:49


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xgdq4xjuiua56c6h1tb.jpeg)

5 Website untuk mencari Design Inspirasi untuk tampilan Web kamu semakin kece. Mana favorite kamu? Yuk diskusi dikolom komentar💬🎨

*Stay Young, Be Innovative and Keep Learning
#Web #Design #FrontEnd #AditriaPardana
2022 Resolutions
Tags: watercooler
Published: 2022-01-11 15:40:25

A little late I know

Here they are :

-  write more often
-  learn Lua/Vimscript for Neovim
-  swift 
- contribute more to open source (Goal : 46 more than last year .... So 100)
- use a spare machine to use Arch without being on a vm
Paracetamol.js💊| #3: ¿Qué imprime este código?
Tags: javascript, webdev, spanish, beginners
Published: 2022-01-11 15:33:33

## **¿Qué crees que imprime el siguiente código?**

```js
const frutas = ["Mango","Manzana","Naranja","Pera"];
const { 3:pera } = frutas;
console.log(pera);
```
a) `Uncaught TypeError : cannot read property`
b) `TypeError: null is not an object (evaluating)`
c) `Naranja`
d) `Pera`

---

Te dejo la solución en el primer comentario.
DC Fire and EMS Data Visualizer
Tags: atlashackathon, mongodb, streamlit, python
Published: 2022-01-11 15:17:23

---
title: DC Fire and EMS Data Visualizer
published: true
description: DC Fire and EMS Data Visualizer
tags: atlashackathon, mongodb, streamlit, python
cover_image: https://pbs.twimg.com/media/FINjqRVXIAMkdOk?format=jpg&name=small
---

### Overview of My Submission

This application uses MongoDB time series collections to highlight the DC Fire and EMS call volume between August 2014 through August 2015. The data is visualized using Streamlit and provides an interface for users to select different days to view. The app is hosted [here](https://share.streamlit.io/banjtheman/dcfireems_mongo/main/dcfireems_mongo_st.py) to try out.

![Overview of dashboard](https://raw.githubusercontent.com/banjtheman/dcfireems_mongo/main/images/dc_fire_ems_small.png
)

### Submission Category: 

Prime Time

### Link to Code

{% github https://github.com/banjtheman/dcfireems_mongo %}

### Additional Resources / Info

The data was collected during the 
[2021 National Day of Civic Hacking from Code for America] (https://www.codeforamerica.org/national-day-of-civic-hacking /ndoch-2021/) by the [Code for DC Group](https://github.com/banjtheman/dc_ndoch_2021). [Streamlit](https://streamlit.io/) was used to build the visualization.
The Potential End of Crypto 
Tags: healthydebate
Published: 2022-01-11 15:14:56

Over the course of the last several years, crypto fluctuated dramatically. Crypto has made many millionaires, and for many not dumping money into the block chain seems like a mistake. 

With these great things being said, every winner in crypto has a loser. The market has been extremely volatile. Market predictions have been way off the mark for the past several months. Not to mention Bitcoin "the hedge against inflation" has not increased its value while inflation has dramatically risen. If Bitcoin was a true hedge then the relationship would have been the inverse rather then losing thousands of dollars in value.

With all this being said, if you are a crypto buff do not be alarmed just yet. As you might be familiar, the methodology of making money in this industry is buying the dips. So if you are confident in the market then this is the time to put your money where your mouth is and buy a ton of crypto. If crypto is really here to stay you will make vast sums of money.

However, if you are a bit of a skeptic it is a great time to observe the market. I will say crypto still has a slight chance with NFT's, but the overall problem is the value derived from crypto is equal to the amount of energy it takes to mine the specific coin. If the supply is greater than the demand then the overall price of all crypto will drop. Truthfully, with inflation rising and the price of goods increasing, what is more important to purchase: food and clothes or crypto ?

Anyway I hope you enjoyed the short talk about crypto, make an argument below saying why or why not crypto will fail. I hope you have a good day and happy engineering.
Working on Figma
Published: 2022-01-11 15:09:18

Today I was working on Figma, to discover its capabilities.
It is really great software, inspiring to create design of websites for example. I have created today my new resume in Figma, you can check it [here](https://drive.google.com/file/d/1I1lG3QZc-MVfu6g4f0wOXtLK5QfMHnOz/view?usp=sharing).
Essential VSCode Extensions for Beginners
Tags: webdev, beginners, tutorial, programming
Published: 2022-01-11 15:07:16


**Live Server**
![live server example](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) launches a local development server. It features a live reload so every time you save your code, your browser will automatically reflect the changes.

**Prettier**
[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is a code formatter that forces a consistent style on your code.

**Bracket Pair Colorizer**
![bracket pair colorizer example](https://github.com/CoenraadS/BracketPair/raw/HEAD/images/example.png)Bracket Pair Colorizer gives opening and closing brackets matching colors. It helps visualize which brackets go together. It's particularly helpful when your brackets get a bit overwhelming. 

**Colorize**
![colorize extension example](https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/demo.gif)[Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize) instantly visualizes css colors by generating a colored background for them.

**Better Comments**
![better comments example](https://github.com/aaron-bond/better-comments/raw/master/images/better-comments.PNG)[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) helps create reader-friendly comments in your code. It lets you categorize your annotations.
How To Create AdBlock Detector using HTML & JavaScript
Tags: html, javascript, tutorial
Published: 2022-01-11 15:03:36

Hey Everyone, today in this tutorial you’ll learn **How to Detect AdBlock using HTML & JavaScript**. In the earlier blog, I have shared [How to Build Weather App using HTML CSS & JavaScript ](https://codegyan.in/articles/how-to-build-weather-app-using-html-css-javascript.htm)and now it’s time to create a popup box using JavaScript that detects AdBlocker. If you’re new to this blog and it’s the first blog you’re viewing then click here to view playlists of our all [JavaScript Projects](https://codegyan.in/articles/javascript) on Codegyan.

Read full articles on [codegyan](https://codegyan.in/articles/how-to-create-adblock-detector-using-html-javascript.htm) 


![Adblock Detector Tool using javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qhvh5vn3vdh0553oixb.png)