teleren/devto huggingface dataset:
🦄 Your Fantasy Front End Framework Designs 🧡
Tags: webdev, discuss
Published: 2020-11-26 17:01:02

The Frontend framework market is cramped, in fact its getting to the point where the runtime framework is graduating to compile time with things like Svelte, Riot.js and Stencil among others.

I often think about syntax, what would my own frontend thing be like?
I would probably have the following rules.

- must be as close to existing specifications as posable and follow pre-existing knowledge as close to the language that it is trying to emulate.
- must either be very prescriptive or very free
- should be compiled first and can also have a runtime effort without stigma that this is inferior in some way.
- all ideas must be as concise as humanly possible

I am looking at approaches that may not be mainstream just for the interest.

I wrote a component:
``` js
export default ({
  tag = "x-foo",
  state = {},
  meta = {},
  handle = {
    click() {}
  }
}) => `
  <div>
    <p>hello test</p>
    <button onclick=${handle.click}></button>
  </div>
`;
```

Now this is valid JS but it has a problem, also quite elegant and I wish it where possible to write a component in this way, in real life this way of defining a component relies on the defaults never being passed, it relies on defaults being completely private even from the framework that would process / compile such a component. This code could only work through introspection or compiling.

What about this one a DSL leaning on your knowledge of css (domain specific language).

``` js

@script {
    const foo = "hello world";
    const bar = #333333;
}

@style {
    :host {
        div {
            color: ${bar};
        }
    }
}

@template {
    <div>${foo}</div>
}

```

That one is actually close to my programming language Jess that I stopped working on because Rust is hard, parsing and lexing is hard too - maybe il try again one day.

The problem is DSL's are weird, really weird and you have to "learn" things, that sucks.

```
''' js
const foo = "hello world";
const bar = #333333;
'''
```
I like this variation based on md code blocks, lots of ways to design a syntax, good fun too but none of these would amount to anything special, the solution is still out there and I think it lies within WASM.

Sooo anyway the point of the post what does your Frontend Framework look like? do you like DSL's?
Leave a comment so I can be "inspired" by it.
How to fetch data from the database using AngularJs in php?
Tags: angular, javascript, php
Published: 2020-11-26 16:57:12

#AngularJs code to get MYSQL data:

```
<script>

var app = angular.module('myApp', []);

app.controller('usersCtrl', function($scope, $http) {

  $http.get("https://freewebmentor.com/api/users_mysql.php")

  .then(function (response) {$scope.names = response.data.records;});

});

</script>

//UserCtrl is used to display all the user data on your web page.

div ng-app="myApp" ng-controller="usersCtrl">

<table>

  <tr ng-repeat="result in names">

    <td>{{ result.username }}</td>

    <td>{{ result.email }}</td>

  </tr>

</table>

</div>
```

[Read more](https://www.kodlogs.com/blog/293/how-to-fetch-data-from-the-database-using-angularjs-in-php)

##HTML Form:

```
<!DOCTYPE html>

<html >

<style>

table, th, td {

  border: 1px solid grey;

  border-collapse: collapse;

  padding: 5px;

}

table tr:nth-child(odd) {

  background-color: #f1f1f1;

}

table tr:nth-child(even) {

  background-color: #ffffff;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
<div ng-app="myApp" ng-controller="usersCtrl">
<table> 

  <tr ng-repeat="x in results">

    <td>{{ x.username }}</td>

    <td>{{ x.email }}</td>

  </tr>

</table>
</div>
<script>

var app = angular.module('myApp', []);

app.controller('usersCtrl', function($scope, $http) {

  $http.get("https://freewebmentor.com/api/users_mysql.php")  

  .then(function (response) {$scope.results = response.data;});

});

</script>
</body>
</html>

```
Perks of writing a good README file for beginners
Tags: github, markdown, webdev, beginners
Published: 2020-11-26 16:55:19

# This is an article about READMEs.

## First things first, why I am talking about READMEs here? 

A README is probably the first thing consumer sees on the repository, so as the author of the module it is our responsibility to show them exactly what they need and how can our module fulfill their need. Our job is to:

a) **tell them what it is**
b) **show them what it looks when it's live (a demo gif may work here)**
c) **show them how they use it**
d) **tell them any other relevant details**

---
                          
## Feeling lazy, sorry dude!
## NO README, NO ABSTRACTION 💁‍♂️


