teleren/devto huggingface dataset:
Computer Tutorials Live || Free Computer Notes & Other
Tags: computerscience, computertutorials, seo
Published: 2020-07-26 12:24:54

Computer Tutorials Live A Website of Free Computer Course and Basic Computer Notes or Basic Computer Tutorials for Beginners
	<a href="https://www.computertutorialslive.com/" rel="dofollow">Computer Tutorials Live</a>
	<a href="https://www.computertutorialslive.com/basic-computer-tutorials-for-beginners/" rel="dofollow">Basic Computer Tutorials for Beginners</a>
	<a href="https://www.computertutorialslive.com/computer-fundamentals/" rel="dofollow">Computer Fundamentals</a>
	<a href="https://www.computertutorialslive.com/computer-online-quizzes/" rel="dofollow">Computer Online Quizzes</a>
	<a href="https://www.computertutorialslive.com/technology-news/" rel="dofollow">Tech News</a>
	<a href="https://www.computertutorialslive.com/about-computer-tutorials-live/" rel="dofollow">About US</a>
	<a href="https://www.computertutorialslive.com/contact-us/" rel="dofollow">Contact US</a>
	<a href="https://www.computertutorialslive.com/terms-conditions-computer-tutorials-live/" rel="dofollow">Terms & Conditions</a>
	<a href="https://www.computertutorialslive.com/privacy-policy/" rel="dofollow">Privacy & Policy</a>
66:  Coding is self-expression for me! 
Tags: discuss
Published: 2020-07-26 12:11:13

##**How do I discover the coding world?**
I used to be far away from technology and turned me out to become the most important challenge for myself, to be frank, my feminity was the issue I had to get over among the hyper-masculine coding society in my country. 

It was such a difficult task to communicate with people who are the opposite side of me and lost the way to make a balance, finally broken for a while. 


-------------
I am hoping that my womanhood is not a problem anymore to study programming and does not have to give up by the patriarchal society. Back to the previous experience, It was extremely hard for me to act as I am 'asking questions, having a discussion, simply saying hello, making jokes, and becoming friends.' okay, if they know about the beauty of Rupaul, I could open to talking lol. 

Finally, realize how important culture-fit can encourage me to become a better version of myself. Respecting my identity is as important as loving computer engineering. I can't believe how much I was trying to fit in a different standard. It ended up with hate, guilty, too. Not really good.... so no drama! 


-------------
While recovering to the second challenge, I learned how to respect my situation, my background, my curiosity, I can see that I function better when I am studying alone. The competition made me demotivate talking to people deeply. 

I want to get adventures, be curious every single detail, sharing the opinions, supporting each other's identity, and get inspired by learning the difference


-------------

###**I will eventually enjoy my coding life with the various people :) I can feel it truly!!**###

especially taking care of one's pronoun!!! 
Coding has no ranking, it is everything about keep learning. I love the fact that programming does not define who we are, the computer only care one thing, is it 0? or 1? It is so beautiful! The whole algorithm is such big progress to finish up moving programs. The next session is... 

'From the powerless to self-actualization.'!
HOW TO USE ROAS TO IMPROVE GOOGLE ADS
Tags: digitalmarkting, socialmediamarketing, ppcmanagement, googleads
Published: 2020-07-26 12:10:48

If you have spent a significant sum of money on PPC ads, it is important to know that getting clicks isn’t the big picture. There is no point on having an ad if it does not generate revenue. That is why conversion rates and ROAS (which we will be talking about shortly) are important metrics that help you know if your investment on ads is worth it. Broadly the best way to find out is to bring together the amount you spend with the amount of revenue generated.

Read the full blog here https://www.prism-me.com/blog/how-to-maximize-return-on-ad-spend-2020
React Hook for showing custom "Add to home screen" prompt
Tags: react, pwa
Published: 2020-07-26 12:06:00

