teleren/devto huggingface dataset:
Top Skill Sets That An Advance Level Drupal Developers 'Must' Have
Tags: programming
Published: 2021-06-29 12:49:12

Drupal is a leading CMS for businesses of all types and sizes. Many companies are optimistic that the CMS will evolve and expand in tandem with their company as a solid and robust open-source platform. However, you need to hire an advanced-level web developer who is well-versed in the Drupal framework.

So, how do you find a developer with these skill sets? What are the skills you need to look for while <a href="https://addwebsolution.com/hire-drupal-developers">hiring an advanced-level Drupal developer?</a> An advanced-level Drupal developer should be aware of the skills necessary to design a site that matches or exceeds your expectations.

When interviewing potential Drupal developers, you can go over the skills they have to give and how those skills translate to Drupal. To make it simpler for you, we have prepared a list of few key skills your developer should know. As a result, you should prepare to employ a Drupal developer ready to design the ideal Drupal website for your requirements.

<b>A Strong Knowledge of PHP & PHP Frameworks</b>

While several developers can sail from one CMS to the next, primary coding languages need to be familiar to the developer to work with Drupal. As Drupal 7 gets created with PHP and Drupal 8 is constructed with Symfony (a PHP framework), you need to have working experience with PHP and PHP frameworks.

The customized production of Drupal also relies on MySQL and JQuery information. MySQL understanding is required to set up your Drupal database, while JQuery (javaScript library), primary DOM, occurrences, effects, and AJAX functions are simpler to do.

<b>experience Installing & Building Drupal Modules</b>

Drupal modules enable you to incorporate a wide range of third-party resources and tools into your site. As a result, your web page will serve as both a portal for accessing all of your most commonly used resources from a single location and a more highly personalized tool for your website visitors to use.

In addition to installation, your developer should be able to create modules. If you have an application with no modules in mind, the developer needs to develop a personalized module for you.

<b>Debugging & Updating a Drupal Site</b>

Aside from knowing how to use Git version control, Drupal developers should find bugs in their code as they write it. At the same time, no developer can spot any errors or issues while coding, the correction of mistakes will save time and prevent further problems during coding processes.

Although debugging during the development phase is beneficial, fixing bugs after the site goes live is critical. Not all Drupal developers provide post-launch maintenance, but those who do will make it much easier to ensure that your site is bug-free, up to date, and provides the best user experience for your users.

Read Complete article at - <a href="https://www.addwebsolution.com/blog/advance-drupal-developer-skill-sets">10+ Skill Sets That An Advance Level Drupal Developers 'Must' Have</a>
Today I learned to Create a Animation Navigation
Tags: html, css, webdev, javascript
Published: 2021-06-29 12:40:23

Today I have learned to make animated navigation in "50 projects in 50 Days" of Udemy using HTML CSS and JavaScript.

This is a great way to handle a responsive menu. With just a little JavaScript, you’ll get a menu that stacks items into a dropdown when they overflow.


Here's My Html code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Animated Navigation</title>
</head>
<body>
    <nav class="active" id="nav">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
    </button>
    </nav>
    <script src="./script.js"></script>
</body>
</html>
```


Here's my CSS code

```css
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
 

*{
    box-sizing: border-box;
}

