DEV Community: Felix DUSENGIMANA

Responsive image mosaic With CSS and HTML.

Felix DUSENGIMANA — Tue, 24 May 2022 08:00:11 +0000

To create a responsive image mosaic:

Use the display: grid property to create a responsive layout.
Use grid-row: span 2 / auto and grid-column: span 2 / auto to create items that span two rows or two columns respectively.
Put grid-row and grid-column styles in the media query to avoid applying them on small screens.

Bonus Tip:

loading='lazy' attribute is used to make images load lazily — only when they are in the user's field of vision.

Do you have a question ping me via Twitter

Let's Create an FAQ section with HTML and CSS only (Detail tag explained)

Felix DUSENGIMANA — Sun, 22 May 2022 13:57:25 +0000

Using <detail> and <summary> HTML tags you can create a simple accordion or toggle between hiding and showing secondary text on your website.

These codes are enough to create an accordion.

<details>
  <summary>How do I create accordion?</summary>
  <div>
 The tags <em>details</em> and <em>summary</em> have you covered.
  </div>
</details>

detail tag has an attribute called open which by default is set to false and if you set it to true your detail with be expanded by default.

Let's see how we can style our accordion.

Do you have an question ping me via twitter

How to Enable Dark Mode in Chrome on Ubuntu(No Code, Apps, Themes).

Felix DUSENGIMANA — Thu, 19 May 2022 06:14:22 +0000

If you set Windows to use dark mode, Chrome will also switch to dark mode. Unfortunately, setting Ubuntu to dark mode will not automatically set Chrome as well. It’s not that straightforward, but it’s still pretty simple.

Enable Dark Mode in Chrome on Ubuntu

I’m using Ubuntu Desktop 20.04, a long-term support version. Just so you know.

Step 1.

Go to your Settings>Appearance and switch to Dark.

Step 2.

Open Chrome and:

Type chrome://flags in the address bar;
Type “dark mode” in the search bar;
Select Enabled for Force Dark Mode for Web Contents.

You’ll notice that the address bar and tabs are still in light mode. That’s because only web contents/internal pages are being rendered in dark mode, not the whole browser.

Step 3

To go full dark mode, access Chrome’s settings by clicking on the 3 vertical dots, in the top-right corner, and selecting Settings.

Step 4

Select Appearance and click on the Use GTK+ button, in the Theme section.

GTK+ is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs).

You’ll notice that Chrome has gone into full dark mode now, not just the web contents/internal pages.

That’s a Wrap!

If some info is outdated or incorrect, or you have anything to add, ask ping me via Twitter or add it in a comment section.

CSS Combinators Explained.

Felix DUSENGIMANA — Mon, 16 May 2022 08:07:54 +0000

When selecting HTML elements, sometimes it can be a little tricky to figure out which element you've selected. In this article, we'll provide an explanation of CSS combinators, making them easier to understand. Yeah, you've heard it, explained in an easy way.

CSS Combinators explains the relationship between CSS selectors, well I think you know what selectors are, if not consider reading this article. As the name says they combine different CSS selectors to provide useful relationships with each other.

Well, let's not take too long.

HTML code.

<div class="box">
     <p>Text in box</p>
      <section>
          <p>Text in box inside section</p>
    </section>
</div>
<div>
  <h1>Heading inside div.</h1>
  <p>Text in div not in box</p>
</div>
<p>Text 1 not both div and box</p>
<p>Text 2 not both div and box</p>

1. Descendant combinator

The descendant selector matches all elements that are descendants (children, grandchildren, and so on) of a specified element. We use space between selectors.

The following example selects all <p> elements inside <div> elements:

div p{
color: red;
}

Output:

2. Child combinator (>)

The child selector selects all elements that are direct descendants (children only) of a specified element. We use greater-than sign (>) between selectors.

The following example selects all <p> elements that are children of a <div> element:

div > p{
color: red;
}

Output:

3. Adjacent sibling combinator (+)

The adjacent sibling selector is used to select an element that immediately follows another specific element. Sibling elements must have the same parent element. We use plus sign (+) between selectors.

The following example selects the first <p> element that are placed immediately after <div> elements:

div + p{
color: red;
}

Output:

4. General sibling combinator (~)

The general sibling selector selects all elements that are next siblings of a specified element.
We use tilde sign (~) between selectors.

The following example selects all

elements that are next siblings of

elements:

div ~ p{
color: red;
}

Output:

Let's connect:

Twitter
GitHub

Run any React/ Angular/ Vuejs project directly from Github/GitLab without downloading it.

Felix DUSENGIMANA — Fri, 04 Feb 2022 07:30:30 +0000

Want to run any Javascript or Framework project directly from the GitHub repository without downloading it on your machine?
Is it possible🤔? The answer is big “YES”

I just came across a service provided by Gitpod.io which is an online IDE for running GitHub projects in the cloud.

To run any project from GitHub in browser follow these steps:

Copy the URL of the GitHub project you want to run
Append it to http://gitpod.io/#
Log in to your GitHub account by clicking on “Login with GitHub & launch workspace” button
You’re done. It will load your environment of VS Code in the cloud

Let’s take the SnapShot project mentioned as the third project from https://reactjs.org/community/examples.html

To run the project in browser, take the repository URL which is https://github.com/Yog9/SnapShot and append it to http://gitpod.io/#

So, the complete URL becomes
http://gitpod.io/#https://github.com/Yog9/SnapShot

If you load the above URL, it will load the Visual Studio Code IDE in the cloud and you can run the project there, by running “npm install” and then “npm start” in the VS Code terminal as instructed in the README.md file for that project.

Screenshot after opening the above url

Using this technique, you can run the project, test it, and can also modify it as it's in the cloud.

The GitPod allows to run code of almost all the languages that > are supported by Visual Studio Code including Javascript,
Python, Java and Go and many more

Following is the list of supported languages from Gitpod website.

Top 6 free online IDEs for programmers

Felix DUSENGIMANA — Thu, 27 Jan 2022 07:43:50 +0000

CODEPEN
CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them
CodeSandbox
CodeSandbox is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click.
Use it to create static sites, full-stack web apps, or components on any device with a web browser.
JSFiddle
JSFiddle is an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'. It allows for simulated AJAX calls.
StackBlitz
StackBlitz is an online IDE (integrated development environment) where you can create Angular, React, and Vue projects quickly and easily in your browser. It automatically takes care of installing dependencies, compiling, bundling, hot reloading as you type, and much more.
Replit
The acronym REPL **stands for **read-evaluate-print-loop and basically provides a programmer with an interactive programming environment.
Replit is a coding platform that lets you write code and host apps. It also has many educational features built-in, making it great for teachers and learners too.
Visual Studio Code Online
Visual Studio Code for the Web provides a free, zero-install Microsoft Visual Studio Code experience running entirely in your browser, allowing you to quickly and safely browse source code repositories and make lightweight code changes.

The tweet

Phelix Dusengimana⌨🖱

@phelix__dusenge

Top 6 free online IDEs for programmers:
1. CodePen.io
2. codesandbox.io
3. JSFiddle.net
4. stackblitz.com
5. replit.com
6. vscode.dev

#programming #programmer #100DaysOfCode

07:22 AM - 27 Jan 2022

If you know others better online IDEs, feel free to share them in the comments. Thanks!

What really is "name" (A Special variable) in Python🤔?

Felix DUSENGIMANA — Wed, 26 Jan 2022 09:44:26 +0000

Are you a Pythonista? if so, let's clearly dive into what "_name_" and "_main_" really is and how it works.

Let's say you've this code in file1:

# File1.py 

print ("File1 __name__ = %s" %__name__) 

if __name__ == "__main__": 
    print ("File1 is being run directly")
else: 
    print ("File1 is being imported")

And of course this one in file2:

# File2.py

import file1

print("File2 __name__ = %s" % __name__)

if __name__ == "__main__":
    print("File2 is being run directly")
else:
    print("File2 is being imported")

if you run file one the output will be:

File1 __name__ = __main__
File1 is being run directly

And if you run file2 output will be:

File1 __name__ = file1
File1 is being imported
File2 __name__ = __main__
File2 is being run directly

If you've seen the output carefully, the *_name_ * is a built-in variable which evaluates to the name of the current module.

You may ask why it sometimes returns _main_🤔?,

If the current script is being run on its own, the _name_ variable returns *main * and if the script is imported the _name_ will returns module name.

REMARK: _name_ is always a string datatype.

Let's consider example above if you run file 2, the _name_ variable in file1 will be file1 because that's the name of module we are importing, and _name_ in file2 will be __main__ as it's the module we're running.

You can use the _name_ variable a get name of a class you've imported. example

from player import Player

print(Player.__name__) 
# OUTPUT: Player

To summarize all we said above, The _name_ variable (two underscores before and after) is a special Python variable. It gets its value depending on how we execute the containing script.

Thanks to this special variable, you can decide whether you want to run the script. Or that you want to import the functions defined in the script.

List Comprehension in Python

Felix DUSENGIMANA — Fri, 21 Jan 2022 19:58:56 +0000

You may haven't heard of this, but you're going to love it👌. Wait what exactly is List comprehension🤔? well, list comprehension is technique used by python programmers to create list from the previous list. Yeah, you've got it now, let's see some examples, right.

let's say you have this list of fruits.

fruits = ["apple", "banana", "cherry", "kiwi", "mango"]

and you want only fruits with letter "a" in the name. well, you might think of using for loop like this

fruits = ["apple", "banana", "cherry", "kiwi", "mango"]
fruits_with_letter_a= []

for x in fruits:
  if "a" in x:
    fruits_with_letter_a.append(x)

print(fruits_with_letter_a)

This works fine but there is another way of doing exactly the same thing with only one line of code.

fruits = ["apple", "banana", "cherry", "kiwi", "mango"]