If you don't put a satisfactory README then developers have to look and deep dive into your code which is not a pretty thing to do in my opinion. The developers or consumers want to see your working module before they look into your code so it's better to use a little abstraction.

---

## Okay, I will write one but how to write it?
## Here it goes 👇


`Project title`
A little info about your project and what it is about.

`Features`
Tell the consumer about the unique features of your module and how it will solve their problem.

`Tech Stack`
Mention all the technologies you used in the project.

`Demo`
Add screenshots and demo gif of your working module. Trust me, this will add good value to your module.

`How to use`
Create a simple and easy to understand guide for consumers if they wish to interact with your working project.

`API Reference`
If you're using an API in your projects, tell the consumer what it does, and add a link to API docs if needed.


Above mentioned points are enough for beginners who are starting their coding journey. You should keep in mind that adding links, demo, images, references, and interactivity will make you a better developer.

---

## Some resourceful links coming your way 🚀


### Articles
1) ["Art of Readme - Learn the art of writing quality READMEs"](https://github.com/noffle/art-of-readme#readme) - Stephen Whitmore

2) ["How To Write A Great README"](https://thoughtbot.com/blog/how-to-write-a-great-readme) - Caleb Thompson

### Examples of awesome READMEs
1) [aimeos/aimeos-typo3 ](https://github.com/aimeos/aimeos-typo3#readme) - Project logo. Clear description of what the project does. Demo screenshot. TOC for easy navigation. Easy installation and setup sections with screenshots. Links for further reading.

2) [ai/size-limit ](https://github.com/ai/size-limit#readme) -  Project logo, clear description, screenshot, step-by-step installing instructions.

3) [iharsh234/WebApp ](https://github.com/iharsh234/WebApp#readme) - Project landing page. Clear description of what the project does. Demo screenshot. Simple install and usage sections. Includes an examples section with common uses and a mobile demo section.

---

*That's all folks, hope it helps the new comers!*
[HELP]Why every explanation about quicksort is somehow different?
Tags: help, algorithms, cpp, sorting
Published: 2020-11-26 16:51:19

---
title: [HELP]Why every explanation about quicksort is somehow different?
published: true
description: 
tags: help, algorithms, cpp, sorting 
//cover_image: https://direct_url_to_image.jpg
---
I'm trying to implement a basic quicksort algorithm, I've understood the basic concept behind quicksort and now I'm looking online for a step by step guide. 
I've followed through about 7/8 guides and what I've found is that every guide has different ways of using the pivot and different ways of using the two pointers/counters.
Some follow these steps for the pivot:
1.Decide a pivot
2.Swap the pivot with the last element of the array
3.Search the element from the left that is greater than pivot and element that is smaller than pivot from right
4.Swap those elements
5.etc...

Others do this: 
1.Choose a pivot
2.Put left pointer to 0, a right pointer to the last element of the array
3.Start comparing left pointer to pivot, if left is smaller than pivot move pointer forward
etc...

Let's just say that before reading the guides I think I knew more about the quicksort algorithm.
 
What guide do you recommend? 

Edit: there's some kind of problem with text formatting, I'm sorry
Angular Material With Bootstrap Responsive Mega Menu
Tags: uiweekly, angular, css, html
Published: 2020-11-26 16:50:13

Megamenu is used to show a different category within the content view. So here we made a responsive Megamenu with the help of bootstrap grid and Angular Material components and CSS/SCSS.

In this element, we used the bootstrap grid, and on the component side, we used angular martial buttons and a toolbar. Here we also modify button and icon classes. Also, we used media quires for making this mega menu fully responsive. We used mat-icons to show this mega menu in on clicks. This is a fully responsive element for mobile and tablet views.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/angular-material-with-bootstrap-responsive-mega-menu/)
Tech is your bestie
Tags: newbie, programming, impostor, coding
Published: 2020-11-26 16:46:39

#### A guide to getting comfortable in tech and overcoming impostor syndrome

<br>
Starting in tech is usually exciting, the fact that you just discovered, that you can do more with your computer or phone than you think gives you the trills, this makes you relate to quote by Nikola Tesla

> I do not think there is any thrill that can go through the human heart like that felt by the inventor as he sees some creation of the brain unfolding to success. Such emotions make a man forget food, sleep, friends, love, everything.

 but as time goes by you get involved with more people in the developer community, and you discover this vast ocean of knowledge, this makes you happy, but at the same time, you feel that you just know only a drop of knowledge from that ocean compared to other programmers you see out there and it frightens you and makes you feel like you don't belong here.

