teleren/devto huggingface dataset:
Reverse Ordering
Tags: bootstrap, css, flexbox, webdev
Published: 2020-02-18 12:04:07

While working on a project, I needed to change the position of two divs based on screen size. This meant that when the website is viewed on desktop, the divs are stacked same way as designed but when viewed on mobile, the divs should be reversed. I already knew there was a css property using display: none but that would mean duplicating code. Several solutions found only discussed row/column reverse. After some experimentation, I realized I could just reverse the flex direction. The goal of this tutorial is to show both div reverse ordering and column reverse ordering based on screen width <500px. Let us begin.
##The Goals
**Div Reverse**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mdvylqjvu73fxh24ye4k.png)
**Div Reverse Mobile**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l3828oboh0d9pswtt5ox.png)
**Column Reverse**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wccilbmp583tek8jv4s3.png)
**Column Reverse Mobile**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lkqa9fns8lxxj55ne8yu.png)

##The Markup
Since I am using bootstrap, I added a few inline styles:
```code`
<div class="divReverse p-5 mt-5 mb-4">
  <div class="mb-5 mt-5 p-5 bg-primary">
    <h1 class="first">Desktop 1st DIV </h1>
  </div>
  <div class="mb-5 mt-5 p-5 bg-info">
    <h1>Desktop 2nd DIV </h1>
  </div>
</div>
```
##Basic Styles
Used some CSS methods to reverse the div order
```code`
@media only screen and (max-width: 600px) {
  .divReverse {
    background: #A9A9A9;
    display: flex;
    flex-wrap: wrap-reverse;
  }
}
```
##Conclusion
In this tutorial, we saw how we can easily reverse a div. For the complete code and that of column-reverse ordering, I have added a link to codepen https://codepen.io/dukeofwest/pen/JjdKbEV
Learn how to make a Triangle in CSS once and for all
Tags: webdev, html, beginners, css
Published: 2020-02-18 15:12:28

<strong>Warning: This is a new format of content that I tried to make which is very fast hopefully engaging.</strong>

CSS triangles always frustrate me because I seem to always have to google how to make them every time I plan to add one. So I've made a video to both teach myself (and hopefully you) how to do it once and for all.
{% youtube UDxydHR91U8%}
In this video I cover:
* Fun and fast (hopefully enjoyable) format
* 3 properties a CSS triangle is made of
* Explaining how to make a CSS triangle go a certain direction
* Some examples of CSS triangles
* Making more complex triangles with CSS

<pre>
.css-triangle {
  height:0px;
  width:0px;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-left:50px solid red;
}
</pre>

