teleren/devto huggingface dataset:
Upgrading applications on macOS using homebrew
Tags: macos, homebrew
Published: 2020-09-16 15:45:04

Installing and upgrading applications on macOS using homebrew is really easy. I'm a big fan of `homebrew` and I mostly use it to install my applications and also upgrade all applications on my system.

In this article, you'll learn the command I use to upgrade my applications (system wide) using the brew tool.

First of all, you'll need to install brew on your system. Follow this [official brew website](https://brew.sh/) to get the installation of brew up and running on your Mac.

Once that is done, your applications can now be upgraded but before running the command just yet, check your system to make sure there are no broken packages using:

```
brew doctor
```

If the above command says your system is ready to brew, then run the below command to upgrade your system's applications:

```
brew upgrade
```

It'll take a while for all applications to upgrade depending on how many applications you've used brew to install. Hope you learned something.

Enjoy ❤️
Membuat Lumen Installer Sendiri (2020)
Tags: lumen, bash, leenuksid
Published: 2020-09-16 15:44:12

***Bismillah***

Alhamdulillah saya masih bisa memberikan ilmu yang semoga bermanfaat bagi teman teman yang membaca..

Baik, sesuai dengan judul. Kita akan membuat Lumen Installer sendiri dengan versi kita sendiri. Bukan hanya itu, Script ini juga akan langsung mengambil versi terbaru dari Lumen.. Ketika tulisan ini ditulis Lumen sudah versi 8

# ⚡️Lumen
Sedikit penjelasan. Lumen adalah sebuah *Micro-Framework* milik **Laravel** yang memang dikhususkan untuk membuat API.

## 🔨 Membuat Lumen Installer
Untuk membuat Lumen Installer saya menggunakan **Bash** agar kita bisa mengkustomisasi lebih enak. 

Ohya. Saya membuatnya di **Linux**, Jika anda pengguna **Windows** mungkin bisa disesuaikan saya untuk pengaturannya.. Ok  😉

Lanjut.. Untuk membuat Lumen Installer, berikut adalah langkah langkahnya

- Buka Terminal **CTRL + T**

- Buat Folder dengan nama bebas.. Contoh saya menggunakan nama "bashku"

```bash 
mkdir bashku
```

- Masuk ke dalam folder tersebut dan buat file dengan nama "lumen"

```bash 
cd bashku
touch lumen
```

- Lalu edit dengan nano (Jika ingin mengedit dengan text editor silahkan saja)

```bash 
nano lumen
```

- Paste kode berikut

```bash
#!/bin/bash

if [ "$1" != "" ]; then
    echo "Sedang Dibuatkan Projectnya di Folder $1"
    composer create-project --prefer-dist laravel/lumen "$1"
else
    echo "Sedang DIbuatkan Projectnay di sini"
    composer create-project --prefer-dist laravel/lumen .
fi
```

- Tekan **CTRL + X** lalu **Y** dan **ENTER**

- Setelah itu kembali lagi ke *Directory* awal 

```bash
cd ..
```

- dan edit ***.bashrc***

```bash
nano .bashrc
```

- Paste kode berikut dibagian paling bawah 

```bash
export PATH="$PATH:$HOME/bashku"
```	

*Contoh diatas karena folder yg sebelumnya saya buat adalah "bashku" bisa disesuaikan dengan nama folder anda

- Jika sudah Tekan **CTRL + X** lalu **Y** dan **ENTER**

- lalu ketik "source .bashrc" di terminal 

```bash
source .bashrc
```

- Setelah itu coba ketika diterminal dengan :

```bash
lumen projectku
```

_Akan membuat project lumen di directory projectku (membuat folder baru)_  

```bash
lumen
```
_Akan membuat project lumen di directory saat ini_

# ⛅️ Penutup
Bagaimana ? Jika ada kendala silahkan diskusi di kolom komentar.. Script **Bash** diatas adalah script bash basic dan sangat mudah di pahami.. 😃

**Sekian Semoga Bermnafaat...**

**Terima Kasih** 👊
You don't always need to love the code
Tags: career, advice
Published: 2020-09-16 15:10:16

In a community programming forum I heard a new developer say:

> I quit programming, here to chat. It was fun when I did development as a kid, but since then it's no longer enjoyable