this is pretty normal for everybody, but one thing I realized was that, I was just beginning my journey, you are just beginning your journey, those that are here before us, started from somewhere and there was a time they felt left out too, and if we look back we will discover that we have made great progress although it seams little, 

from knowing what HTML means to playing around with javascript framework and knowing how to use API's its crazy,

 but just know that you have come a long way, and some people are currently where you started, the best thing to do is to continue exploring that ocean of knowledge and enjoy doing it because that's what is important.

> P.s always seek help from those above you


**appreciations:**

<span>Photo by <a href="https://unsplash.com/@fossy?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Fab Lentz</a> on <a href="https://unsplash.com/s/photos/inspiration?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>


<span>OG Photo by <a href="https://unsplash.com/@emmamatthews?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Emma Matthews Digital Content Production</a> on <a href="https://unsplash.com/s/photos/inspiration?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>


<span>Cover Photo by <a href="https://unsplash.com/@drew_beamer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Drew Beamer</a> on <a href="https://unsplash.com/s/photos/inspiration?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Key Takeaways หลังจากเขียน Elixir มา 3 เดือน
Tags: elixir
Published: 2020-11-26 16:40:23

* Elixir เป็น Functional Language ก็จริง แต่ไม่ได้เป็น pure function แบบ Haskell คือฟังก์ชันมี side effect ได้ แต่การจัดการ side effect ของ Elixir ต่างออกไปจากภาษาอื่น
* ต้องคิดเรื่อง Data transformation มากกว่าเรื่อง Function composition คือถ้าเป็น pure function แบบ Haskell เนี่ย ส่วนใหญ่ต้องคิดว่าเราจะ compose ฟังก์ชันยังไง เพื่อให้ได้กลไกทำงานตามที่ต้องการ ในขณะที่ เวลาใช้งาน Elixir เราต้องคิดแต่ละขั้นตอน ที่เราจะเรียกฟังก์ชันว่า Data เราจะถูก transform ไปยังไงในแต่ละขั้นตอน
* เพื่อส่งเสริมให้คิดและออกแบบการทำงานโดยคิดถึงเรื่อง Data transformation ให้มากที่สุด ดังนั้น Elixir จึงไม่มี mutable variable แต่ตัวแปรเป็นแค่ชื่อที่ binding ไปหา data ที่ไม่สามารถ mutate อะไรได้เอง แต่ต้องอาศัย function เพื่อ transform ไปเป็น data แบบใหม่
* ผลัก Side Effect ต่างๆออกไปเป็น process ทีนี้พอ function นั้นเน้นเรื่อง data transformation แล้วจะออกแบบระบบที่ต้องการให้มี state หรือยุ่งกับ IO กับ Network ได้ยังไงนั้น สำหรับ Elixir เลือกที่จะทำให้สิ่งที่ต้องการ state, IO หรือ Network แยกออกเป็น long live process ใหม่ แล้วค่อยคุยกันผ่าน message ในเมื่อเป็น process ก็ทำให้มี state ได้ ระบบ IO ก็คุยกันผ่านการส่ง message หา process ที่ควบคุม state ของ IO อยู่ สำหรับ Network ก็เช่นกัน
* OTP Component ต่างๆแท้จริงแล้วถูกสร้างด้วย Process จากที่ได้ลองไปแงะโค้ดของ Application, Supervisor, GenServer ดูแล้ว กลไกพวกนี้จริงๆแล้วก็คือ Process นั่นเอง ที่ถูกออกแบบ pattern การสื่อสารกัน การ Link process การ Monitor process เอาไว้ให้แล้ว เราแค่ implements ส่วน callback function ตามที่ต้องการ
* Macro คือ AST transformation พอเข้าใจ Macro แล้วก็ไม่ได้ยากอะไร มันคือฟังก์ชันที่จะ transform AST จากแบบหนึ่ง ไปเป็นอีกแบบ หนึ่ง ซึ่งสำหรับ Elixir AST นั้นก็อยู่ในรูปแบบ Data structure พื้นฐานของ Elixir เองด้วย สุดท้ายแล้ว compiler ก็จะ compile AST เป็น beam ให้อีกที
Fixed element on scroll past
Published: 2020-11-26 16:38:09

Hi people! 

I hope everyone is well. 

I have a coding issue and could really do with some help...

I have a page with a fixed top bar and a section menu that fixes to the bottom of the viewport on small devices and at the top, below the top bar, on devices with viewports wider than 1080px.

