DEV Community: Winnie Magoma

JAVASCRIPT FUNDAMENTALS

Winnie Magoma — Wed, 20 Nov 2019 11:24:47 +0000

Question:

In what scenarios should one use if..else statements and in what scenarios should one switch statements in JavaScript?

Any help will be appreciated.
Happy Coding

Key Components of Accessibility

Winnie Magoma — Fri, 08 Nov 2019 12:33:05 +0000

Introduction

Web accessibility is a necessity to ensure functionality can be operated by all individuals. It is for this reason that the W3C Web Accessibility Initiative (WAI) has put together key components in ensuring how these key components can facilitate in improving web accessibility. These components include:-

 1. Content


Web browsers
Assistive Technology
Users
Developers
Authoring Tools.
Evaluation Tools

Content

Content refers to the information in a web page or web application.It also includes aspects of natural information such as text,sound and images. It also entails the markup or code that describes the structure, presentation as well as the interaction.

User Agents

User Agents refer to the tools, technologies and applications locate,retrieve and display the content of a web page/pages. This includes browsers, browser extensions, plugins text readers and media players. User Agents ensure web functionalities can be operated by everyone.

Assistive technology

Assistive Technology entail software and hardware tools that ensure that individuals with disability can access and interact with the web. Examples include Screen readers, alternative keyboards, switches and scanning software.

Authoring Tools

These are tools that facilitate in the creation and editing of web content.
Examples include Content management systems such as Wordpress, Joomla, Drupal and Wix; HTML editors such as notepad and visual studio code and finally social media platforms.

Evaluation Tools

These are tools that assist in determining if web contents meet accessibility guidelines. Some of the tools include HTML and CSS validators. Examples of such tools are detailed here on Web Accessibility Evaluation Tools List website.

Users

Individuals who use the web have various levels of knowledge, experiences, and skill levels that has a significant impact on accessibility. For instance, a user may or may not know how to access the alternative text from their user agent and/or assistive technology as required.

Developers

Developers need to understand and implement accessibility. This also includes designers, authors, managers and anyone who is involved with developing content as well as applications, authoring tools, evaluation tools, browsers and other user agents.

Any suggestions? Drop them in the comments section

HAPPY CODING!!

ACCESSIBILITY FOR BEGINNERS

Winnie Magoma — Fri, 01 Nov 2019 15:23:02 +0000

Yesterday evening, I decided to assess the level of accessibility of a number government websites in my country (Kenya). These websites are key in facilitating the provision of essential services for its citizens and the outcome was heartbreaking. None of the websites checked were accessible nor did the content make any sense (I used ChromeVox Classic Extension Screen Reader) . Visually, the navigation,links, headings and images existed but ChromeVox recognized none of the elements. This means that an individual with visual impairment would find it impossible to navigate any of the websites.

Currently, a large number of tools, websites and apps are created with accessibility barriers that make it challenging to use.According to data provided by the World Bank Organization (October,2019), approximately 15% of the global population lives/experiences some form of disability. This data brings to attention the importance of having accessible tools and sites so as to ensure that a section of users are not excluded from using its products or services.

What is Web Accessibility?

Web Accessibility refers to websites, tools and technologies that are designed and developed so that individuals with disabilities can use them comfortably. This means that such individuals can interpret, understand, navigate and interact with web (and other technological tools) with ease.

Disabilities That Affect Access to the Web

+Auditory
+Cognitive
+Neurological
+Physical
+Speech
+Visual

Accessibility also supports social inclusion for:-

+Older individuals.
+Individuals in rural areas.
+Individuals in developing countries
+Individuals experiencing constant poor internet connections.
+Temporary injuries.
+Individuals using devices with smaller screens such as Smart Watches.

It is necessary for developers and organizations to ensure that their sites are accessible in order to provide equal access as well as equal opportunities to individuals with diverse abilities.

There is a lot to cover on the Web Accessibility. Stay tuned as we embark on this journey together!!

Follow me on Twitter and Github

HELP!!:Installing Sass in Lite-Server

Winnie Magoma — Thu, 25 Jul 2019 21:18:41 +0000

I am having trouble in processing my sass files and it is making it challenging to render changes on my index.html file. I am using lite-server as my local server for a fun project I'm working on.
I will post the structures of my files and in the hope of getting assistance. I do not know where I'm going wrong.. Any assistance will be appreciated. Thanks

Here is my file structure:

Here is my sass index.html link[referencing]:

Error displayed after compiling:

ReactJS File Structure

Winnie Magoma — Tue, 02 Jul 2019 07:38:14 +0000

I have been playing around with ReactJS for approximately two weeks now and i find it interesting. However, i have come across something new: How to put files into folders. This brings out a number of questions:

What is the importance of putting files into a structure [In React] ?
Is there a particular approach that you currently use that eases the process building and accessing React Apps? Thanks

Git Branches

Winnie Magoma — Sun, 30 Jun 2019 22:19:20 +0000

This is something that has been bugging me for the better part of my Sunday afternoon. In what scenarios should I use a branch or branches when working on my on git through Github or other existing DVCS? Can I use it when working on personal projects or it is only suitable for collaborative projects?

ISSUE: HELP!!!!React JS Displaying an Empty White Screen

Winnie Magoma — Thu, 14 Mar 2019 09:37:28 +0000

In the past few days i have been tirelessly been trying to understand a number of concepts in React JS, a JavaScript framework. However, the local installation process of the framework has not been a walk in the park but i was able to successfully finish the installation process. However, I am unable to identify why my nothing is rendered on my browser. I have tried diagnosing for errors but i have been unsuccessful. I'm not sure what is missing. Any assistance will be highly appreciated. Thanks.

tags: ---ReactJS,codenewbie,javascript,100daysofcode,womenwhocode,womenintech,kenya

Below are the codes for my webpack.config.js file

```javascript
  <pre>
<code>

 const webpack = require('webpack');

module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',

}
};

```

Below are the codes for my package.json file

      <pre>
    <code>

     {
  "name": "reactoneapp",
  "homepage": "",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
  },
  "keywords": [],
  "author": "Winnie Bosibori",
  "license": "ISC",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "jquery": "^3.4.1",
    "mongodb": "^3.2.7",
    "popper.js": "^1.15.0",
    "react-hot-loader": "^4.9.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3",
    "webpack-dev-server": "^3.7.1"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "description": ""
}


  </pre>
    </code>
     ```














**Below are the codes for index.html file**




```javascript
      <pre>
    <code> 
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My First React App</title>
</head>
<body>

    <div id ="app"></div>
    <script source = " ./bundle.js"></script>

</body>
</html>
 </code>
 </pre>

Below are the codes for index.js file

      <pre>
    <code>
import React from 'react';
import ReactDOM from 'react-dom';


var greetings = React.createElement('h1', null, 'Hello Winnie!!')
var div1 = React.createElement('div', null, greetings);


ReactDOM.render(

    div1,
    document.getElementById('app')

); 

<code>
</pre>