body {
    background-color: #d8fcc9;
    background-image: linear-gradient(to bottom, #f1d558 0%, #d8fcc9 50%, #f734dd 50%, #0287af 100% );
    font-family:'Ubuntu', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

nav {
    background-color: #fff;
    padding: 20px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow:0 2px 5px rgba(0, 0, 0, 0.3);
    transition: width 0.6s linear;
}

nav.active {
    width: 350px;
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 0;
    transition: width 0.6s linear;
}

nav.active ul {
    width: 100%;
}

nav ul li {
    transform: rotate(0deg);
    opacity: 0;
    transition: transform 0.6s linear, opacity 0.6s linear;
}

nav.active ul li {
    opacity: 1;
    transform: rotateY(360deg);
}

nav ul a {
    position: relative;
    color: #000;
    text-decoration: none;
    margin: 0 10px;
}

.icon {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
    height: 30px;
    width: 30px;
}

.icon:focus {
    outline: 0;
}

.icon .line {
    background-color: #5290f9;
    height: 2px;
    width: 20px;
    position: absolute;
    top: 10px;
    left: 5px;
    transition: transform 0.6s linear;
}

.icon .line2 {
    top: auto;
    bottom: 10px;
}

nav.active .icon .line1 {
    transform: rotate(-765deg) translateY(5.5px);
}

nav.active .icon .line2 {
    transform: rotate(765deg) translateY(-5.5px);
}
```

Here's My JAVASCRIPT code

```JavaScript
const toggle = document.getElementById('toggle')
const nav= document.getElementById('nav')

toggle.addEventListener('click', () => nav.classList.toggle('active'))
```
Here's Ouput
{%codepen https://codepen.io/ahtshamajus4772/pen/MWmWxMY %}
7 Twitter threads to help you master Web Development:
Tags: webdev, programming, beginners, codenewbie
Published: 2021-06-29 12:36:06

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1. How to learn Web Development - @TheAnkurTyagi 

https://twitter.com/TheAnkurTyagi/status/1408105497455218688?s=20

### 2. Master JavaScript and CSS from these handmade cheat sheets - @Prathkum 

https://twitter.com/Prathkum/status/1407795508551294982?s=20

### 3. JavaScript Array Methods Explained - @SimonHoiberg 

https://twitter.com/SimonHoiberg/status/1363760285975257089?s=20

### 4. HTML Roadmap - @_georgemoller 

https://twitter.com/_georgemoller/status/1388874423797784581?s=20

### 5. Learn Web Development by building projects - @denicmarko 

https://twitter.com/denicmarko/status/1398149669973340165?s=20

### 6. CSS Roadmap - @_georgemoller 

https://twitter.com/_georgemoller/status/1385631721362702336?s=20

### 7. Learn JavaScript by playing games - @Insharamin 

https://twitter.com/Insharamin/status/1407926275985924106?s=20

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me
The easiest way to write Markdown in NextJS!!
Tags: react, nextjs, programming
Published: 2021-06-29 12:14:50

In this short blog, I'll show you how you can write Markdown in NextJS using MDX.

## Installation

- Before getting starting, I assume you have already initialized a NextJS project.

```shell
  yarn add @next/mdx @mdx-js/loader
```

OR

```shell
npm install --save @next/mdx @mdx-js/loader
```

---

## Configuration

- In our `next.config.js`, add the following

```js
const withMDX = require("@next/mdx")({
  extension: /\.mdx$/,
});

module.exports = withMDX({
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});
```

---

## Usage

Now we can create an `index.mdx` file in our `src/pages`

```tsx
 <!-- src/pages/index.mdx -->

# This is a Markdown Syntax

## React starts from here

import { useState } from "react";

export const Home = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Count {count} </h1>
      <button onClick={() => setCount((prev) => prev + 1)}> Increment </button>
    </div>
  );
};

<Home />

## React ends here