There's also an element at a certain point down the page that when the user scrolls past it, it fixes to the top of the viewport.

I've managed to get all of this to work but the issue is that I cannot seem to adjust the distance at which the element fixes from the top of the viewport. In other words it needs to be fixed at top: 75px on screens less than 1080px and top: 140px on screens larger than 1080px.

This is to cater for the fact that the section menu is either fixed at the bottom of the viewport on mobile and below the top bar on desktop.

I've created a minimal demo in codepen to demonstrate this where I have placed the required javascript for the main functions within a match media query, in an attempt to make this top adjustment.

However, as you will see, it simply applies the highest setting (140px) which results in a gap between the top bar and the fixed element on smaller screens.

Here's the codepen:

https://codepen.io/creativezest/pen/wvzvJdp

I'd really appreciate any help at all. 

Many thanks in advance. 

Marc
Code Stories: Introduction
Tags: algorithms, computerscience, programming
Published: 2020-11-26 16:37:55

> ***If you can't explain it simply, you don't understand it well.***

Computer Science is often seen as an esoteric discipline. Most of the learners approach it in a convoluted fashion. You hear complex mathematical jargon thrown around in corridors. On top of that Pop culture left no stone unturned to depict Programming as a niche skill possessed by socially anxious(awkward) individuals.

However, I can't blame them entirely. The complexity of a subject depends on a variety of things like:

* _Are you exposed to similar branches of knowledge?_
* _What do you want to achieve by studying it?_
* _How much time & interest do you have?_
* _How do you plan to approach the subject?_

Often learners skip the part where they honestly answer these questions. This leads to all kinds of problems. 
It ultimately results in their dry outlook towards a rather succulent and creative branch of knowledge.

Being a Computer Science graduate, I can assure you, things are not as difficult as they look like. Sure, they require novel thinking and good problem-solving skills. But like I said, these are skills and can be developed.

Therefore today, I am starting a series of articles that will take a programming problem and deconstruct it into intuitive puzzles.

You will see, how typical problems can be solved without any complex mumbo-jumbo if we ask ourselves the _right questions_ and approach them _systematically_.

_In the coming series of essays, we will follow a consistent structure:_

* **The Problem** :thinking:
* **The Strategy** :bulb:
* **The Code** :tada:

We will start with a detailed problem statement and gradually proceed towards the solution by building upon _existing knowledge_ and _intuition_. Towards the end, we will code that solution away.

I am a big fan of ***community learning***. When you learn together, it leads to an understanding that is beyond the realm of an isolated study session. 
The best way to achieve this is to share your learnings with the community that helped you grow.

_I strongly feel that these essays will rekindle your curiosity and soon you will see how fun problem solving is._

> The journey of **thousand** commits begins with a single **init** :confetti_ball:

***
>_If you liked this post, you can find similar content by:_