**Demo:**<br />[Twitter](https://twitter.com/rikurouvila/status/1067720501634654208)

```js
const [prompt, promptToInstall] = useAddToHomescreenPrompt();
```

Listens for `beforeinstallprompt` event, which notifies you when the browser would have shown the default dialog, 
intercepts it and lets you take over and show the prompt whenever you please.

## Browser support and requirements 

[Add to Home Screen](https://developers.google.com/web/fundamentals/app-install-banners/)

Browser support is still quite lacking. At the time of writing, only Chrome (Desktop + Android) [is supported](https://caniuse.com/#feat=web-app-manifest).


## Implementation

```js
import * as React from "react";

interface IBeforeInstallPromptEvent extends Event {
  readonly platforms: string[];
  readonly userChoice: Promise<{
    outcome: "accepted" | "dismissed";
    platform: string;
  }>;
  prompt(): Promise<void>;
}

export function useAddToHomescreenPrompt(): [
  IBeforeInstallPromptEvent | null,
  () => void
] {
  const [prompt, setState] = React.useState<IBeforeInstallPromptEvent | null>(
    null
  );

  const promptToInstall = () => {
    if (prompt) {
      return prompt.prompt();
    }
    return Promise.reject(
      new Error(
        'Tried installing before browser sent "beforeinstallprompt" event'
      )
    );
  };

  React.useEffect(() => {
    const ready = (e: IBeforeInstallPromptEvent) => {
      e.preventDefault();
      setState(e);
    };

    window.addEventListener("beforeinstallprompt", ready as any);

    return () => {
      window.removeEventListener("beforeinstallprompt", ready as any);
    };
  }, []);

  return [prompt, promptToInstall];
}

```

## Example component

```js
import * as React from "react";
import { useAddToHomescreenPrompt } from "./useAddToHomescreenPrompt";

export function ExampleComponent() {
  const [prompt, promptToInstall] = useAddToHomescreenPrompt();
  const [isVisible, setVisibleState] = React.useState(false);

  const hide = () => setVisibleState(false);

  React.useEffect(
    () => {
      if (prompt) {
        setVisibleState(true);
      }
    },
    [prompt]
  );

  if (!isVisible) {
    return <div />;
  }

  return (
    <div onClick={hide}>
      <button onClick={hide}>Close</button>
      Hello! Wanna add to homescreen?
      <button onClick={promptToInstall}>Add to homescreen</button>
    </div>
  );
}
```
Responsive components without media-queries
Tags: responsive, nomediaquery, css, flexbox
Published: 2020-07-26 12:00:41

I created a responsive and flexible card without any media-queries. You'd rather see the demo in a new tab or in 0.5x zoom below.

{% codepen https://codepen.io/GeoffreyCrofte/pen/OJMaMxa %}

The demo will be explained in an article published soon.
Stay tuned!
Daily Developer Jokes - Sunday, Jul 26, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-26 12:00:10

---
title: "Daily Developer Jokes - Sunday, Jul 26, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jul%2026%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258cecd22f.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the computer squeak?

___A:___ Because someone stepped on its mouse!
 -->
How To: Use Fluent UI Icons in Gatsby
Tags: gatsby, fluentui, react, javascript
Published: 2020-07-26 11:27:33

## Prerequisites

* A running Gatsby development environment with Fluent UI

## First - Initialize icons

Fluent UI React's official documentation instructs you to include the below lines in the root entry file.

```javascript
import { initializeIcons } from '@uifabric/icons';
initializeIcons();
```

In **Gatsby**, an easier and more straightforward way is to include these lines in `index.js` or a layout component (I.E. `Layout.js`).

> Another possible solution may be to put them in one of Gatsby's API files.

By default, when a user visits the deployed Gatsby app, all icons will be downloaded from one of Microsoft servers.

To **avoid** this behaviour, do a couple of small adjustments.

1. Copy the icons from `your_project\node_modules\@uifabric\icons\fonts` to a subdirectory in your projects 'static' folder.
2. Modify the lines from earlier slightly, as below, where the parameter for `initializeIcons()` is the path to where the icons are.

```javascript
import { initializeIcons } from '@uifabric/icons';
initializeIcons('https://lybekk.tech/fluenticons/');
```

*The slash '/' at the end is important*

Now Gatsby will load the icons with the same performance and guarantees as the other files, ensuring correct rendering.

>See an example of Fluent UI running on Gatsby here:
>[Lybekk Tech - UUID Generator](https://lybekk.tech/tools/uuidgenerator/)

---

Further documentation on using 
[icons with Microsoft's Fluent UI](https://github.com/microsoft/fluentui/wiki/using-icons)

*As an added bonus, a way to use Font Awesome instead of Fluent UI icons.*
```javascript
import { registerIcons } from '@uifabric/styling';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCode } from '@fortawesome/free-solid-svg-icons';

registerIcons({
  icons: {
    Filter: <FontAwesomeIcon icon={faCode} />
  }
});
```
Road to Genius: superior #61
Tags: javascript, beginners, codenewbie, computerscience
Published: 2020-07-26 11:26:47

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function TNQ(n) {
  let res = 0;
  const dfs = (n, row, cols, pie, na) => {
    if (row >= n) {
      res++;
      return;
    }
    let bits = ~(cols | pie | na) & (1 << n) - 💰;
    while (bits) {
      let 💚 = bits & -bits;
      bits = bits & bits - 1;
      dfs(n, row + 1, cols | 🚀, (pie | p) << 1, (na | p) >> 1);
    }
  };
  dfs(n, 0, 0, 0, 0);
  return res;
}
let A = TNQ(9);

// 💰 = ? (number)
// 🚀 = ? (identifier)
// 💚 = ? (identifier)
// such that A = 352 (number)
```

I don't think we've encountered the function `TNQ` yet. I have no clue what it does nor how it works. But from the looks of it, it's involving a lot of bit operations. Let's get started.

The first bug appears here:
```JS
let bits = ~(cols | pie | na) & (1 << n) - 💰;
```
I have no clue what 💰 should be; the answers we can choose from are 0, 1 and 9. Subtracting zero from any number makes no sense, subtracting 9 is a bit odd as well, the most probable answer would be 1.

The second bug 💚 is a variable name declaration, the only undeclared variable below that line is `p`.

The final bug appears on this line:
```JS
dfs(n, row + 1, cols | 🚀, (pie | p) << 1, (na | p) >> 1);
```
The bug is a right-hand variable in an or-operation; this could be anything. But if you look at its neighboring arguments (to the right), both of them are using `p` as the right-hand variable in the or-operation as well. So let's try that out:

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/dv5vjkukdk7y21ijedd7.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
Git cheat sheet
Tags: git, beginners, codenewbie, github
Published: 2020-07-26 11:26:19

I made this cheat sheet for git terminologies and most common commands when I was going through a Udacity course about version control. It helped me a lot and though it will be great to share it with others.

**Repository** this is a directory where your project/files are stored which are used to interact with Git.

**commit** this is when you make one or more changes to a file in git.

**branch**  this is creating a new line of development. This is mainly used to continue working without messing with the mainline of development.

**git commit** this is the command used to commit changes to your git repo. Commit contains a message which is used to describe what changes you've made.

**staging area** this is where git will put/store files while waiting for you to commit the file containing the changes.

**SHA** this is a unique ID number that is given to each of your commits.

**git init** this command is used to initialize your project into a repository.

**git clone** this command is used to copy an existing repository to your computer.

**git checkout** this command takes you to a different branch in your repo.

**git branch** this command is used to create a new branch.

**git checkout -b** this command is used to create a new branch and automatically switch to it.

**git status** this command shows you the current status of your repo like files which are yet to be committed or the branch you are currently in.

**git push** this command sends all your commits to the Github/Gitlab/Bitbucket repo you have created.

**git pull** this command fetch all your files from your repo and integrate them with your local repo. I mostly use it to make sure everything is up to date and working correctly.

**git add** this command is used to add files from the working directory to the staging area.

**git diff** this command is used to display the differences between two versions of a file also you can see changes that are yet to be committed using this command.

**git merge** this command is used to combine changes from different branches together.

**git revert** this command is used to a specific commit. It is usually followed by the commit SHA to indicate which commit you want to reverse.
Awesome Landing Page
Tags: javascript, html, css
Published: 2020-07-26 11:16:36

> awesome-landing-page is A series of beautiful and practical landing page templates.

## There are a lot of beautiful landing page templates. They are built using various front-end technologies. I hope you like them.

#### [https://github.com/nordicgiant2/awesome-landing-page](https://github.com/nordicgiant2/awesome-landing-page)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vrsu620q12ycl0ndp3kk.png)

Oh my dear friends, do you often need a beautiful page to decorate your projects? Maybe you are an algorithm engineer or a bridge engineering designer, but I think your open source project always needs a little embellishment. A beautiful homepage will make your github project shine.

## Awesome lading page

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/brwdhjljqky401bdshw2.jpg)

This project has carefully selected nearly 100 open source landing page templates for you, and dozens of free tutorials. I think it will make you feel extra surprised, thinking that everything you want is here.

### Finally

Finally, I want to say that beautiful things are always refreshing. I hope to dedicate them to you, if you like I will continue to recommend more fun things.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/es4grmhzbal1ki1mutph.jpg)
How do you order your functions?
Tags: discuss, javascript, webdev
Published: 2020-07-26 10:50:10

---
title: How do you order your functions?
published: true
description: A little discussion to see what most developers do.
tags: discuss, javascript, webdev
cover_image: https://images.unsplash.com/photo-1507925921958-8a62f3d1a50d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2555&q=80
---

Many linters complain that functionA cannot be declared on bottom of functionB when this is the case:

```js
function first(){
  second()
}

function second(){
  // Whatever
}
```

> This rule will warn when it encounters a reference to an identifier that has not yet been declared.


Rule of Eslint: https://eslint.org/docs/rules/no-use-before-define

So, we will change it to:

```js
function second(){
  // Whatever
}

function first(){
  second()
}
```

And I've been following this rule in my projects. But I always wonder, if it really matters that much... Since JavaScript seems to handle function declarations well even if they're not in the right order.

And the truth is, we're used to reading from up to down. And for me to do this makes it much more understandable:

```js
function first(){
  second()
  third()
}

function second(){
  fourth()
}

function third(){
  // Whatever
}

function fourth(){
  // Whatever
}
```

How do you sort the functions? I'd like to hear about this.
Angular for beginners 
Tags: angular, javascript, beginners
Published: 2020-07-26 09:50:07

Hello community,

I am hailing from India, I am an android (Kotlin) developer with back end development on PHP and exploring the world of web now. 

So during the lock down I started learning Angular, I had previous experience of working with angular when i created one mobile application on ionic framework, so that helped when i started creating web app. I did not had much in mind when I first started web but now I am enjoying building applications quickly on this. Also CSS and HTML as much as they are pain to properly align the objects on the page, they do work wonders when it comes to UI. Long story short, I have started building mobile apps on hybrid framework and now I am on my way to create an actual product for a client in Angular.

If you want to start learning below are the key topics that can help you to get a basic understanding of the framework. Keep this as a checklist and mark days to learn about each topic on calendar. This trick really helped me personally.
- Directory Structure 
- Component 
- Provider
- Module
- Data binding
- Services
- Pipes
- Routing
- Route Guard
- Parent Child component relationship
- Promise and observable (They are a bit of pain at first, but it gets better with practice :) )
- Component structure (In angular everything is component, so it helps if you understand what all component can be reused)
- Angular material (For beautifying your pages)

Understanding them should get you going with an application. Hope this helps you as it helped me :)

Peace.
What computer mouse do you use?
Tags: webdev, discuss, productivity, watercooler
Published: 2020-07-26 09:41:34

I am currently using an Apple Magic Mouse 2 and I used to think that it was amazing. However lately I have realised that it might not actually be that comfortable in long term usage. This has become quite apparent recently especially when gaming which requires intense focus. I find that the sides of the mouse tend to feel quite sharp if you hold it too tight. And lets not forget about the Apple Magic Mouse 2's biggest flaw...

![Apple Mouse](https://res.cloudinary.com/d74fh3kw/image/upload/v1595756090/apple_mouse_wghq7p.jpg "Apple Mouse")
Knowing a software does not make you a 'designer'
Tags: design, ux, uiweekly
Published: 2020-07-26 09:32:07

Paul Rand, one of the leading graphic designers was never good with computer softwares yet he is in my opinion one of the greatest designers to ever exist. When one thinks of design, we never learned from where we come as creatives. If I look back, I can remember people telling stories of painters, musicians, artists wandering from one village to another tell stories with their art-form. So, why did they roam in the first place? The answer is quite simple, one cannot create new art with worn-out experiences sure they help to curate art from new experiences. 

People have asked me that they want to start designing so what software should they learn. It is never the software first. Consider software as a canvas of a painter. If a painter knows painting techniques and how to work on the canvas but he can use those skills only when he has a creative idea in mind? And that idea is what makes a designer. Learning design concepts like space, gestalt, colours help you in understanding what goes into a design and how people perceive it. 


Even Google being a tech giant uses hand-drawn wire-framing method in their initial design processes. One has to learn how to do proper research and how to come with an idea around that research so that they can show that idea with the help of the software and if you do not know how to use a software you can always hire someone who know how to, Paul Rand did that. 

I will conclude by saying, if you want to start designing, not knowing how to use a software is not at all an excuse because that is not designing, it is just a helping hand in showing what idea you have in mind. Working on that mind is important not the software.

One who is lost, draws precisely.
Why most of the developer blog posts are aiming for code newbies?  
Tags: discuss, codenewbie
Published: 2020-07-26 09:21:48

Recently I've seen many experienced developers asking their network for valuable content. It made me wonder why is it so hard for them to find such content? Why there is much more content for code newbies and not much for experienced devs? 

Several reasons IMO
1. Easier to give value
2. Requires less effort to write
3. Larger audience

What do you think?
All out with AMP
Tags: frontendguildassembly, outbrain, amp, frontend
Published: 2020-07-26 09:19:09

Following my last post on AMP, https://www.outbrain.com/blog/how-to-implement-amp-on-wordpress/, here is an all out AMP for our beloved FED Guild.

Enjoy :)

source: https://www.youtube.com/watch?v=udcB96OAvIg
A cry for help
Tags: help
Published: 2020-07-26 09:17:48

Sorry if these seems like a rant but anyway. There comes a time when I get an idea for a blog and find that it is a bit too long and afraid that people would leave it without having read the entire piece. So I think to break my content into cohesive chunks that would flow as a sort of series. But theres a problem I don't know why or how but I can't seem to get a series to work :neutral_face:

I have seen these series posts before and I thought I should be able to create one but the dev documentation didn't do me much justice:disappointed:. Hence the reason for this blog. I'm asking for help. If you know how to make a Dev series post would you be so kind as to assist myself and everyone else who reads this post by leaving a link in the comments or better yet. Write a tutorial on how to do it because the only ones I can find didnt really help my cause.

And just to clarify I am aware that you need to use the jekyll font matter dev editor and place a :series: tag in the front matter. I have read the docs. I couldn't get it to work. Also the last time I checked there are no liquid tags for a series which is why I am assuming that you need to use the jekyll font matter (according to dev docs). 

If you've received my distress signal thank you for actually reading it:leaves:.