## I can continue to write Markdown here
```

---

## Output


![Output.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1624969145089/kZj99ILzh.gif)

---

## References

- [NextJS PageExtensions](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions)
- [MDXJS](https://mdxjs.com/)
- [MDX and NextJS](https://mdxjs.com/getting-started/next)

---

## Socials

### If you like my content then do follow me on Twitter [Shubham Verma](https://twitter.com/Shubham_Verma18)

<a href="https://www.buymeacoffee.com/shubhamverma" target="_blank" rel="nooperner noreferrer"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=shubhamverma&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>
New Package to generate CRUD Files using TALL Stack
Tags: laravel, package, tall, livewire
Published: 2021-06-29 12:02:14

I have created a [Package](https://github.com/ascsoftw/tall-crud-generator), which would generate CRUD Files for your Model. 

{% github ascsoftw/tall-crud-generator %}

The Package generates the Livewire component and Corresponding Files which support Pagination, Sorting, Searching, Adding (inside Modal), Editing (inside Modal), Validation and Delete (with Confirmation Modal). You can select the Columns that you need to display on the Listing. You can also select the Fields which needs to be displayed on Add and Edit Form as well as their Field Type.  

All of these features are configurable. You can select or deselect any Feature. The Package works by generating the actual Livewire Component and View Files, so once you have generated these Files they are no longer linked to the Package. This gives you the opportunity to Edit the Files or customize them as per your requirement.

Here is a Youtube Video explaining how to install and use this Package. You can jump straight to 7:46 to see the Package in Action.

{% youtube Heyv4H8m1qI %}

Please install and use this package and let me know if you have any feedback.
Simplest way to Add Dark Theme to any Website
Tags: css
Published: 2021-06-29 11:51:56

---
title: Simplest way to Add Dark Theme to any Website
published: true
description: add dark theme to any website in simple steps
tags: css
cover_image: https://res.cloudinary.com/dlwivxwf8/image/upload/v1624967655/Screenshot_2021-06-29_at_11.40.17.png
canonical_url: https://blog.godswillumukoro.com/simplest-way-to-add-dark-theme-to-any-website/
---

### The Problem

I like fancy websites. You know websites that have great UI/UX, impressive load time speed, pretty animations, Scalable Vector Images, Dark theme and light theme toggle button.

But the problem is... I suck at CSS and JS (at this moment, I'm working on it duh 🙄). As a result, many tutorials and blog articles on how to implement these fancy features on a website aren't exactly for me.

**The question is**: what's the simplest, most basic way to add dark theme functionality to my website?
I'm also not interested in copying code I don't understand.

### The Solution
The best way to learn they say is by building, so I woke up two days ago and was like, lets do this! 
My personal website could use a redesign so I said to myself, I'll rebuild my website and add that a dark theme functionality to it.

I chose to follow a minimalist design for he website. After writing some basic HTML and CSS, I added the dark theme functionality with the following CSS code:

```
/* Light mode by System theme */
@media (prefers-color-scheme: light) {
    body {
        background-color: inherit;
        color: inherit;
    }
}

/* Dark mode by System theme*/
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: whitesmoke;
    }
}
```

`prefers-color-scheme` checks if the user has selected `light` or `dark` theme. The user can do this either via the operating system settings or via the browser settings.

### What does this mean?

1. You website could look different on browsers. Light or Dark.
2. You just implemented dark theme on your website with just a few lines of CSS code.

### Some Links
- Check my new personal [website here](https://godswillumukoro.com)
- Check the full code on [Github](https://github.com/godswillumukoro/godswillumukoro.com)
- Learn more about [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
On .NET Episode: Feature flags with .NET and Azure App Configuration
Tags: azure, dotnet, webdev
Published: 2021-06-29 11:47:37

In this episode, Scott Addie joins Christos Matskas to discuss feature management in .NET apps. An ASP.NET Core 5.0 Blazor Server app is used to demonstrate the following concepts:

* Integrating the Feature Management library with Azure App Configuration
* Accessing Azure Key Vault secrets from Azure App Configuration
* Integrating Azure App Configuration with the .NET Configuration API
* Testing locally in Visual Studio with the Azure Identity library
* Toggling features on/off from the Azure portal


{% youtube CcbUqdh8Xw8 %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).


## Useful Links

* Blazor sample app: https://github.com/scottaddie/OnDotNetConfiguration
* Get your questions answered on the Microsoft Q&A for .NET: https://aka.ms/dotnet-qa
* Azure SDKs: https://aka.ms/azsdk
Explained: Difference between Fishing Kayak and Regular Kayak 
Published: 2021-06-29 11:45:17

<p style="text-align: justify;">Kayaking is one of the most popular outdoor activities in the world. It provides a fun and relaxing way to enjoy nature while getting some exercise at the same time. There are many different types of kayaks on the market that offer all sorts of unique features. One such type is the fishing kayak, which has been gaining popularity over recent years as more people take up this hobby or sport. Fishing kayaks have several advantages over regular kayaks, which we will discuss below.</p>
<h2 style="text-align: justify;"><strong>Fishing Kayak Vs Regular Kayak: </strong></h2>
<p style="text-align: justify;">Let's understand the difference between the fishing kayak and a regular kayak after analysing the following factors.</p>
<p style="text-align: justify;"><strong>Size: </strong></p>
<p style="text-align: justify;">The fishing kayak is much smaller (i.e., 10 to 14 feet) and narrower than a regular <a href="https://www.competitiveedgeproducts.com/Lifetime-Tamarack-Angler-100-Fishing-Kayak-Krypton-Fusion-2-Pack_p_3201.html">lifetime tamarack kayak</a> (i.e., 26 to 30 inches). This means that it can easily be maneuverer into tight spots, especially in shallow water with lots of rocks or other obstructions. It also has less wind resistance because it's smaller, so you'll get there faster on the same effort level as paddling a bigger.</p>
<p style="text-align: justify;"><strong>Structure: </strong></p>
<p style="text-align: justify;">A Kayak is normally categorized into two types, SIKs (Sit-Inside-Kayak) SOTs (Sit-On-Top Kayaks). SOTs offer a wide variety of seats that makes the fisherman jobs easy. Whereas SOTs like Life tamarack kayak have more space, so the person can sit on it comfortably and stay in one place for long hours.</p>
<p style="text-align: justify;"><strong>Weight: </strong></p>
<p style="text-align: justify;">Kayak weight matters a lot. The weight of the fishing kayak is much lesser than that of a regular kayak. People become more watchful when go to buy a fishing kayak because a lot of tools would require to take along, and it all increases the weight.</p>
<p style="text-align: justify;"><strong>Final Thought: </strong></p>
<p style="text-align: justify;">Kayak is considered a versatile medium of transportation. Along with it, people enjoy kayaking. Its popularity resulted in the introduction of several kinds of kayaks consists of new features like lifetime tamarack kayak. So, if you enjoy a water ride then get the best kayak for yourself and enjoy the ride.</p>
Variable Undefined For Simple Demo App
Tags: react, hooks, axios
Published: 2021-06-29 11:41:42

Dear kind, empathetic, helpful members of the forum,

I am writing a straightforward react app with a very basic api (git hub repo : https://github.com/mrarthurwhite/use_effect_react_hooks_demo). Following is the functional component which is a demo component meant to illustrate a fetch (with axios), using the `useEffect` hook, followed by just displaying the data.

```
import './App.css';
import React, {  useEffect, useState } from 'react';
import axios from 'axios';