>Connecting on **Twitter**: [@abshekha] (https://twitter.com/abshekha) :dog:

>Connecting on **LinkedIn**: [abhimanyubitsgoa](https://www.linkedin.com/in/abhimanyubitsgoa/) :panda_face:

>Visiting my **website**: [https://abhimanyutimes.com](https://abhimanyutimes.com) :bear:
***

Thanks for reading!
The configuration file now needs a secret passphrase (blowfish_secret).
Published: 2020-11-26 16:35:58

There are a couple of things you must consider while installing phpMyAdmin to manage MYSQL. You may receive some errors if you do not complete all the prerequisites but they are easy to resolve. The first error probably you will receive is
#Error:  

“The configuration file now needs a secret passphrase (blowfish_secret)”.

This can be resolved by copying the sample configuration file to the correct name and make small modifications.
##Copy sample configuration file to real configuration file:

You need to edit the line and add a blow_fish secret. For this purpose, you can use an online blowfish_secret variables generator. The online generator will output 36 to 46 characters. The output includes lowercase letters, uppercase letters, numbers, and symbols. [Read more.](https://www.kodlogs.com/blog/172/configuration-file-needs-secret-passphrase-blowfish_secret)

###Update the blowfish_secret
React Hook, to copy?
Tags: react, javascript, vue, app
Published: 2020-11-26 16:31:19

im trying to make a react hook to copy a "snippet" of code that ill have created, but, how do I make that happen?

function About() {
    const [copy, setcopy] = useState(document.getElementsByClassName(
        document.getElementById("test")
    ))
    

    return (
        <div>
            <h1 className="test">ABOUT PAGE</h1>
            <input id="input" type="text"/>
            <button id="copy">Copy</button>
        </div>
    )
}

export default About
New webinar: Introducing Caramel - OCaml on the BEAM
Published: 2020-11-26 16:26:04

---
title: New webinar: Introducing Caramel - OCaml on the BEAM
published: true
description: Webinar announcement for an ambitious project that combines the best of OCaml and Erlang. 
tags: 
//cover_image: https://i.imgur.com/vJg6xCw.png
---
New webinar: Hear from the creator of Caramel, Leandro Ostera. He'll demonstrate the benefits of running OCaml on the BEAM, and the ambitious roadmap that allows developers to make the most of Erlang's runtime and error handling alongside OCaml's type-checker. Register at [https://www2.erlang-solutions.com/webinar-registration-2](https://www2.erlang-solutions.com/webinar-registration-2)
Need Suggestion for IDE or text editors for Android
Tags: help, discuss, webdev
Published: 2020-11-26 16:12:40

Hello 👋 ,
 I recently bought an LG G8x which has dual screens (of which either can be used as a 6.4 Inch Touch keyboard) and runs various apps like Chrome in Widescreen (full display combining both screens with a gap in-between kind of useful in reading or writing text otherwise for video consumption useless).
I have used gitpod with the widescreen and a Bluetooth keyboard works great but kind of janky.
Please suggest any IDEs or text editors that run on android and can run landscape.
Main development would be web techs like Js, Html, Python . And with git for version control.
Nuxt Content custom markdown block
Tags: nuxt, vue, nuxtcontent, nuxthooks
Published: 2020-11-26 16:06:15

---
title: Nuxt Content custom markdown block
published: true
description: Handling/parsing a custom markdown block within frontmatter
tags: 
- nuxt
- vue
- nuxtcontent
- nuxthooks
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/he3i7lkzjd0fu2zsy509.jpg
---

During a [live-stream on 25th November 2020](https://www.twitch.tv/kylewelsby) I was tackling a feature on my project where I have Markdown within front-matter data I would like to render to the page correctly.

{% twitch LightBlightedMomTheRinger %}

Here I'm quickly sharing some findings after sleeping on the problem and finding an elegant solution to the problem. 

tl;dr

> Utilise the `content:file:beforeInsert` hook in `nuxt.config.js`.

## Setup

Assuming you've got a nuxt.js project with `@nuxt/content` module installed

It is expected you'll have a content file like the following, containing Markdown within a property. 

```yaml
# content/home.md
---
title: Hello World
specialNotice: |
  This is **Special Notice** to 
  everyone using 
  [Markdown](https://en.wikipedia.org/wiki/Markdown).
---
```

## Configuration

With the above content, we can see the `specialNotice` which is formatted using Markdown.  So we're going to pre-parse this field and make it accessible for the `<nuxt-content />` helper to render the HTML output.

Within `nuxt.config.js` we're going to add into the `hook` section a [`content:file:beforeInsert`](https://content.nuxtjs.org/advanced#contentfilebeforeinsert) to convert the Markdown content to JSON <abbr title="Abstract Tree Syntax">ATS</abbr> which is like a node tree that can be rendered to the page. 

```javascript
// nuxt.config.js
export default {
  // ...
  hooks: {
    // Doc: https://content.nuxtjs.org/advanced#contentfilebeforeinsert
    'content:file:beforeInsert': async (document, database) => {
      // search for markdown containing 
      // only `specialNotice` property.
      if (document.extension === '.md' && 
          document.specialNotice) { 
        // Replace Markdown string in database 
        // with the JSON ATS version
        document.specialNotice = await database 
          .markdown
          .toJSON(document.specialNotice) 
      }
    }
  },
  // ...
}
```

## Displaying

```html
<!-- pages/index.vue -->
<template>
  <div>
    <h1>{{ document.title }}</h1>
    <nuxt-content :document="document.specialNotice" />
  </div>
</template>
<script>
export default {
  async asyncData ({ $content }) {
    const document = await $content('home').fetch()
    return {
      document
    }
  }
}
</script>
```

There we have it; Your page should contain the special notice rendered in HTML.

Follow me on [Twitch](https://twitch.tv/kylewelsby), [YouTube](https://www.youtube.com/kylewelsby) and [Twitter](https://twitter.com/halfcube) for regular live-streams and chat.