I'm here to say; That's OK. You are still welcome to hang if you don't program. I've 'quit' coding a few times myself. Came back and found even more joy in the industry, the people and sometimes the code. You don't need to code for fun, or have fun coding in order to get through the gates to our community.

When I haven't loved writing code, I've found a lot of joy in other places. To list a few:

- Solving a problem for someone. For people outside the technical space, what we do is magic, working hard on solving their exact problem with the most boring code is my top joy in development.
- Learn something new. Get creative and pick up a new skill. I find the initial learning curve to be one of the most thrilling things that keeps me in love with my career.
- Understanding the magic. Getting to the bottom of a legacy code base, reading the source behind your favorite library or framework.

What we do can be done as a profession or a Hobby. But for some it's not healthy to do both. You can still be a part of the community.
Final working ON AIR sign with Pimoroni Ubercorn & CircuitPython
Tags: circuitpython, maker, pimoroni, dublinmaker
Published: 2020-09-16 15:02:05

![IMG_4029](https://dev-to-uploads.s3.amazonaws.com/i/4lpp62rsek0dn5ze5cqs.jpeg)

I finally got around to cutting the bits out with a cutter.

When I plugged in the microusb cable, I noticed there wasn't enough room and was putting pressure on the Pi Zero and cable. 

![IMG_4030](https://dev-to-uploads.s3.amazonaws.com/i/6gntqacnsf4mesq7ni11.jpeg)

So I cut another bit off and plugged in the cable and looked a lot better.

![IMG_4034](https://dev-to-uploads.s3.amazonaws.com/i/xvj2pd1jpb2twive13sb.jpeg)

Then I noticed that the board slips down a little when I stand it up, I didn't glue it in to frame or anything, and I found the extra 3D printed piece and used that to wedge a bit of space between the PiZero and the backing board of the picture frame so the pressure is not on the cable.

Here it is all running now:

{% vimeo 458602089 %}

All I need is a power source (small portable battery) and maybe add something in the frame to hold it in without putting pressure on the Pi, I won't document this part, but it's 99% done. 🙌
#CodepenChallenge 100 List Items! Emoji List with Skeleton
Tags: codepen, javascript, design, showdev
Published: 2020-09-16 14:56:01

<p>This is a list of emojis, made entirely in <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> tags.</p>

<p>The "looks" of these icons may vary depends on the system you're using. On my screenshot, I was using Windows 10.</p>

<p>The UI layout is inspired by Windows 10 application management, on the settings. I just changed the color scheme, but the concept is almost the same.</p>

<p>You may click on the list to show the description. The animation is made only by CSS. I am just setting the <code>--height</code> property of HTML style attribute, while I'm using it as a variable, and set the <code>height</code> attribute, and use it as a <code>transition</code> -ing property.</p>

<p>I hacked on the text of the list, by using the <code>content</code> attribute of CSS. Those texts and emojis are just added by the CSS attribute. I did this, to save usage of HTML tags, because I have to keep 100 list elements.</p>

<p>I could not make 100 lists, but I made 100 elements. Though, the other lists will appear (or at least appear) on the skeleton, after loading the data. The method I done is somehow hacking, or cheating.</p>

<p>I didn't use any frameworks, or libraries on the functionality. These all are just in Vanilla JS.</p>

{% codepen https://codepen.io/takaneichinose/pen/OJNwzoz %}
Laravel 8: Routing Change
Tags: laravel, update
Published: 2020-09-16 14:55:10

With the release of Laravel 8, there has been a change to the routing syntax which might catch you by surprise, at least it did to me. It wasn't under the high or low impact changes so I skipped reading to the end and it came back to haunt me.

In a fresh laravel 8 install, I have this in my `web.php` file:
```php
Route::get('/', 'HomeController@index');
```
and this in the index method of the `HomeController.php`
```php
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('welcome');
    }
```
This should be very familiar and we'd be expecting a view when we visit the `/` route. Rather what we see is an error page

![FireShot Capture 058 - 🧨 Target class [HomeController] does not exist. - localhost](https://dev-to-uploads.s3.amazonaws.com/i/322gdctshjwqwx7xxj1n.png)

You might start thinking you messed thing up, but no you didn't. Rather, in laravel 8 this syntax doesn't work by default. In the [upgrade guide](https://laravel.com/docs/8.x/upgrade), it was mentioned but the likelihood of impact was optional 🤨. Though this was mentioned:

> In most cases, this won't impact applications that are being upgraded because your RouteServiceProvider will still contain the $namespace property with its previous value. However, if you upgrade your application by creating a brand new Laravel project, you may encounter this as a breaking change.

The way to define your routes in laravel 8 is either 
```php
use App\Http\Controllers\HomeController;

// Using PHP callable syntax...
Route::get('/', [HomeController::class, 'index']);
```
**OR**
```php
// Using string syntax...
Route::get('/', 'App\Http\Controllers\HomeController@index');
```
A resource route becomes
```php
Route::resource('/', HomeController::class);
```
This means that in laravel 8, there is no automatic controller declaration prefixing by default.

If you want to stick to the old way, then you need to add a namespace property in the `RouteServiceProvider.php` (This property was present in previous versions) and activate in the routes method.
```php
    /**
     * This namespace is applied to your controller routes.
     *
     * In addition, it is set as the URL generator's root namespace.
     *
     * @var string
     */
    protected $namespace = 'App\Http\Controllers';

    // Edit boot method  
    /**
     * Define your route model bindings, pattern filters, etc.
     *
     * @return void
     */
    public function boot()
    {
        $this->configureRateLimiting();

        $this->routes(function () {
            Route::middleware('web')
                ->namespace($this->namespace)
                ->group(base_path('routes/web.php'));

            Route::prefix('api')
                ->middleware('api')
                ->namespace($this->namespace)
                ->group(base_path('routes/api.php'));
    });
```
To recap, in laravel 8 you can use the new syntax to define your routes or stick to the old way.
Without money involved. Would you code? What would you like to code?
Tags: discuss
Published: 2020-09-16 14:42:48

The purpose of my question is that I would like to know the uses that people would do to their programming skills beside working for getting money. And yes, answering I would not code is a valid answer.

-Maybe you always wanted to create a side project.
-Maybe you wanted to create a video game or something.

In my case, I would like to code video games and animations using 3D webgl shaders.
20 Do's and Don'ts of React in 2020
Tags: react, javascript, beginners
Published: 2020-09-16 14:42:24

####Disclaimer: Highly opinionated!!

1. Use hooks and functional components
2. Use context for state management (introduce redux or other flux based state management systems only when you feel it's really necessary, and not because you read somewhere that you couldn't make complex apps without redux/mobx!)
3. Leave Container/Component pattern ([read update by Dan Abramov](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0))
4. Prefer vanilla JS over libraries like lodash, moment etc. (whenever possible) - it's more of a JS tip in general ;) 
5. If you are using GraphQL based apis then instead of introducing service layer, try to use apollo hooks (if you are using apollo client) and incorporate data fetching in your components - for relay [see this] (https://github.com/relay-tools/relay-hooks)
6. Use Material UI or Antd for your UI needs
7. Start using styled components - will make your life easier (btw it integrates nicely with Material UI/Antd)
8. Don't be obsessed with render count (but it doesn't mean you shouldn't be mindful of unnecessary renders)
9. Instead of Formik, see if you can write custom hooks and handle your forms using that (or use React Hook form)
10. Use Typescript (should have been #1!) - but please just don't add "any" everywhere like my previous team used to do - it defeats the purpose
11. Use Next.js for server-side rendering and Gatsby for static websites
12. Use index based import/exports
13. Use some styling/linting library (like [airbnb-styling-guide](https://github.com/airbnb/javascript)) as a base and introduce changes that make sense within your team
14.  Comment only when necessary (your components should be self-explanatory
15. Avoid unnecessary logging, use Error Boundaries and try to use `console.error` for errors
16. Prefer render props over HOCs ([read more](https://gist.github.com/heygrady/f9bf3b6dd93fe3d87ba87430fd3c20d5))
17. Keep `useEffect` block separated based on dependencies (if they are independent) and try to have all your useEffect blocks just before your JSX (return method) and sort them based on number of dependencies - it really makes your code looks clean!
18. Keep components concise and clean and make sure they follow [SRP](https://en.wikipedia.org/wiki/Single-responsibility_principle)
19. If you use `useCallback` a lot please [read this first](https://kentcdodds.com/blog/usememo-and-usecallback)
20. Use React.lazy and Suspense for the entry point of a component

** Not directly related to React but please stop abusing firebase!! (make sure your architecture is well thought of and can be scaled when your business grows)
Sokoban Action
Tags: actionshackathon, github, opensource, javascript
Published: 2020-09-16 14:25:11

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)

### My Workflow

#### Sokoban Action

Hi everyone! This is the first time I'm making a GitHub Action and this is also my first post here!

When I came to know about the GitHub Actions Hackathon, I had no idea what an Action was or how it worked. As I was scrolling through the comments of the Hackathon Announcement post, I came across this:

{% devcomment 13h2n %}

So, I visited the link and found this amazing project!

{% github https://github.com/timburgan/timburgan %}

I was surprised by the capabilities of GitHub Actions. So, I went through the docs and took the awesome courses at GitHub Learning Lab to get a good grip on GitHub Actions.

Finally, I decided upon making my own game using GitHub Actions. I implemented [Sokoban](https://en.wikipedia.org/wiki/Sokoban), which is a classic box-pushing game.

The game takes place right in the [README.md](https://github.com/RaisinTen/sokoban-action/blob/master/README.md). It has a table representing the game board, furnished with the game items, like this:

![Game board](https://dev-to-uploads.s3.amazonaws.com/i/b370qlp088k7kk0ufpqc.png)

Your character is the Octocat. To play the game, you are supposed to push each box to a goal using the given controls.

When you click on the controls, it opens a new issue with a text to trigger the workflow. After you submit the issue, the action starts running and updates the board and replies to your issue like this:

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

Now push! :smiley:

### Submission Category: 

Wacky Wildcards

### Yaml File or Link to Code

{% github https://github.com/RaisinTen/sokoban-action %}

Hope you enjoyed playing this game. :blush:
Thank you for your time. :pray:
Public vs Private disclosure
Tags: opensource, github, security, hacktoberfest
Published: 2020-09-16 14:25:00

<h3>Hi Devs </h3>

I am wondering what your opinions are when it comes to disclosing security issues on GitHub. 

Do you side with the 'responsible disclosure' process, or would you prefer to disclose in the open?

I would love to hear the opinion of users and maintainers, let's have a debate! 

🙌
Putting my Pimoroni Ubercorn and IKEA Frame together
Tags: maker, ikea, pimoroni
Published: 2020-09-16 14:13:04

IKEA has been running out of stock on the 23"x23" RIBBA picture frame for quite awhile now, and I think they are not re-stocking them (I might be wrong, these are popular frames).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/evbsub4blmo2gpcugbb8.png)

So I took one of my existing ones at home.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/avgmin5b5hb3rsql6nzw.jpeg)

Placed the 3D printed parts (Thanks, [@MickTwomey](https:twitter.com/micktwomey) for printing it out in nice black.

I used A4 sheet and cut to size and a bit of sticky tape to stick the frame just inside of the glass and before the 3D printed part.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e29ulnm3mdjknurhy6mj.jpeg)

Measured up the sections to cut out, yes, I did use a ruler. Was thinking of 👀-balling it but I am hearing virtual tut-tuts from Mick, and the "Measure twice, cut once" whispering in the back of mind. 😝

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ytar60hbw5h30oy6e13j.png)
Clean code or not clean code that's the question 
Tags: discuss, codequality, javascript
Published: 2020-09-16 14:09:01

Hello,
code quality is a really important subject in software development, if we really like to deliver a real tested product with fewer bugs (or no bugs) we should respect the majority of coding rules and standards. 
I use eslint and prettier in vscode and some other extensions for code formatting.
Lately, I've started using SonarQube for checking code in CI/CD and it's a really powerful engine, it analyses the code and it detects bugs, untested code, security vulnerabilities, and more.
after resolving all the points, another devlopper will check the merge request to check the unseen or forgotten issues.

what do you think and what do you use in your daily life?
Dockerize Actions
Tags: actionshackathon, opensource, github, docker
Published: 2020-09-16 14:07:13

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)

Dockerize-Actions

Open source projects contain source code which must be built into end-applications.

These must be deployed on servers and made available to the end-users.

To make this process easy, this GitHub Actions can be used.

It builds the source code fetched from open source repositories remotely in Docker containers using Build tools (Maven is used here) and deploys the cross-platform Docker Image on GitHub Packages publically.

### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

DIY Deployments


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github NishkarshRaj/Dockerize-Actions %}

https://github.com/NishkarshRaj/Dockerize-Actions/blob/master/.github/workflows/main.yml
[TIL] Creating a countdown time in OBS for my stream
Tags: todayilearned, streaming, obs
Published: 2020-09-16 13:51:50

So I was on Streamyard trying it out,  and saw it had a countdown timer. Come to think of it,  I also noticed other livestreams with a  countdown timer. The one on Streamyard counts down and switches automatically to the host.

I was curious and had a look online on how to create my own timer for my Youtube Streams (currently just for PyLadies Dublin). And I found the following video:

{% youtube tbdUVnwir4s %}
 
And ticked all my boxes:

* OBS
* No need to download plugins
* Load up a script already part of OBS

And the video was easy to follow the steps and yeah, it worked!

1. Open OBS
2. Create a new scene for your streaming countdown
3. Add your image source as background
4. Add new text source like “Streaming starts in…”
5. Add another new text  source called “Timer text” and name it  “timer”
6. Go to menu on toolbar and open Tools > Scripts
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wrj4mb3us8dt07zx3mvi.jpeg)
7. Click on the “+” and click and add file called “countdown.lua”
8. Then set your duration time (mins only)
9. Once you are happy, hit close button
10. Load up the scene and the countdown starts! 🙌

{% vimeo 458573408 %}
YouTube Video | Two Color Flipper Projects in JavaScript
Tags: youtube, beginners, webdev, showdev
Published: 2020-09-16 14:00:57

We are going to build two projects - First a simple color flipper which will change the background to a random color, on the click of a button. In second  we are going to randomly generate the hex color code from the available 16 million colors.

{% youtube FQQ_Dluw2Go %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | Simple Item List Project in JavaScript
Tags: youtube, webdev, showdev, javascript
Published: 2020-09-16 13:59:16

In this video we are going to create a Simple Item list project in this post, with JavaScript DOM.

{% youtube IZnYl5BpP7w %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Headless e-commerce framework for Django
Tags: django, python, wagtail
Published: 2020-09-16 13:58:03

Whilst moving to the headless way of building the web I encountered the dilema &mdash; which solution to use to build e-commerce stores in Django?

I wanted a simple yet flexible system that focuses on the headless *RESTful* approach and while there are many solutions in the wild, each had me reading through the docs and code for hours trying to figure out where to start, how to extend, how to integrate with existent projects, etc.

Don't get me wrong, there are some excellent fully-featured solutions, but none of them were simple...*at least not for me :)*

## Creating my own

In comes [Salesman](https://github.com/dinoperovic/django-salesman). I've created a small framework for building headless e-commerce. The idea was to make it as simple as possible for a beginner Django developer to pick up and get started, but also allow for advanced features to be added progressively.

The one and only requirement for this project is [Django REST Framework](https://www.django-rest-framework.org).

## Features

- API endpoints for **Basket**, **Checkout** and **Order**
- Support for as many **Product** types needed using generic relations
- Pluggable **Modifier** system for basket processing
- **Payment** methods interface to support any gateway necessary
- Customizable **Order** model
- [Wagtail](https://wagtail.io/) and **Django** admin implementation

## Try it!

Salesman uses [Poetry](https://python-poetry.org/) for virtualenv and dependency management so you should install it first.

### Clone the repo

```bash
git clone https://github.com/dinoperovic/django-salesman.git
```

### Run the example

```bash
cd django-salesman/
poetry install -E example
poetry run example/manage.py migrate
poetry run example/manage.py create_dummy_products
poetry run example/manage.py createsuperuser
poetry run example/manage.py runserver
```

**Done!** You can now:

- Navigate to `/api/` and start adding products to the basket and purchase items using *The Browsable API*.
- View orders in both the regular Django admin (`/admin/`) or [Wagtail](https://wagtail.io) cms (`/cms/`).

You can find the full documentation on [Read the Docs](https://django-salesman.readthedocs.org).

---

What are your experiences with building e-commerce in Django?