teleren/devto huggingface dataset:
Frontend Development Trainers
Tags: html, css, career, webdev
Published: 2020-07-26 07:52:16

We are looking for Front-End Development trainers who can build video courses. Get in touch if you enjoy teaching and have industry experience. We have a part-time role that we promise would be a good fit for you. People who have already created video tutorials or screencasts will be preferred. Please Comment or DM to discuss more.
Navigating through the Adventure
Published: 2020-08-01 16:08:47

Hey there,
Here is the summary of my last 2 weeks in JULY.

Goal:
The goal for this week was to add the dynamic URI's to the app and add some roles to the system. Along with that to add small features like `back` navigation.

Brief:
Initially, I  updated the structure of the project according to community inputs. Later, Some UI animations were fixed/removed. 

Some features added during this period are - 

✔️ URI based rendering.
✔️ Navigational buttons and permalink button.
✔️ Jump feature to switch stages dynamically.
✔️ External links handling.
✔️ pathMap roles and paths:
      * Player Role.
      * Artist Role.
      * Basic contribution path.
      * Documentation and i18 Role.


Links:
Pull Requests -

https://github.com/MovingBlocks/AdventureSite/pull/10
https://github.com/MovingBlocks/AdventureSite/pull/11
https://github.com/MovingBlocks/AdventureSite/pull/12
https://github.com/MovingBlocks/AdventureSite/pull/13
https://github.com/MovingBlocks/AdventureSite/pull/14
https://github.com/MovingBlocks/AdventureSite/pull/15
https://github.com/MovingBlocks/AdventureSite/pull/16

Post Type: Update.
Regards,
Prathamesh (TheShubham99)

$ Ctrl+z
program exited with exit code 0 (0x0)
Day 16: One line
Tags: 100daysofcode, javascript
Published: 2020-08-01 20:29:26

Only one line made it to Github today. A media query to handle responsiveness.  I'm obsessed with the green dots on github 😅 so i had to salvage the 16 day streak.😎 Meanwhile, I've been reading on saving form data, the implementation has hit a dead end though but I'll figure it out soon enough.



_Day 16_
Quick go-to Angular API service setup
Tags: angular, webdev, womenintech
Published: 2020-08-02 02:19:19

I've been playing around with the [Deezer API](https://rapidapi.com/deezerdevs/api/deezer-1) and have found that when working with APIs I tend to use the same layout in terms of project structure. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rnoqyn21gpe3qd6ldnlm.png)
  
I always have a pretty simple and generic abstract base service class where contains just 3 methods, purposes being to return individually a item, count and list.

## Base API Service

```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export abstract class BaseApiService<T> {
  baseUrl = 'https://localhost:44331';

  abstract resourceUrl: string;

  constructor(protected httpClient: HttpClient) { }

  getList(url): Observable<T[]> {
    var to = `${this.baseUrl}/${this.resourceUrl}?${url}`;

    console.log(`GET LIST: ${to}`);
    return this.httpClient.get<T[]>(`${to}`);
  }

  get(url): Observable<T> {
    var to = `${this.baseUrl}/${this.resourceUrl}?${url}`;

    console.log(`GET: ${to}`);
    return this.httpClient.get<T>(`${to}`);
  }

  count(url): Observable<T> {
    var to = `${this.baseUrl}/${this.resourceUrl}?${url}`;

    console.log(`COUNT: ${to}`);
    return this.httpClient.get<T>(`${to}`);
  }
}
```
## Deezer Service

I create service classes that extend from my base abstract, again, keeping it simple.

```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BaseApiService } from "./base.api.service";
import { Deezer } from "../models/deezer.model";

@Injectable({
  providedIn: 'root'
})
export class DeezerService extends BaseApiService<Deezer> {
  resourceUrl = 'api/Deezer?searchTerm=';

  constructor(http: HttpClient) {
    super(http);
  }

  getSearchResults(query) {
    return this.getList(query);
  }
}
```
## Component
At component level, I pass in an data if required and call the method from the service.
 ```
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DeezerService } from "../../core/services/deezer.service";

@Component({
  selector: 'app-deezer-search',
  templateUrl: './deezer-search.component.html'
})
export class DeezerSearchComponent implements OnInit { 
  searchResults: any;
  searchForm: FormGroup; 
  
  constructor(private readonly deezerService: DeezerService,
    private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.searchForm = this.formBuilder.group({
      query: ['', Validators.required]
    });
  }

  onSearchSubmit() {
    const query = this.searchForm.value.query;

    this.deezerService.getSearchResults(query).subscribe((data: any) => {
      this.searchResults = data;
    },
      (err) => {
        // handle errors here
      });
  } 
}
```

