teleren/devto huggingface dataset:
WP Snippet #009 Custom Gutenberg font sizes
Tags: wordpress, webdev, javascript
Published: 2020-03-11 18:53:08

---
title: WP Snippet #009 Custom Gutenberg font sizes
published: true
description: A tutorial on how to add WordPress theme support for editor-font-sizes, and set custom font-sizes for the Gutenberg editor. 
canonical_url: https://since1979.dev/wp-snippet-002-changing-the-gutenberg-font-sizes/
cover_image: https://since1979.dev/wp-content/uploads/2019/12/wp-snippet-009-custom-gutenberg-font-sizes.jpg
tags: wordpress, webdev, javascript
---
[Originally posted on my website on March 11th 2020](https://since1979.dev/wp-snippet-002-changing-the-gutenberg-font-sizes/)

### How to change the Gutenberg font sizes?

With the code snippet below we add WordPress theme support for editor-font-sizes, and set our own custom font sizes for the Gutenberg editor.

{% gist https://gist.github.com/vanaf1979/697ec59c272c14821981cce3660cd999 %}

With the code above we add an action to the *[after_setup_theme](https://developer.wordpress.org/reference/hooks/after_setup_theme/)* hook and register a callback function called *set_editor_font_sizes*.

Inside the *set_editor_font_sizes* function we use the *[add_theme_support](https://developer.wordpress.org/reference/functions/add_theme_support/)* function to enable the *editor-font-sizes* theme support. As the second argument we pass an array containing arrays defining our custom font-sizes.

Each sub-array contains three key/value pairs. namely:

-   **$name**: The name we want to display inside the editor. Note that we use the *__()* function to make these names translatable.
-   **$size**: The actual font size.
-   **$slug**: A unique slug that we can use in our Css to change the font size.

#### Using the font sizes in our Css

To actually make the font sizes work inside of our theme we have to add a bit of Css for each font size like shown below:

{% gist https://gist.github.com/vanaf1979/99bc8e608ad56487b75b1602929b57e6 %}

### Disable the custom color selector

The code above still leave our users the ability to use the custom font size inputs to make their own font sizes. So to be save we can also disable this feature with the code below:

{% gist https://gist.github.com/vanaf1979/970521c3f6c874023e785523533f3040 %}

With the code above we add another action to the *[after_setup_theme](https://developer.wordpress.org/reference/hooks/after_setup_theme/)* hook and register a callback function called *disable_custom_font_sizes*.

Inside the *disable_custom_font_sizes* function we use the *add_theme_support* function again but this time we add support for *disable_custom_font_sizes*. (A bit counter intuitive, but it is what it is.)

This removes the custom font sizes inputs from the editor.

#### Follow
Found this post helpful? Follow me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading**
Windows vs linux?
Tags: webdev, discuss
Published: 2020-03-11 18:36:44

---
title: Windows vs linux?
published: True
Description: What is a better development environment?
tags: #webdev 
---

So I wanted to create a short post here and get some opinions from the community. Since I have gotten back to the web dev game I have been looking into what was a better OS to make my workflow faster. 

I originally used to use a mac and have found that it was great for my development environment. But I have since moved back to windows and have found that well it lacks a lot of stuff. And is a huge pain when it comes to the command line and being able to install things.

Which brings me to my topic I have started using Linux on my laptop as a test. As I have found that the command line and the ability to install things on it is just night and day. For setting up a development environment. But It comes with the drawback of having to go the extra mile of running wine to use certain windows programs ect. 

So my question to you all is which do you prefer. Also is there a way of setting up a fast windows environment to get a similar cmd?
Use React Context as a Custom Hook
Tags: react, frontend, motivation, codequality
Published: 2020-03-11 18:29:37

*This is a pretty fast look at a workaround to combine react context and hooks*

###__React Context__

React Context is simply great, its mas have some downfalls (performance related to components unnecessary re-renders), but overall is amazing, let create a simple context to start

```javascript
 import React from 'react';

 let MyContext;
 let { Provider } = (MyContext = React.createContext())

 function MyProvider({children}) { 
  return <Provider value={{...}}>{children}</Provider>
 }

 export {MyContext, MyProvider}

```

Now you can import *MyProvider* at the component or components you want to use these *provider values* with, and wrap the component with it.

Inside those components, you typically can access those values by importing the context and destructuring the value there.

```javascript
 import React from 'react'

 import {MyContext} from 'context'
 
 function component() {
  const {...values} = React.useContext(MyContext)
  return ( ... )
 }
```

###__React Hooks to the rescue__

Instead of exporting MyContext and later use it with *useContext* hook, let's create a custom hook inside the context file that returns inside the * React useContext* hook using native react hook *MyContext* as an argument, just like this, and let's change a little the exporting methods to use naming and default.

```javascript
 import React from 'react';

 let MyContext;
 let { Provider } = (MyContext = React.createContext())
 // new line custom hook
 export const useMyContext = () => React.useContext(MyContext)

 export default function MyProvider({children}) { 
  return <Provider value={{...}}>{children}</Provider>
 }

```

Now you can keep using your provider like before (just import it default), but on the component, you can avoid destructuring from useContext(MyContext) and simply do this

```javascript
 import React from 'react'

 import {useMyContext} from 'context'
 
 function component() {
  // a more semantic way to do it!!!
  const {...values} = useMyContext()
  return ( ... )
 }
```

###__Final thoughts__

That's it, I hope this "syntactic sugar" helps you to write a better code on your next project.

*Photo by [Negative Space, at Pexels](https://www.pexels.com/@negativespace)*
Fetch multiple API requests in vanilla JS
Tags: javascript
Published: 2020-03-11 18:24:15

It is very common in Javascript to fetch some data from an API. But what if you want to fetch many requests and only perform actions when they are all are resolved? In this article I will explain briefly how to fetch data from an API in vanilla JS (ES6) and also how to handle MANY API requests.

First, let's start with a simple API fetch. I will wrap my function in an IIFE and only expose the init method, so that from the outside the function can not be controlled and our variables and methods our private.

Make sure to set the function to asynchronous by adding the `async` keyword. Also always wrap your fetches inside a try-catch block to avoid breaking your application and detecting what went wrong.

Also notice how I'm storing constant values in a seperate private object that we can access only inside our myApp function. Always try to structure data and keep it modular.


``` javascript
const myApp = (function() {
    const constants = {
        data: document.getElementById('data')
    }
    
    const fetchData = async () => {
        constants.data.innerText = 'fetching data...';
        try {
            const response = await fetch("https://pokeapi.co/api/v2/pokemon/1")
                             .then(response => response.json());
          data.innerText = response.name;
        } catch (error) {
            console.error(error);
        }
    }

    const init = () => {
        fetchData();
    }

    return {
        init: init
    }
})();

<div id="data"></div>

myApp.init();

```

Not too bad, right?

Now what if we want to fetch data from hundreds of API request and wait until they are all finished? We will do this using Promise.all() which will loop over an array of urls, in this case 25:


``` javascript
const myApp = (function() {  
    const fetchData = async () => {

        let urls = [];
        for (let i = 0; i < 25; i++) {
           urls.push('https://pokeapi.co/api/v2/pokemon/');
        }

        try {
            const response = Promise.all(urls.map((url, i) =>
                  fetch(url+i).then(resp => resp.json())
              )).then(json=> {
                  console.log(json)
              })
        } catch (error) {
            console.error(error);
        }
    }

    const init = () => {
        fetchData();
    }

    return {
        init: init
    }
})();

myApp.init();
```

Cool, right? Hope you've learned something, have fun fetching data from API's!

Here is a free list of API's you can play around with: https://apilist.fun/
Axios, Vue, Laravel and External Api  (Fixed)
Published: 2020-03-11 17:59:58

---
title: Axios, Vue, Laravel and External Api  (Fixed)
published: true
description: CORS problem
tags: 
---
I like to know why using fetch works and using axos gives me a CORS error. 
Im only using vue for fetching the data, i dont have any api from laravel, i just have a call from a simple componen on the mounted method and call it from the internal method like this : 
mounted() {
          this.fetch(); 
        },
        methods:{
            fetch(){
                axios.get('/search/shows?q=bluebook')
                .then(function (result){
                    console.log();
                })
}
        }

if i do this, i got a cors error , if i switch from axios to fetch , works without a problem. 

In the bootstrap.js file i have this: 

window.axios.defaults.baseURL = 'http://api.tvmaze.com';
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
window.axios.defaults.headers.common['Content-Type'] = 'text/plain';
window.axios.defaults.headers.common['Access-Control-Request-Method'] = '*';

also i tested using crossOrigin : true inside the get function but i got the same error.

there is a bug in axios? in laravel? im missing something here? 

Thanks
Axios, Vue, Laravel and External Api 
Published: 2020-03-11 17:59:56

---
title: Axios, Vue, Laravel and External Api 
published: true
description: CORS problem
tags: 
---
I like to know why using fetch works and using axos gives me a CORS error. 
Im only using vue for fetching the data, i dont have any api from laravel, i just have a call from a simple componen on the mounted method and call it from the internal method like this : 
mounted() {
          this.fetch(); 
        },
        methods:{
            fetch(){
                axios.get('/search/shows?q=bluebook')
                .then(function (result){
                    console.log();
                })
}
        }

if i do this, i got a cors error , if i switch from axios to fetch , works without a problem. 

In the bootstrap.js file i have this: 

window.axios.defaults.baseURL = 'http://api.tvmaze.com';
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
window.axios.defaults.headers.common['Content-Type'] = 'text/plain';
window.axios.defaults.headers.common['Access-Control-Request-Method'] = '*';

also i tested using crossOrigin : true inside the get function but i got the same error.

there is a bug in axios? in laravel? im missing something here? 

Thanks
Intro to Web Development
Tags: webdev, beginners
Published: 2020-03-11 17:52:59


>“There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for."

>Milton Glaser

Hello World 👋👋👋

This blog is basically an intro to everything you need to know about Web development.

So let's begin with breaking down this term into pieces and take a look at their definitions from the Internet.

**WEB**

>World Wide Web (Web, WWW or W3) is the part of the Internet that contains *pages* of information connected to each other. Each page can be a combination of text, pictures, audio clips, video clips, animations, and other stuff.

The *pages* referred here are termed as Web pages. And a collection of these pages is called a Website.

**DEVELOPMENT**

>Development is defined as the process of growth or new information or an event.

Combining both we get -

**WEB DEVELOPMENT**
>"Web development refers to building, creating, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management." -  techterms.com 

And the people like us who are engaged in Web Development are termed as **Web developers**. Let's take a look at what a developer means -  
>A *developer* is an individual that builds and creates software and applications. He or she writes, debugs and executes the source code of a software application.

---


Web development can be broken down into three layers: client-side coding (frontend), server-side coding (backend) and database technology.

**Client-side** coding has mostly to do with the user interface, with which the user interacts.

**Server-side** coding is responsible for storing and organizing data, and ensuring that everything on the client-side runs smoothly.

The **database** contains all the files and content that are necessary for a website to function, storing it in such a way that makes it easy to retrieve, organize, edit and save.

>**To summarize**: the frontend, backend, and database technology all work together to build and run a fully functional website, and these three layers form the foundation of web development.

---

Also, we have mainly three types of web developers frontend developer, backend developer, and full-stack developer.

A **frontend developer** is one who codes the frontend part i.e. the part which a user sees and interacts with.

A **backend developer** is one who develops an application that supports the front-end. It should also provide support, security, and content management.

A **full-stack web developer** is one who can develop both client software (frontend) and server software (backend).

---

In the next blog, I'm gonna talk more about types of developers, their roles, minimum programming languages to know for them and much more.

So stay tuned.😊😊😊 

Happy coding.💻
Access to 75+ tech jobs in progressive politics
Tags: jobs, career
Published: 2020-03-11 17:41:05

In order to win in 2020, progressives need unprecedented mobilization. The only way to scale that mobilization is through technology and people power. We need the best and the brightest in technology to join the movement – and we’re developing a tool to help you find a job in progressive tech.

All Hands is a tech talent matchmaker service, functioning as a curated resume bank and jobs board. We handpick open product + engineering roles with our partner organizations in campaigning, advocacy, political tech, and beyond, saving candidates the time of searching for their next opportunity in the progressive space. Where there’s mutual interest, we facilitate introductions, and we let hiring organizations take it from there. Think of us as tech talent matchmakers for democracy.

Are you in product + engineering and interested in making the switch to progressive tech, or do you know someone who might be? 

Apply here to join the All Hands talent pool: https://all-hands.us

We’ll be giving special priority to applicants in Chicago, Austin, and DC - so feel free to pass this link to your friends in those areas.
Introduction to RISC V and Assembly Language for Beginners
Tags: riscv, beginners, tutorial, assembly
Published: 2020-03-11 17:40:18

---
title: Introduction to RISC V and Assembly Language for Beginners
published: true
description: Learn what RISC V ISA is about and develop your first program in assembly language
tags: riscv, beginners, tutorial, assembly
---

{% youtube KBvAKHsHBW4 %}

## Learn what RISC V is, and basic assembly language in 15 minutes

This is a gentle introduction to the RISC V open source instruction set architecture (ISA) for beginners.

I covered how RISC V started, what the ISA is about, how assembly instructions work.

The 15 minute session ends with a simple applied lab that you can conduct on a PC at home.

At Tech Buzz I share quick videos and articles that get you up to speed on a new industrial subject, and enable you to build things.

If you are interested in industrial tutorials feel free to check out [Tech Buzz](https://getbuzz.io)

If people are interested I will produce more of this series. Join the RISCV course community [here](https://getbuzz.io/o/introduction-to-risc-v/u/join-open-access)


Cheers!
Bahadir
Django One-Liners
Tags: python, django, bash
Published: 2020-03-11 17:33:00

# Introduction

Writing one liners are cool. Let's try some.

## Installations and configuration

`pip install devtools==0.7.0`
`pip install -U django==3.2.*`

` mkdir myproject && cd myproject && django-admin startproject config .`

Also, you did the migration
` python manage.py migrate `

# Hello world

`python -c "print('hello world')"`

# Another example is as follows,

`python -c "from datetime import datetime; print(datetime.now())"`

 # Now lets take looping example,

`python -c "for i in range(10): print(f'{i} x {7} = {(i+1)*7}')"`

 # Now let's write this to a file

`python -c "with open('myfile.txt','w') as myfile: myfile.write('Hello world')"`

`myfile.txt` is created in same folder you run above command.

# Django one liners

Print Timezone Now time with Django's default timezone
`python manage.py shell -c "from django.utils import timezone; print(timezone.now())"`


Create a new admin user with username and password
`python manage.py shell -c "from django.contrib.auth import get_user_model; User=get_user_model(); a=User.objects.create(username='a'); a.set_password('a'); a.is_superuser=True; a.is_staff=True; a.save()"`


Print a query list values
`python manage.py shell -c "from django.contrib.auth import get_user_model; User=get_user_model(); print(User.objects.values_list())"`

Print user count
`python manage.py shell -c  "from django.contrib.auth import get_user_model; User=get_user_model(); print(User.objects.count())"`

Tested on Debian 11, Python 3.6

# Conclusion

One-liners are awesome. By using these one-liners. You can save some time.
What do you get when you pair xstate with lit-html?
Tags: javascript, discuss
Published: 2020-03-11 17:19:07

I am writing a game of Risk (you know the board game) and I need a UI, xstate already powers the actor model that runs the UI and Server in a beautiful logical chart that fires up the http server, then SSE, sends messages to browser actors which then sends things through the xstate actor model on the front end.

Then we add polymers new html rendering fantastic thing, lit-html and hey presto a state driven UI that is sharing the same paradigms as the server (so much so that Actors front-end and backend all live in the same directory). It's functional style is so flexible and I can react to a multitude of events, redrawing only what I need to. It's super fast and surprisingly Dom driven. The only compiling is done because I like typescript, but even the front end of that uses esmodules. It's akin to traveling back in time then fast forwarding on an alternative timeline where react had never existed.

I would highly recommend this stack, I can't emphasize this enough. Try the ummm.. LXS™️ stack especially in isomorphic development.
Hello world/Who am i?
Tags: introduction
Published: 2020-03-07 08:44:16

You can find me mainly here in [dev.to](https://dev.to/antonioortizpola) and [stackoverflow](https://stackoverflow.com/users/1402237/rekiem87) or [LinkedIn](https://www.linkedin.com/in/antonioortizpola/).

I have also just started a video series about [systems architecture](https://www.youtube.com/watch?v=pgNveoDUi_w)!!! (only in Spanish for now).

My main language is Spanish, but i want to practice my English, so I apologize if I make some mistakes writing this, if you find any, you can tell me in the comments so I can amend it.

# Some more history

My name is Antonio Ortiz Pola, a computer enthusiast since the 00’s, graduated from “Tecnológico de Morelia” as computational systems engineer. Since then I have been able to participate in several projects as developer and architect.

My motivation for this blog is to return some of the knowledge I have been able to acquire through the years. My origins are humble, but thanks to something as simple as a computer and an Internet connection, my life has changed forever, not only as a window to other worlds and people, but to the way it has contributed to my knowledge base and skills development.

I have always loved sharing knowledge, even as a OSUM Leader (Open Source University Meetup), a Sun initiative to spread open source usage and community. Sadly, Sun was experiencing bad times as it was preparing to be bought by oracle, so the initiative was killed.

{% youtube tcV9lIsTvAA %}

Thanks to all the people who take the time to write posts, answer questions, writing books, and almost everything for free, just for sharing. I know I am lucky to live in a world where the open source exists, I love the culture of sharing building blocks of “things”, like Legos, many libraries have been working as building blocks for the software I make.
Friday Night Deploys: #14 Be The G.O.A.T. When You're Remote
Tags: podcast, jokes, webdev, career
Published: 2020-03-11 17:10:48

## Quick Note
With recent world events, it seems like the topic of remote work is becoming much more important. Since the recording of this episode more conferences and tradeshows have been canceled/gone digital and many companies are now moving to remote work in response. We hope everyone remains cautious and healthy during this time and transition smoothly to remote work as needed!

## Intro
Last week the DevPlebs talk about: Keith not being as anti-social as he seems! Building up bad karma from being negative! How Mark Zuckerberg would kill his employees! The torture scene from The Social Network! Phil's bizarre lying story! Getting out of homework! Jay Chesterman's large muscles & great skateboarding skills! Phil hiding from his teacher under a table! Teaching your children to have a lack of accountability! Being locked out of the brand Twitter account! Trap country! Train germs! Gym sweat! Washing your hands for the first time! Keith`s Liam Neeson impression! Office mold! Trust issues! Trying really hard to not say something bad about someone! The perils of micromanagement! Touques (or beanies, depending on where you're from)! Giving unwarranted nutritional advice! Staying hydrated! Our credentials as water doctors! Mouthguard science!

## Listen to The Full Episode!
{% spotify spotify:episode:3H6YaTkjCmIS2ahi4OdvFA%}

_or [listen directly on spotify](https://open.spotify.com/episode/3H6YaTkjCmIS2ahi4OdvFA)_

**We're also on...**
**Apple Podcasts:** https://podcasts.apple.com/us/podcast/friday-night-deploys/id1485252900

**Google Music Podcasts:** https://play.google.com/music/m/Dmlqa2m6xjbcxlq64zvnc6ah4fi?t=14_Be_The_GOAT_When_Youre_Remote-Friday_Night_Deploys

**Our Website:** https://www.devplebs.tech/friday-night-deploys/14-be-the-goat-when-youre-remote/

## Get In Touch With Us!
Has your work gone fully remote yet? Do you have any remote work tips? If you would like to share for us to read out in the next episode you can reach us at the following...

**Twitter:** [@DevPlebs](https://twitter.com/DevPlebs).
**Email:** deadbeats@devplebs.tech

## Follow Our Twitters... If You Want!
[DevPlebs](https://twitter.com/DevPlebs).
[Keith Brewster](https://twitter.com/brewsterbhg).
[Phil Tietjen](https://twitter.com/phizzard).

You can also ask questions or give us some feedback about the show!