function GetWordsWAxiosNLoading() {
  const [words, setWords] = useState([]);
  let isLoading = false;

  console.log("isLoading prefetch " + isLoading); 

  async function fetchData(){
    isLoading = true;
    console.log("isLoading fetching " + isLoading); 
    let url = 'http://localhost:1111/wordlist';
    const result= await axios(url);
    setWords(result.data);
    isLoading = false;
    console.log("isLoading resetting " + isLoading); 
  };

  useEffect(() => {fetchData()}, [] );
  console.log("isLoading postfetch " + isLoading); 
    return (
    <>
    { isLoading? (<div>Loading . . . </div>) : (     {words.map(w=> <div>{w.word}</div>)}    ) }
    </>
  );
}

export default GetWordsWAxiosNLoading;
```
The error I am getting is : 
```
./src/GetWordsWAxiosNLoading.js
SyntaxError: use_effect_react_hooks_demo/use_effect_initial_demo/src/GetWordsWAxiosNLoading.js: Unexpected token (27:59)

  25 |     return (
  26 |     <>
> 27 |     { isLoading? (<div>Loading . . . </div>) : (     {words.map(w=> <div>{w.word}</div>)}    ) }
     |                                                            ^
  28 |     </>
  29 |   );
  30 | }
```
At line 27 above it is giving both a `  Line 27:60:  Parsing error: Unexpected token` & a `SyntaxError`.


I have working variants of the above :
1. where I am just using `fetch` instead of `axios` httpclient (https://github.com/mrarthurwhite/use_effect_react_hooks_demo/blob/master/use_effect_initial_demo/src/App.js), & it works fine now.
2. where I am using axios but without a `loading` variable ( https://github.com/mrarthurwhite/use_effect_react_hooks_demo/blob/master/use_effect_initial_demo/src/GetWordsWAxios.js) & it works fine now but it was also giving errors with `words` being undefined initially.


 
The issues are:
1. there are no console log outputs
2. the `isLoading` variable is undefined (I was initially using `isLoadings` a variable stored in the `state` object but decided to simplify it).

Any ideas as to what could be going on? 
Thanks in advance!
Learn FastAPI With Me (Part 2)
Tags: python, api, beginners, webdev
Published: 2021-06-29 11:32:29

So In The Previous Part We Made Our First Ever API In This Part I Will Explain What Was The Code Actually Doing. If You Don't Know What I Am Talking About Check The First Part Of This Series <a href="https://dev.to/morgan_phoenix/learn-fastapi-with-me-part-1-48jd">Here</a>

## The Explaination
This Is The Code I Shared
```
from fastapi import FastAPI
app = FastAPI()
@app.get('/')
def home():
    return {'data':'Get This And Be Happy'}