To note I've omitted irrelevant bits.
Build an app using the Disaster Resiliency Starter Kit
Tags: android, ios, reactnative, tutorial
Published: 2020-08-02 15:58:42

I have published a blog on Medium sharing my experience of conducting a webinar with Here Technologies. Link: https://link.medium.com/dWMAtvD8e8 <a href=https://www.medium.com/@mridulrb target="blank"><img src=https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg alt="mridulrb" height="20" width="20" /></a>
@Azure Mini Fun Bytes: How to create a static web site using blob storage
Tags: azure, storage, beginners
Published: 2020-08-03 14:35:25

I take you through a few real-world problems and find some solutions.  Today, we answer:

**How do I create a static web site using blob storage?** 

Simple websites sometimes need simple solutions to host them. If you have a static website and just need to host some HTML and images, Azure blob storage allows you to easily [enable static web hosting](https://docs.microsoft.com/azure/storage/blobs/storage-blob-static-website-how-to?tabs=azure-portal&WT.mc_id=devto-blog-jagord). You can keep costs low, [customize your URL](https://docs.microsoft.com/azure/storage/blobs/storage-custom-domain-name?tabs=azure-portal&WT.mc_id=devto-blog-jagord), [integrate a Content Delivery Network](https://docs.microsoft.com/azure/storage/blobs/static-website-content-delivery-network?WT.mc_id=devto-blog-jagord) to serve quickly and do so all while ensuring developers can deploy easily.

 {% youtube XZXZPdMfcWw %}

I take questions and give you a start with code and procedure to deploy it.

Follow AzureFunBytes on [Twitter](https://twitter.com/azurefunbytes) and [Twitch](https://www.twitch.tv/azurefunbytes) for updates on future episodes.

Links for you!

[Introduction to the core Azure Storage services](https://docs.microsoft.com/azure/storage/common/storage-introduction?WT.mc_id=devto-blog-jagord)

[What is Azure Blob storage?](https://docs.microsoft.com/azure/storage/blobs/storage-blobs-overview?WT.mc_id=devto-blog-jagord)

[Introduction to Azure managed disks](https://docs.microsoft.com/azure/virtual-machines/windows/managed-disks-overview?WT.mc_id=devto-blog-jagord)

[Use the portal to attach a data disk to a Linux VM](https://docs.microsoft.com/azure/virtual-machines/linux/attach-disk-portal?WT.mc_id=devto-blog-jagord)

Microsoft Learn: [Core Cloud Services - Azure data storage options](https://docs.microsoft.com/en-us/learn/modules/intro-to-data-in-azure/?WT.mc_id=devto-blog-jagord)

Microsoft Learn: [Azure Fundamentals](https://docs.microsoft.com/learn/paths/azure-fundamentals/?WT.mc_id=devto-blog-jagord)

[Microsoft LearnTV](https://docs.microsoft.com/learn/tv/?WT.mc_id=devto-blog-jagord) 24*7 streaming Azure content

[Get $200 in free Azure credit along with 12 months of free services](https://azure.microsoft.com/en-us/free/?WT.mc_id=devto-blog-jagord)
Day 64 : #100DaysofCode - Still Playing Around With OmniAuth
Published: 2020-08-04 02:27:53

Today I learned more about OmniAuth. I mostly played around with it to see if I can use it for various different login techniques. I want to allow the users in future applications that I build to have the ability to log in using Google, Github, or Twitter. I am trying to see if I can master it so it will become second nature when building an application.

Wish me luck!

Sincerely, 
Brittany
LeetCode:125. Valid Palindrome
Tags: leetcode, algorithms, python
Published: 2020-08-07 12:53:34



https://leetcode.com/problems/valid-palindrome/
## Solutions
**step1:** apply .isalnum() on each character for filtering out all the alphanumeric characters in the given string .
**step2:** compare filtered list with the one in reversed order, if they're identical with each other, we got the string with pattern of palindrome

## Submissions
* faster than 98.95%
```
class Solution:
    def isPalindrome(self, s: str) -> bool:
        result=''
        for i in s:
            if i.isalnum():
                result+=i.lower()
        if result==result[::-1]:
            return True
        return False
```
Getting started with tailwindcss
Tags: css, codenewbie, productivity, webdev
Published: 2020-08-04 13:16:47

tailwind is a utility based framework with minimal code which let you focus on the main instead of wasting time on utilities to help your design.

Today i will be talking about tailwind CSS and how you can use it, grab your coffee, hoop on and let's ride.

Tailwind CSS have been around for quit sometimes now and since it's launch it has been gaining popularity more and more, i personally use this for my personal project i work on.

##**Before**
before the launch of tailwindcss many CSS frameworks like **Bootstrap** and **Material UI** have been using predefined component.

In which this libraries reduce the stress of designing all UI from the start and most of this libraries enable users to add their own feature and customize this to their own thirst.

However, this customization most of the time involves overwriting. For example, creating new classes to overwrite the existing styles provided by the library.

this is where tailwindcss comes in

##**Tailwindcss**

Tailwind is utility based CSS framework which focus on utility and it take a lot of work off your head.
with this utility frame work you can build anything in matter of minutes this has utilities like, color, background, margin, padding and so on.

So lets div into examples to see what am talking about.
here is a link to [tailwindcss](https://tailwindcss.com/ "A utility-first CSS framework for rapidly building custom designs")

##**Installation**
unfortunately tailwindcss is not hosted online in which you can just link to your html file but that's where the Syntactic sugar comes in.

all you have to do is to install it via npm in your project then configure the package which tailwindcss has already done for you.

**process**
using `` npm install tailwind.css``
this will automatically install tailwind in your project then you now go to your project folder the create a file ``input.css`` and the other folder ``output.css`` then open ``input.css`` and put the following code

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

now go to your ``package.json`` file and the following code on your script ``input.css -o public/style.css`` that's it welcome to the world of tailwindcss.

## **examples of tailwind utility classes**

| Tailwind class | Css |
| ----------- | ----------- |
| ``.w-1/2``      | `width: 50%`       |
|.w-0 	|width: 0;

you can browse through their website to know more about this utilities

# Conculsion

so far so good we've seen how we can install and work with tailwindcss feel free to checkout my github which can also help you in your way of becoming a good developer.

check it out now !! ***[@binismail](https://github.com/binismail "A design minded software engineer")***

have a lovely day.
Using Defer to improve performance
Tags: defer, javascript
Published: 2020-09-05 08:02:52

---
title: Using Defer to improve performance
published: true
date: 2020-08-03 23:00:00 UTC
tags: defer, javascript
canonical_url: https://www.juanfernandes.uk/blog/using-defer-to-improve-performance/
---

![Using defer to improve website performance](https://dev-to-uploads.s3.amazonaws.com/i/culgj9klhk59xhy7hr49.jpg)

In my last post, [Exploring the benefits of HTTP2](https://www.juanfernandes.uk/blog/exploring-the-benefits-of-http-2/ "Exploring the benefits of HTTP2"), I wrote about removing jQuery and my `global.min.js` files in favour of loading JavaScript on a per component or partial basis, so only when that component is included on a page it then loads the needed JavaScript code and library.

Which lead me to look into Defer in JavaScript as another way to improve performance.

"This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating." - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script "MDN Web Docs")

Since the testimonials slider on my homepage is near the end of the page, I don't need to load the JavaScript right away and since it's not used on every page, it makes sense to only load it where the slider is being used.

I read a few articles on Async and Defer to try and understand the difference between both and which was the correct one to use for the testimonials slider.

So I figured I would just need to add the defer attribute to the `<script>` tag for the TinySlider JavaScript and that would be it...

But I found that doing this, it stopped the slider from working - I'm still learning JavaScript, so you will have to forgive me. I looked at the TinySlider example code I used and realised it was written so it would run as soon as the browser loads that part of the code.

What I needed to do was change the code to only run when the DOM had finished loading and this meant that the HTML code for the slider would have been loaded too.

```
	      <link rel="stylesheet" href="/assets/css/components/slider.css">
          <script src='/assets/js/tiny-slider.js' defer></script>
          <script>
            document.addEventListener("DOMContentLoaded", () => {
              let slider = tns({
                container: '.testimonials__slider',
                items: 1,
                autoHeight: true,
                speed: 400,
                loop: true,
                autoplay: true,
                autoplayButtonOutput: false,
                controls: false,
                autoplayHoverPause: true,
                nav: true,
                navPosition: "bottom",
              });
            });
          </script>

```

***
Schedule Netlify Builds with GitHub Actions
Tags: netlify, static, github, actions
Published: 2020-08-05 19:45:31

I use a [custom static site generator](https://github.com/croaky/blog) to publish my blog. It automatically deploys to Netlify when I merge new articles into my Git repository's `main` branch.

To support a "scheduled article" feature, I have configured a [GitHub Actions scheduled workflow](https://help.github.com/en/actions/reference/workflow-syntax-for-github-actions#onschedule):

```yaml
name: daily publish

on:
  schedule:
    - cron: "0 0 * * *" # every day at midnight UTC

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Trigger Netlify build
        shell: bash
        env:
          NETLIFY_BUILD_HOOK: ${{ secrets.NETLIFY_BUILD_HOOK }}
        run: curl -X POST -d {} "$NETLIFY_BUILD_HOOK"
```

Every day at midnight UTC, GitHub runs the workflow, deploying the site using a [Netlify build hook](https://docs.netlify.com/configure-builds/build-hooks/). The build hook is a URL which I've stored as a [GitHub encrypted secret](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets#using-encrypted-secrets-in-a-workflow).

When there are articles whose scheduled date matches the new UTC date, they are automatically published by this workflow.
Creating a Testimonials Section with a Slideshow Using Pure HTML, CSS and JavaScript (video tutorial)
Tags: html, css, javascript, webdev
Published: 2020-08-04 17:56:35

Testimonials are a great way of building trust to your potential clients. Adding them to your website can drastically improve your products sales or receive more gigs. In the following video tutorial I will show you how you can create a cool testimonials section with a slideshow for your website from scratch.

Starter Files and Source Code: https://github.com/chaoocharles/testimonials-with-slideshow

I'm on twitter: https://twitter.com/ChaooCharles

{% youtube tVDzUskKcSA %}
Resilience and rest
Tags: html, webdev, womenintech, 100daysofcode
Published: 2020-08-04 23:28:43

Hoje é o Dia 006, mas também vou falar do dia 005, calma gente.

**Dia 005**
Ontem eu decidi não postar nada porque eu estava **extremamente** cansada, muito mais do que no outro dia que eu reclamei de cansaço. 
Eu mal prestei atenção nas aulas que eu estava assistindo e foi basicamente só isso que eu fiz ontem. Eu assisti algumas aulas e acertei a edentação do meu código até aqui, além disso só consegui estudar meia hora, então não achei que valia a pena postar sobre, porém tem algo que vale a pena sobre isso e é o que eu vou falar agora.
**Resiliência**
Gente, eu levo extremamente a sério tudo que eu faço e ainda assim, pra mim, é difícil me manter resiliente em vários aspectos. Estudar, embora eu goste bastante, acaba sendo um dele.
Uma das grandes coisas do desafio de **100 dias de código** é justamente você conseguir manter a frequência dos dias enquanto a vida está acontecendo. Então mesmo estando **super** cansada e não tendo conseguido prestar atenção direito no que eu estava vendo, eu estou feliz porque o desafio está me ajudando a ser mais constante nessa área. 
É claro gente que **NÃO EXISTE FORMULA MÁGICA**, mas cada passinho em direção a melhora é sempre bem vindo.
Acredito que até o final do desafio, não devo mais ser tão inconstante com os meus estudos e devo conseguir metrificar melhor o tempo que eu tomo com as minhas atividades, já que é outra coisa  que o desafio tem me mostrado que eu ainda sou bem ruim em metrificar.

**Dia 006**
Hoje eu tirei boa parte do dia para descansar, quase como um dia de "folga", mas mantive meu compromisso com o estudo.
Por estar mais descansada hoje as coisas fluíram melhor e pra compensar só ter estudado meia hora ontem, hoje eu estudei uma hora e meia. 
Oficialmente minhas aulas de HTML puro acabaram hoje e agora eu estou entrando na parte de CSS. Aqui está a listinha das coisas que eu fiz hoje:
*Atualizei o título do meu site (Portfolio aparecendo no navegador estava estranho)
*Atribuí um título as imagens dos ícones (Embora não apareça visualmente no site, isso faz com que em pesquisa aquela imagem seja assimilada ao meu nome/site)
*Fiz os links indicarem para páginas externamente (Caso vocês tenham visto, antes o meu site só trocava você de página para a página que você clicou para ir, agora ele abre uma nova página sem te tirar do site)
*Criei uma folha de estilo vazia (Como o meu próximo passo nessa empreitada é adicionar "estilo" ao meu site, achei melhor deixar a folha criada para só precisar fazer alterações)
*Atualizei tudo no github ( Ou seja o meu site já foi atualizado também)

É engraçado que enquanto estamos produzindo não parece ser tanta coisa, mas escrevendo a gente acaba tendo uma noção melhor que até aqui e só com pequenas alterações muita coisa já mudou.

Bom gente, obrigada a quem está acompanhando meu progresso.
Amanhã tem mais! **<3**
PHP is still in the game
Published: 2020-08-05 04:51:31

We have so many options to choose from when it comes to choosing right technology stack for our application. There are even more frameworks and libraries supporting **amazingly fast** development. So you might be thinking that php is dead and it cannot compete with this fast development than hold on please.

There are many well known companies who are using php and its framework for tech stack. **9GAG & BBC** still have php in their current tech stack.

Still people choose **WordPress** for to go solution for blog and simple websites. Taking about WordPress reminds me of famous tech blog [Tech Crunch](https://techcrunch.com/) is still using WordPress.

Php have super powerful [Laravel](https://laravel.com/) framework. And yes php also have package manager like [npm](https://www.npmjs.com/) which is [composer](https://getcomposer.org/).

If you or your server are looking for alternative of Laravel then my friends php has everything. My next php framework is [CodeIgniter](https://codeigniter.com/).

It is super easy to setup and I'll be writing one more DEV post on how to setup CodeIgniter in few simple steps.
#100DaysOfCode | Day 10, 11
Tags: challenge, 100daysofcode, python, codenewbie
Published: 2020-08-05 07:21:33

▄█ █▀█ █▀█ █▀▄ ▄▀█ █▄█ █▀ █▀█ █▀▀ █▀▀ █▀█ █▀▄ █▀▀
░█ █▄█ █▄█ █▄▀ █▀█ ░█░ ▄█ █▄█ █▀░ █▄▄ █▄█ █▄▀ ██▄
Hey everyone, wassup?
I just wanna write about my day 10 and 11 of **#100DaysOfCode Challenge!**

I have good news for myself!
I mad a simple twitter bot with Tweepy ;)
It was not so hard for me but I got confused about some of the concepts and methods in that library, and I know that's actually normal.
It was my first time that I used a framework to make something, and to be honest that was so __COOL!__
In the next post I'm gonna share my codes and the way I created a __twitter-bot__ with __Tweepy__, so if you are a beginner like me you can take advantage of it and automate some of your task!


Keep Moving Forward __ツ__

Enjoy Your Journey 👊

Code with __💛__

__🅑🅐🅝🅙🅘__
Benefits of Hiring Magento Developers
Tags: magento2upgradeservices, hiremagentodevelopers, laraveldevelopmentservices
Published: 2020-08-05 10:30:18

It has become a compulsion for every big or small business company to establish its online presence in today's competitive world. Because it attracts great advantages, such as the low cost of investment firms, it can extend the scope of its customers and business audiences. Companies in many Pan Asian developing countries like India have already begun moving into online eCommerce business by introducing an online eCommerce store based on various CMS available on the market. Selection of perfect CMS for e-commerce website is always a bit confusing and a challenge because of the easy availability of many platforms on the market. But out of them all Magento platform has demonstrated its credibility in boosting the company's e-commerce business in every conceivable way. It has proven to be a profitable option for many of our customers hiring Magento developers as it is effective, inexpensive and almost entirely customisable.

Read More:- https://rocktechnolabs.com/benefits-of-hiring-magento-developers/