For more information, please watch the video and tell me what you think about this sort of format. Thanks!!!

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [Patreon](https://www.patreon.com/adriantwarog)
* [Twitter](https://twitter.com/twarogadrian)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [4 Simple CSS Hover Transitions for your Elements Background](https://dev.to/adriantwarog/4-simple-css-hover-transitions-for-your-elements-background-4mlg)
* [How to implement Dark Mode with CSS new media call: prefers-color-scheme](https://dev.to/adriantwarog/how-to-implement-dark-mode-with-css-new-media-call-prefers-color-scheme-3h65)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Coding useless stuff
Tags: opensource, philosophy
Published: 2020-02-18 16:24:56

---
title: Coding useless stuff
published: true
date: 2020-01-20 00:00:00 UTC
tags: opensource, philosophy
canonical_url: https://manfred.life/coding-useless-stuff/
---

> “Creativity is intelligence having fun” – Albert Einstein

_Context: I recenlty made a [talk](/opensource-communities-presentation/) about open-source communities. At the end of the talk, I had very interesting questions from the audience. In this blog post, I will share with you why I love coding useless stuff!_

As children, we are encouraged to learn and try new things, we love experimenting and aren’t afraid of failure. But with time, we become more self-conscious and feel more pressure to perform. It’s not rare that people don’t even try doing something because they think this activity or its results will look “ridiculous” to observers.

I started coding over a decade ago and spoke to many programmers along the way, and noticed a tendency for stifling perfectionism in the IT community. Worrying about being scrutinized, that the projects aren’t “serious” enough, or the libraries used aren’t “fancy” enough. Like those high school rules we see in the movies – you should always try to sit at the table with the “cool kids”, and if anyone spots you sitting with that weird nerd, you’ll be labeled a loser.

Personally, I love, if not prefer, coding things that are “useless”. As Simone Giertz, a self-taught inventor who got famous building purposefully crappy robots, says in her talk: “Building these robots is an expression of joy and humility that often gets lost in engineering, and for me it was a way to learn about hardware without having my performance anxiety get in the way”.

It can start as abstract or quirky as I want it to, and I have a blank slate do develop it into anything I want, with no time pressure or being limited by specific tools. Implementing an idea is like solving a puzzle, I need to find the languages and libraries that are best suited for it, and learn a lot in the process. And it often turns out that the ideas and methods that were developed would give ideas that are implemented in my main projects, sometimes the very next day.

So, even though the result of such experimental coding might not be “useful” in and of itself, the overall experience brings a lot of fun and knowledge, and it often gives insights that help with the “serious” projects.

I have important projects that I do and often talk about, related to privacy, surveillance, censorship. But just as often I code for fun, and thoroughly enjoy it. It is entertaining as well as educational.

Learning isn’t passive; we need to fiddle with things to feel their structure, usages and limitations. As Kurt Lewin said, “If you want to truly understand something, try to change it.”
New form generator is in the hood! Welcome Jafar 🌟
Tags: react, javascript, opensource, form
Published: 2020-02-18 16:47:07

New Form Generator by Verizon Media (Yahoo & Aol) was recently shared as an open source on Github! Its a based on a cool pure javascript form class, that any UI library (such as React, Angular and Vue) can use to expose Form and Field components. Currently contains also integration to React. Check it out, Try it out and I guarantee you wont go back to implement forms / manage pages without it again! :)

GitHub:
https://github.com/yahoo/jafar

Website:
https://yahoo.github.io/jafar/

Medium Post:
https://medium.com/@galhavivi/new-form-generator-is-in-the-hood-welcome-jafar-5b3b638aa0c
How to Integrate Auth0 with Oracle CX Commerce
Tags: oraclecx, webdev, programming
Published: 2020-02-18 18:42:52

---
title: How to Integrate Auth0 with Oracle CX Commerce
published: true
description: Oracle CX Commerce customers can now leverage the Auth0 Platform.
tags: #oraclecx #webdev #programming
canonical_url: https://auth0.com/blog/how-to-integrate-auth0-with-oracle-cx-commerce/
---
TL;DR: In this article, we are going to discuss how Oracle CX Commerce and Auth0 can now be connected! We will walk through that process to see just how we can accomplish that!

 Auth0 + Oracle CX Commerce
Auth0 and Oracle have partnered together to find a great opportunity that brings added value to our users. Oracle and Auth0 now empower customers to leverage the Auth0 platform to add identity and access management capabilities to commerce storefronts that are built and hosted on CX Commerce.

Oracle CX Commerce
Okay, but what is Oracle CX Commerce? CX Commerce is a leading enterprise SaaS commerce solution -- scalable, flexible, cloud-native, and built to support both B2B and B2C. Want to build an enterprise, highly customizable, feature-rich digital commerce business? CX Commerce’s solution provides for all of that!

[Read on 📖](https://auth0.com/blog/how-to-integrate-auth0-with-oracle-cx-commerce/?utm_source=twitter&utm_medium=sc&utm_campaign=auth0_oraclecx)
i wonder if i can run netdata and sumologic at the same time
Tags: devops, sysadmin, performance, monitoring
Published: 2020-02-18 23:20:10

i wonder if i can run netdata and sumologic at the same time (probably a nonsense thing to do but who cares)

ive got netdata up and running on both my OCI OL3 vms 

* https://docs.netdata.cloud/packaging/installer/

loving the one line installer BUT dont forget to use the SECRET `--stable-channel` switch
```
$ sudo -i
# bash <(curl -Ss https://my-netdata.io/kickstart.sh) --stable-channel
```

then i create some ssh tunnels so i can see both cloud servers locally
```
$ ssh -L 3001:localhost:19999 opc@ol7a.oci.vm -N &
$ ssh -L 3002:localhost:19999 opc@ol7b.oci.vm -N &
```

now lets see how easy it is to install sumologic

UPDATE @ 11:28

OH DEAR sumologic is utterly unintuitive !

can anyone point me to a quick start instead of the 1000 page manual ?
PHPMyAdmin – count(): Parameter must be an array or an object that implements Countable
Tags: ubuntu, php, phpmyadmin
Published: 2020-02-19 07:09:13

Edit file <code>/usr/share/phpmyadmin/libraries/sql.lib.php:</code>

<code>sudo nano /usr/share/phpmyadmin/libraries/sql.lib.php</code>

On line 613 the count function always evaluates to true since there is no closing parenthesis after $analyzed_sql_results['select_expr']. Making the below replacements resolves this, then you will need to delete the last closing parenthesis on line 614, as it’s now an extra parenthesis.

Replace:
 <code>
((empty($analyzed_sql_results['select_expr']))
    || (count($analyzed_sql_results['select_expr'] == 1)
        && ($analyzed_sql_results['select_expr'][0] == '*')))</code>

With:

<code>((empty($analyzed_sql_results['select_expr']))
    || (count($analyzed_sql_results['select_expr']) == 1)
        && ($analyzed_sql_results['select_expr'][0] == '*'))</code>

Restart the server apache:

<code>sudo service apache2 restart</code>
How to Login 10.0.0.1 IP Address 
Published: 2020-02-19 09:11:11


How to connect your Comcast router login with Ip address 10.0.0.0.1, we describe it in very short. First of all, write proper Ip address 10.0.0.0.1 in your address bar then enter the default username and password provided by default access gateway when you are purchasing your modem first time. Then you can maintain your admin panel, you can also change your password now you are getting connected with the internet. https://10-0-0-0-1.tech/
How to create own utility methods for your Rails application
Tags: ruby, rails
Published: 2020-02-19 15:33:43

---
title: How to create own utility methods for your Rails application
published: true
description: 
tags: ruby, rails
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/rlt9ue05pl4bspkxgetr.png
---

Hello,

As a developer, I need from time to time to quickly execute SQL, or check something in DB, truncate a table, etc when I'm in the rails console. 

You may already know about using `ActiveRecord::Base.connection.execute("SQL query")` solution, but I must admit I'm a lazy developer when it comes to doing routine tasks or things where I need to type long pieces of code. And actually a snippet of code above is not everything that you need to type, you may also need to add `.to_a` to see the result of the query. 


I know the following rule:
## laziness is the engine of progress!

So, I tried to solve my issue as a developer and create an open-source solution to use it from project to project: https://github.com/igorkasyanchuk/execute_sql

This is a demo of how it works:
![Demo](https://dev-to-uploads.s3.amazonaws.com/i/rlt9ue05pl4bspkxgetr.png)


I'll explain how it works.

Step of creation gem I'll skip, but basically you need to create a new gem (`rails plugin new <name>`).

Now we need to understand how to add our own method just in the rails console. 

```ruby
module ExecuteSql
  class Railtie < ::Rails::Railtie

    console do
      TOPLEVEL_BINDING.eval('self').extend ExecuteSql::ConsoleMethods
    end

  end
end
```

This is a piece of code from my gem. You can see that Rails provides a helper method `console` where you can pass the code which will be executed when you starting `rails c`.
In our case this is `TOPLEVEL_BINDING.eval('self').extend ExecuteSql::ConsoleMethods`.

In case you have wondered, what this top-level constant TOPLEVEL_BINDING is all about better to check sample of usage below:

```ruby
a = 42
p binding.local_variable_defined?(:a) # => true
p TOPLEVEL_BINDING.local_variable_defined?(:a) # => true

def example_method
  p binding.local_variable_defined?(:a) # => false
  p TOPLEVEL_BINDING.local_variable_defined?(:a) # => true
end

example_method
```
More details about `TOPLEVEL_BINDING` you can find [here](https://idiosyncratic-ruby.com/44-top-level-binding.html).

```
[11] pry(main)> TOPLEVEL_BINDING.eval('self')
=> main
[12] pry(main)> TOPLEVEL_BINDING
=> #<Binding:0x0000000001350b00>
```

As you can see TOPLEVEL_BINDING.eval('self') is basically the context of our console app.


So the last thing for us to do is to extend the `main` app with our class methods from `ExecuteSql::ConsoleMethods` module, source code is [here](https://github.com/igorkasyanchuk/execute_sql/blob/master/lib/execute_sql.rb).

This module inside is responsible for queries DB, and basically I took most of the code from my other gem [rails_db](https://github.com/igorkasyanchuk/rails_db) and printing results using [terminal-table](https://github.com/tj/terminal-table) gem.

Now my life is easier :) 

And I hope you can implement your own utility methods.
How to become Good back-end developer?
Tags: php, laravel, devops, career
Published: 2020-03-02 16:22:05

Here some point to be noted being a good back-end developer .

1.Read the official documentation carefully of language .
2.Each topic are important for being a good back-end dev.
3.If any bug makes you unhappy  take a short break than thin about problem it will help you to resolve bug .
4.Check your syntax twice and than run program .
5.Always find bug from initial to advance .
Thanks .
Normalize your complex JS objects
Tags: javascript, normalization
Published: 2020-03-02 18:29:34

---
title: Normalize your complex JS objects
published: true
description: The process of normalization its havily used in every software design because normalizing data has a big impact on reducing data redunancy.
tags: javascript, normalization
---

## Data normalization

The process of normalization its havily used in every software design because normalizing data has a big impact on reducing data redunancy.

## When to normalize your data?
Suppose we received the following data from an api:
```ts
const apiData = [
    {
        id: 1,
        name: "Daniel Popa",
        siteUrl: "danielpdev.io"
    },
    {
        id: 2,
        name: "Other Name",
        siteUrl: "danielpdev.io"
    }
];
```

Now, you get a task to find the item with id of 1.

### How will you solve it?
#### 1. Dummy solution with complexity O(n):
Iterate over the whole collection using a `find` and output the result.
```ts
const findId = (apiData, id) => apiData.find(el => el.id === id);
```

You finished quite fast and gone for a coffee, but over the next few months the data grows and now you don't have only two elements,
but 10000. Your time of searching for elements will increase considerabily.

#### 2. Normalized solution with complexity O(1):
Transform data from [objects] => { id: object}:

```ts
const apiData = [
    {
        id: 1,
        name: "Daniel Popa",
        siteUrl: "danielpdev.io"
    },
    {
        id: 2,
        name: "Other Name",
        siteUrl: "danielpdev.io"
    }
];

function assignBy(key) {
    return (data, item) => {
        data[item[key]] = item;
        return data;
    }
}
const optimizedData = apiData.reduce(assignBy("id"), {});
```

optimizedData variable looks like the following: 

```ts
{
  "1": {
    "id": 1,
    "name": "Daniel Popa",
    "siteUrl": "danielpdev.io"
  },
  "2": {
    "id": 2,
    "name": "Other Name",
    "siteUrl": "danielpdev.io"
  }
}
```

Now, searching for an element becomes really easy. Just `optimizedData[id]` and your data is ready.


### Conclusion:
Normalize your data only when dealing with complex objects and searching for objects takes long.

Article first posted on [danielpdev.io](https://danielpdev.io/normalize-your-complex-js-data/)

[Follow me on twitter](https://twitter.com/danielpdev)
iOS: How to add Quick Actions (shortcuts) to your app icon
Tags: ios, swift
Published: 2020-03-02 20:20:29

iOS Quick Actions are meant as a shortcut for your users. They are triggered by long-pressing on the app icon. Each app can present up to four of them and they can be nice touch you can add with not that much a code.

We can have static actions that are defined in `Info.plist` or dynamic actions which are much more versatile. Let’s focus on the dynamic bunch. 🙂

### Providing Quick Actions

We can use the class `UIApplicationShortcutItem` to define one shortcut item and then set all the items we want when app is moving to background.
For example this is one item from one of my recent apps to open management section:

```swift
UIApplicationShortcutItem(type: "OpenManagement", localizedTitle: "Management", localizedSubtitle: nil, icon: UIApplicationShortcutIcon(type: .favorite), userInfo: nil)
```

The `type` is used to differentiate the shortcut when user selects it. `localizedTitle` is the text on the shortcut and you can choose from variety of prepared icons. Here `.favorite` results in filled star. You can also provide your own.

There is also `userInfo` to provide dictionary with additional details.

### Activating Quick Actions

Let’s use `AppDelegate` to activate the shortcut item shown above in the `applicationWillResignActive` method:

```swift
func applicationWillResignActive(_ application: UIApplication) {
		let managementShortcut = UIApplicationShortcutItem(type: "OpenManagement", localizedTitle: "Management", localizedSubtitle: nil, icon: UIApplicationShortcutIcon(type: .favorite), userInfo: nil)
        application.shortcutItems = [managementShortcut]
    }
```

The first part is done. Long-pressing on app icon will show this new Quick Action.

## Responding to Quick Actions

There are two places in `AppDelegate` where we have to respond to Quick Action selection. One is the startup method `didFinishLaunchingWithOptions` where we can check the `launchOptions` like so:

```swift
if let shortCut = launchOptions?[UIApplication.LaunchOptionsKey.shortcutItem] as? UIApplicationShortcutItem {
// handle shortCut here
}
```

And then there is also dedicated method called when the app is already running in the background:

```swift
func application(_ application: UIApplication, performActionFor shortcutItem: UIApplicationShortcutItem, completionHandler: @escaping (Bool) -> Void) {
        print(shortcutItem.type)
        // handle shortcutItem here
}
```

I would recommend creating helper method for handling shortcut items so you don’t have to duplicate logic in those two places.

Thanks for reading!

_Is anything not clear? Do you want more information? Ask in the comments and I will do my best to help you._

Here is Quick Actions example from the Dashboardy app:

![Quick Actions example in Dashboardy iOS app](https://dev-to-uploads.s3.amazonaws.com/i/fzc8bpzmlygjsansf7fe.jpeg)
Crucial VS Code Hotkeys
Tags: newbie, beginners, vscode, hotkey
Published: 2020-03-02 23:50:47

I LOVE HOTKEYS! The less keystrokes I need to type, the better. In this blog I'll go over my favorite hotkeys that I've found so far when using VS Code.

Before we dive in I'd like to address that I'm currently using a mac for my coding adventures. All of the hotkeys I'll be talking about will be for mac. Sorry windows and linux users...

##**Opening VS Code's Built In Terminal**
To open VS Code's built in terminal, use `command` + `~`. No more tabbing back and forth for me!

##**Open and Close the Sidebar**
To quickly close and open the sidebar, use `command` + `b`.

##**Switch Between Workspaces**
VS Code does a good job of recording what folders you have previously opened. To quickly navigate to these folders use `control` + `r`.

##**Search For a File**
If your project gets complex enough searching for specific files can be a pain. Use `command` + `p` to quickly search for a file or symbol by name.

##**Navigate to a Specific Line**
On the topic of `command` + `p`, if you start your search with `:` followed by a number VS Code will navigate you to that specific line. You can also use `control` + `g`.

##**Folding and Unfolding**
If your codebase is getting too large and you prefer a clean screen you can fold your classes or methods to reduce clutter. To fold your classes or methods use `command` + `option` + `[`. To unfold them use `command` + `option` + `]`.

##**Select All Instances of a Word**
To select all occurrences of a word use `command` + `shift` + `l`. From here you're able to edit all of your selections at once.

##**Select a Single Instance of a Word**
To select a single word use `command` + `d`. If you do it more than once VS Code will add the next occurrence of the word to your selection.

##**Move a Line**
To move a line up or down a line, use `option` + the `up` or `down` arrows.

##**Copy a Line**
To copy a line of code either up or down a line use `shift` + `option` + `up` or `down`.

##**Delete a Line**
To quickly delete a line use `command` + `x`. To delete the portion of the line to the left of your selection use `command` + `delete`.

##**Duplicate Your Cursor**
This one is incredibly helpful when you are doing repetitive tasks. Use `command` + `option` + `up` or `down`. Alternatively, you can hold `option` and click to add another cursor location.

Hopefully some of these hotkeys are helpful in your future coding adventures! I'm always looking for new hotkeys to add to my arsenal so please let me know if I missed any important ones.