```
Now In The First Line We Imported `FastAPI` from `fastapi`
`from fastapi import FastAPI`
### What Is FastAPI?
`FastAPI` Is The Main Class You Will Use To Start With The API

Now We Made A Object Called `app` Of The Class `FastAPI` So We Can Use All The Functions And Methods Provided By This Class.

Then We Did Something Like This `@app.get('/)`, If You Don't Know What The `@` Symbol Is, Let Me Tell You (If You Know What Is it Please Skip To "Explaining An Endpoint")
These Things Are Called `Decorators` In Python(A Decorator allows a user to add new functionality to an existing object without modifying its structure.)
So What Do I Mean Here Is, Lets Say I Created A Function `foo`
```
def foo(f):
    print('doing')
    f()
    print('done')
```
And Then I Created A Function `func`
And Then Run This
```
@foo
def func():
    print('inside foo')
```
Here The Function `func` Will Be Give To Function `foo` As A Parameter, So By Now You Know What Will Be The Result,
```
doing
inside foo
done
```
You Will Get This As The Result
Now Enough About Decorators, Lets See What An Endpoint Is

## Explaining An Endpoint
Now An Endpoint Is A `/some_address`(slash some address) Where Clients Can Come And Do Stuff Like We Have `google.com/home`, Here We Defined Our Endpoint As `/`. This Means Who Ever Comes To `http://127.0.0.1:8000`(or whatever domain name our api is running), That Client Is Recived Where We Defined `/`.
Now We Wrote A Function Just Below It, This Function Runs Everytime A Clients Visits `/` and may return something, Similarly If We Create `/hello`, The Function Defined Below Will Be Executed If Someone Visits `/hello`.

In The Function We Did Not Do Something Crazy, All We Did Is Returned A Dictonary. But.... Why A Dictonary?

## Why A Dictonary?
Now If You Noticed We Used A Dictonary, This Raises a Question, Why? Why A Dictonary? We Use A Dictonary Because We Can't Use Strings To Send Data Over HTTP, We Use Something Called JSON. JSON Is a Format Of Data That Is Commomly Used To Talk Over HTTP. A JSON Data Looks Something Like This `{'data':'I AM JSON'}`. Get The Point Now? FastAPI Converts A `Dict` object to a `JSON` Object.(See <a href='https://www.json.org/json-en.html'>here</a> or <a href='https://en.wikipedia.org/wiki/JSON'>here</a> to read more about JSON)

And That's All We Did.

In The Next Post I Will Tell How To Accept Something As A Parameter And Will Explain It In The Same Post

See You All In The Next Post, Till Then Keep Practicing.
"Do you know what '++' does?"
Tags: codenewbie, beginners, javascript, webdev
Published: 2021-06-29 11:27:21

Finished another JavaScript tutorial and shared the project with a friend. He was reviewing one of the functions and asked, "Do you know what ++ does?"

```
timerTime++;
```

Gut reaction was stress! But my friend wasn't gatekeeping. He wasn't saying "Do you *even* know what ++ does?"-- he was just legitimately checking in. That's why he's my dawg.

In the context of this project, "timerTime++;" ended up meaning the same thing as

```
timerTime = timerTime + 1;
```
But, top dawg reminded me that ++ can have different outcomes in different uses. And that's... fun.

[I know I definitely looked up the difference between i++ and ++i before.](https://stackoverflow.com/questions/24853/what-is-the-difference-between-i-and-i#:~:text=The%20only%20difference%20is%20the,the%20value%20the%20operator%20returns.&text=So%20basically%20%2B%2Bi%20returns,will%20have%20its%20value%20incremented.)

Something, something loops.

It's definitely not fully ingrained yet. But look at that:
* usage
* reflection
* research

I utilized it without fully understanding. I reviewed how well I got the concept, and when I realized it wasn't quite all there... I was able to look it (back) up (again).

---

Note: we call him top dawg cuz he's a top dawg.