fruits_with_letter_a= [x for x in fruits if "a" in x]

print(fruits_with_letter_a)

Let's understand clearly how list comprehension works.
The Syntax

fruits_with_letter_a= [expression for item in iterable if condition == True]

Expression
is the current item in the iteration, but it is also the outcome, which you can manipulate before it ends up like a list item in the new list.

Example: Set fruits names in the new list to upper case

newlist = [x.upper() for x in fruits]

Iterable
The iterable can be any iterable object, like a list, tuple, set etc.

Condition
The condition is like a filter that only accepts the items that valuate to True.

Let's try same challenge

name = "phelix"
lettes_list = [letter for letter in name]
print(lettes_list )

what will be the output🤔?

The answer

['p', 'h', 'e', 'l', 'i', 'x']

Did you get it?

You now know more about list comprehension.

Read a lot via w3schools.com

Environment Variables in ReactJS.

Felix DUSENGIMANA — Wed, 10 Mar 2021 17:58:05 +0000

If you’re using ReactJS and you are accessing some endpoint APIs, you may have come across environment variables. In this tutorial, I will take you through how to use environment variables.

Assumption: You’re familiar with the Create React App and you are using it to create your React application.

Why You Need Environment Variables

To customize variables based on your environment, such as whether it is in production, development, or staging, etc.
To store sensitive information like API keys and Passwords which are highly sensitive and you shouldn’t push them to version control.

Create React App supports custom environment variables without installing other packages.

Two ways of adding environment variables

Using the .env file (This is the approach we are going to use).
Through the shell (temporary, lasts as long as shell session last, and varies depending on the OS type).

Defining environment variable using `.env`

Step 1: In your application's root folder, create a text file called .env. Your working directory will look like this:

my-react-app/ 
 |-node-modules/
 |-src/
 |-public/
 |-.env
 |-gitignore
 |-package.json
 |-package.lock.json.
 |-README.md

Step 2: Create your custom variables. Create React App(CRA) enforces the prefix REACT_APP on every custom variable.
Note that variables without the prefix REACT_APP are ignored during bundling. If you want to know more about how does CRA do this, check documentation here.
Variables should look like this:

REACT_APP_CLIENT_ID=12345
REACT_APP_KEY=aaddddawrfffvvvvssaa

Step 3: Access them in your react app. You can print them and also assign them to other variables, but they are ready only in your application (means their value can't be changed).

import React from 'react';

function App() {
  console.log(process.env.REACT_APP_CLIENT_ID);//printing it to console
  console.log(process.env.REACT_APP_KEY);//printing it to console

  return (
    <div className="app">
      <p>{process.env.REACT_APP_KEY}</p>//printing it to screen
    </div>
  );
}

export default App;

Step 4: There is a built-in environment variable called NODE_ENV. You can access it from process.env.NODE_ENV. This variable changes based on what mode you are currently in.
When you run npm start it is equal to "development",
when you run npm test it is equal to "test", and
when you run npm run build it is equal to "production".
More on use case can be found in this great tutorial.

Step five: Open the .gitignore file. I like to put .env and other environment variables under #misc as seen below.

# dependencies 
/node_modules 
# testing 
/coverage 
# production 
/build 
# misc 
.DS_Store 
.env    #<--------Put the custom env files here 
.env.local 
.env.development.local 
.env.test.local 
.env.production.local 
npm-debug.log* 
yarn-debug.log* 
yarn-error.log*

Why Isn’t It Working Even After Following These Processes🤔?

Make sure you used the prefix REACT_APP on every variable
Confirm that the variable names on the .env file match the ones on your js file. For example,REACT_APP_KEY in .env versus process.env.REACT_APP_KEY
If the development server was running, stop it then rerun using npm start it. I really struggled with this (variable is undefined error).
Every time you update the .env file, you need to stop the server and rerun it, as the environment variables are only updated during build (variable is undefined error).
Remove quotations from the values of the variables.

The official documentation for using environment variables from Create React App can be found here.

DEV Community: Felix DUSENGIMANA

Responsive image mosaic With CSS and HTML.

Let's Create an FAQ section with HTML and CSS only (Detail tag explained)

How to Enable Dark Mode in Chrome on Ubuntu(No Code, Apps, Themes).

Enable Dark Mode in Chrome on Ubuntu

Step 1.

Step 2.

Step 3

Step 4

CSS Combinators Explained.

1. Descendant combinator

2. Child combinator (>)

3. Adjacent sibling combinator (+)

4. General sibling combinator (~)

Run any React/ Angular/ Vuejs project directly from Github/GitLab without downloading it.

Top 6 free online IDEs for programmers

What really is "__name__" (A Special variable) in Python🤔?

You may ask why it sometimes returns _main_🤔?,

List Comprehension in Python

Environment Variables in ReactJS.

Why You Need Environment Variables

Defining environment variable using .env

Why Isn’t It Working Even After Following These Processes🤔?

What really is "name" (A Special variable) in Python🤔?

Defining environment variable using `.env`