Forem: Sara °°°

Understanding Http Get request & PODO (Mapping received data) in Flutter!

Sara °°° — Mon, 12 Jul 2021 15:41:17 +0000

For every application to be dynamic and fully interactive it needs to communicate with the back-end using HTTP requests, after handling the requests you can use the received data immediately, but to make it manageable and easy to handle one should map it into PODO (Plain Old Dart Object), it's a way for you to deserialize the response you received into Dart objects, this way it will be much easier for you to manipulate the data within your app and back-end, by creating, updating, deleting, or just reading.

So this article will take you through the two parts of the process, Communicating with the pack-end using HTTP requests, and mapping received data into Dart model!

Communicating with the back-end using HTTP requests

Applications frequently need to perform POST, GET, and other HTTP requests, in flutter you can use HTTP package, A Library for making HTTP requests.
The first step is to add the HTTP package to your pubspec.yaml file.

dependencies:
  http: ^0.13.3

Run the following command flutter, after each edit in the pubspec.yaml, it downloads & gets all the dependencies listed in the file.

$flutter pub get

Import Http package in dart file by using

import 'package:http/http.dart';

Also Import Convert package because you are going to need it for decoding JSON Response

import 'dart:convert';

For our example in this article we are going to use JSONPlaceholder API, a free fake API for testing and prototyping, using the endpoint https://jsonplaceholder.typicode.com/todos that returns a list of fake todos.

So, How are we going to receive this data?
Using a get request, then decoding the response, just like in the code snippets below.
The first line is receiving the response using get request; the second line is decoding the result and casting it in the form of List

var response = await get(Uri.parse("https://jsonplaceholder.typicode.com/todos"));
    final List<dynamic> bodyData = json.decode(response.body);

Woohoo! Up until this step, we managed to receive our response from the server, our data is resting inside our App, we should welcome it and be good to it :)
The next step is deserializing this result into a PODO, this step will help us deal with our received data as dart models!

PODO!

What is PODO and why use it?
The naive approach to decode the JSON and display the deserialized data in the app is via the PODO (Plain Old Dart Object) approach where a class with all the objects(with their respective data-type) closely resemble the keys in the JSON, and the objects resemble the values.

How to implement it?
First, we create a class with the instructor
in a separate dart file, the class should represent our received data, the more objects you receive the more classes you will need to add for each.
For our example, this is the structure of our received data, its simple, no nesting's.

So now add the following to the class

class ToDoModel {
  int userId;
  int id;
  String title;
  bool completed;

  ToDoModel(
      {required this.userId,
        required this.id,
        required this.title,
        required this.completed
      });
}

Then create a fromjson method, this method is going to handle the actual process of mapping the received data into dart model, all inside the same class, be careful not to misspell the names in the method with the names in the received JSON structured data

factory ToDoModel.fromJson(Map<String, dynamic> data){
    return ToDoModel(
        userId: data["userId"],
        id : data["id"],
        title: data["title"],
        completed: data["completed"]
    );

The last step is we have to call this method after receiving the data, as you can see because the data received is a list, we will loop through this list converting each entry into a dart object then add that object to our list of dart model

  bodyData.forEach((toDo) {
      ToDoModel task = ToDoModel.fromJson(toDo);
      myToDosParsed.add(task);
    });

Now our data is fully rested in our app and ready to be used!

Summary

So in this article, we went through the whole process, Communicating with the back-end using HTTP get request, mapping received data, and making a tiny app that views all to-do lists in a listView.builder widget.
Now you can do the same, or continue trying and manipulating this app by cloning App Repo.
Keep in mind that sometimes the steps might vary slightly when it comes to casting the received response from the server, based on the data structure of your JSON result. like list, maps, doc snapshot if you using firebase...etc.

Feel Free to ask for further details about the process or about using the other HTTP requests :)
I have added some sections to the article in my personal website's blog, you can find it here The full article

Notes

The process of converting a Dart object to a JSON one is called JSON encoding and the reverse process i.e. converting JSON object to Dart one is called decoding.
Instructions above works with any back-end, the only thing that will differ is the decoding of the received data into the dart model because sometimes you might need to do more casting according to the received data.
Article focus is on the process of converting received data into PODO, that's why the rest of HTTP requests; POST, DELETE, PUT were not discussed with their respective PODO operations.

6 Learned Lessons From My First Year Working From Home & Being a Freelancer.

Sara °°° — Mon, 27 Jul 2020 22:19:22 +0000

We have an Arabic saying that says: "An eyewitness is better than hearsay".
During the past year, I was working from home as a freelancer, at first, I was so excited about the whole thing, especially that I was done with my previous work in a company, I hated 5-9 so much. But with the time, I figured that working from home has it's own challenges too, and they are not easy to deal with, one can not think about these challenges unless actually trying to work from home.
So here are some really important aspects that you should put into consideration when working from home or as a freelancer. Even if not, because currently due to the Covid-19, a lot of people shifted to work from home.

1 Time management skills are essential

In my opinion, this is the most important one, If you didn't pay attention to it, you will suffer greatly.
Suddenly you will find yourself working 24/7. Even when you don't want to, and be strict with your self when the work time is over, then it's over, no excuses, you need these breaks so you won't lose your balance.

2 Focus

One technology at a time, one tool at a time... Etc.
When the is no obvious boundaries like the ones that are required by the company you are working on, you can get tempted and distracted easily by all the technologies that come in your way! Then stretched too thin, so end result will not be that good.

3 Make reasonable goals

Setting small consistent goals is a must because it will make you motivated each time you accomplish a task or take a small step. Setting one big goal might be so frightening at the beginning and not so digestible.
Remember that our industry is changing rapidly, it's hard to even the very experienced developers to know it all.
So just relax, and set them small goals at first.

4 Celebrate the small wins and treat your self very well.

While working in a company, a salary raise, a promotion, a nice word from your boss, all are nice acts that will motivate you to provide more. But when you are a freelancer you have to do all this by your self; will We are human beings, we need to reward our selves always to keep us moving forward and motivated, don't underestimate the power of rewarding yourself. Be kind to it.

5 Change your work environment as much as you can

Working from home will make you mess the chance of communicating with people in the work environment, so change your routine often so you don't get bored.
Even though am more of an introvert, but staying at home for this amount of time is too much,

6 Have some physical outside activities

Coding is a mind activity, exhausting your brain and setting in front of the computer for long hours is bad for your health. Keep moving, balance the mind activeness with the body activeness.

8 Ways To Test & Debug Your Web Apps Using Web Browsers

Sara °°° — Thu, 16 Jul 2020 18:58:18 +0000

Testing and Debugging are essential activities during the software development life cycle, specifically in the software development and maintenance phases, it is a fundamental step to produce a high-quality product.
While Testing is performed to check if the code contains errors, debugging is done to locate and fix these errors.

Among the many ways and methods to perform debugging and testing, Browser offers comprehensive tools, which are so powerful.
It allows developers designers or testers to work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web browser.
Due to increasing demand from web browsers to do more, Popular web browsers have included more features for developers.

The tools we are are talking about are called web development tools or web tools and can be used with web applications.
It comes as browser add-ons or built-in features in it.

Most popular web browsers, such as Google Chrome, Firefox, Internet Explorer, Safari, and Opera, have built-in tools, and many additional add-ons can be found in their respective plugin download centers.

In this article, we are going to explain 8 ways for you to use these tools, which will save you time and make your test experience more efficient and fun.

Please note that Web browser screenshots that are taken for examples below are taken from Microsoft Edge web browser, however differences are not that much between all broswers development tools.

How can I access these tools?

Open up your browser, and then right-click the mouse then select inspect elements, or just open up your browser then press Ctrl+ Shift+I.
Below is the screen that you will get after performing this step

Pointer. Used to point on the wep app elements (for example: an image or any other DOM element).
Change the screen display for your web app (pointed in #6).
Tools Bar.
Change the tools display, which has 4 options 2 horizontal (Upper horizontal part of the screen / Lower horizontal part of the screen)options and 2 vertical options(Left side of the screen/ right side of the screen).
The display for the selected tool chosen from the tools bar (pointed by #3).
The display for your web app.

8 Ways to debug and test using the web browser

I. Console Tab.

Mainly its benefits when using Javascript, you can use console.log() to trace your variable in your code, and know what are the actual variables are holding, values that you log out using console object and log method will be found in the console tab.
The consoles allow developers to type in JavaScript commands and call functions, or view errors that may have been encountered during the execution of a script.
Developer can get the results in the console display as shown in the image above.

II. Network Tab.

When you have a function that returns a result from a backend, but somehow you are not receiving anything in the program view, just open the browser, get to the tools and click on the network tool in the tools bar, then refresh your page and watch all the coming requests through the network.
then trace and check if you are really calling that method, sending the desired parameters, and if it's really returning the result that you are looking for, this way you will be able to figure out if it's view related error or back-end related error.
as you can see in the screenshot below, all requests are listed in the left side of the display screen

Just double click on the request that you want to check, and another display on the right side of the screen will be shown, where you can examine the details of the request(eg; response, header, time is taken to execute...etc), just like in the screenshot below

III. Application Tab.

This tool will help you to view all data stored in your application(Eg, Cookies, Local Storage, sessions...etc)
For Example; Using local storage is common to save some simple data, if you need to check what are the actual values currently stored in your app local storage, you can check it by using the browser application tab.

IV. Edit your element's CSS or HTML.

It allows you to edit your CSS or html and see the results live in the browser, but your original file will not be affected by these changes, as soon as you refresh the page it will be back to the original style.
To Perform this one, you have to click on the pointer (#I As described in the first screenshot in the article), then hover over the element you want to manipulate or just you want to check.

As in the Screenshot above

Is where the pointer is pointing.
The CSS of element pointed to in point number 1 above.
The Html code of the element pointed to.

V. Inspect to know what CSS classes your DOM element is really holding.

-You can refer to the screen shot in the previous point (#IV).

Just like what we have viewed in the previous point, This helps A looooot when you can't determine what classes are affecting your Html element or tag! Sometimes you are applying edits but somehow it's not being implemented! The reason is that these elements are inheriting some CSS classes from a parent elements, locating these parents elements to help you un-inherited their CSS class can easily be traced using the pointer, just point to the element using pointer, and all the CSS code that is applied to that element will be displayed in the css section, check it carefully, also you can check and uncheck CSS classes and properties and see the direct effect on the element, how cool is that?

VI. Inspect to view what each DOM element is actually holding (js values).

-You can refer to the screen shot in point (#IV).

Let's say you are passing JS values to be views in an Html element or tag, and need to view what is the exact value being passed because for a reason it's not showing up right in your app. Using the browser pointer it can help you see the values and determine the cause of the issue.By pointing to the required Html element, and the value that is holded will be displayed in the code part.

VII. Color Picker tool.

Although it's so simple this one is really one of my favorites, by using this brush you can get the code or RGB of any color you came across while browsing the web.
All That you need to do is to inspect any of the elements in the page, then in the CSS part click on color (the color rectangle itself, you will get a small screen with a color picker icon, click that icon and then press on any color you want to get in the page, details of the color will be displayed in the color rectangle) just like shown in the screenshot below.

VIII. Profiling and auditing

This one I personally don't use a lot, but you should also know about it.
Edit Profiling allows developers to capture information about the performance of a web page or web application. With this information, developers can improve the performance of their scripts. Auditing features may provide developers suggestions, after analyzing a page, for optimizations to decrease page load time and increase responsiveness. Web development tools typically also provide a timeline features that provide a record of the time it takes to render the page, memory usage, and the types of events that are taking place.
These features allow developers to optimize their web pages or web application.

Conclusion

With all that being said, ways explained above are only a part of what you can do using these amazing tools, so practice the one mentioned above, and then explore the rest to develop your testing and debugging skills even more.

What about your favorite web tools?

Do you have a favorite web tool? Or web tools?! Please share it with us in the comments section below.

Technical Interview Questions For A Back-End Job Position

Sara °°° — Wed, 08 Jul 2020 23:02:42 +0000

What questions one should expect when applying for a back-end job position?
For a developer with 2 years of experience in programming.

Job Description contained Microservices, unit testing, automation, Message Queues, RPC, Caching...etc

Managing your time as a junior software developer who wants to make a progress.

Sara °°° — Sun, 01 Dec 2019 17:32:08 +0000

Lately I have been struggling to make a good balance between my coding gools and my work as a software developer freelancer, so I have started to question my self? What am I doing wrong?
Is it a bad time management, gools are not realistic? Lack of motivation?
I can't find an answer till now...

Another factor is that I have to use number of technologies because the team am working with are using it, it's good for me to find this environment, and I have been learning a lot by coding projects with team, however sometimes I feel like am not doing enough, or am not able to be as good as them, I know they have much more experience than I do have but the feeling I get can not be ignored.
At the same time I want to learn the newest technologies, am taking two course to do so.

Sometimes I feel like am distracting my self instead of focusing on a couple of things at a time.

Now I have completed one year as a software developer. But I need some advice on how to balance between my personal coding gools and my work.

Solutions To Store Data Temporally (local storage).

Sara °°° — Thu, 24 Oct 2019 21:33:30 +0000

What are we talking about?

While we are developing a web app or mobile app, Some of the data that needs to be stored will have to be permanent and hence should be saved in the Database, But other times you will need just to store it temporally and not for a long time, that's were you will need a client side solution that offers data storage possibilities to store values temporally.

Local storage.
Sessions.
Cookies.
SQLite.

In this article we are going to go discuss using local storage.

What is a local storage?

A type of web storage that allows JavaScript websites and apps to store and access data right in the browser with no expiration date.

How it really works?!

Keep it mind that its in Key, Value format, with the use of methods:

setItem(): Add key and value to localStorage.
getItem(): Retrieve a value by the key from localStorage.
removeItem(): Remove an item by key from localStorage.
clear(): Clear all localStorage.
key(): Passed a number to retrieve nth key of a localStorage.

js
//To set Student data
function SetStudentData() {
window.localStorage.setItem('Name', 'Sara');
window.localStorage.setItem('Age', '22');
window.localStorage.setItem('Gender', 'Female');
}

// To get Student Data
function GetStudentData() {
var name = window.localStorage.getItem('Name');
var age = window.localStorage.getItem('Age');
var gender = window.localStorage.getItem('Gender');
}

How Can i view local storage saved data?

To View saved data, while on browser after running your program, press right click --> Inspect or Inspect elements in some browsers --> Then based on your browser type, look for storage or Application --> you will then find a tab or a link with name: local storage.

Chrome

FireFox

Example for a Scenario that requires using local storage

At this point you might be wondering? what possible scenario would a good fit to use local storage solution!

let's say you are developing an X/O Game, We will have to store the value of each Square (Will assume that squares ranged from value 0 to 8) to be able to compare it later, So one possible solution is to save it by setting the value selected for each square in localstorage, and then compare it later by getting values and compare it using one of the conditional statements and loops.

Advantages

It is very handy for key-value pairs.
Stores data with no expiration date unlike session where is loses data after a specific amount of time.

Disadvantages

If user deleted or re-install app all data will be lost.
If user deleted the data of application it will be lost.
Hard to store complex data
You cannot "query" your data
If you are using more than 1 webview on your mobile app you need your HTML5 content to came from the same domain, otherwise the LocalStorage data will not be shared across webviews.
Storage limitation (~5MB) depend on browser. (for more info here)
Only store string so you will end up convert into json (JSON.stringify) and query through JSON object
Once the mobile storage is full, it will force pure all the data inside storage.
Insecure as it has no form of data protection and can be accessed by any code on your web page.

Ps.

Before using web storage, check browser support for localStorage and sessionStorage:

js
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

Conclusion

So from what has been declared above, if your application store small amount of data or mostly do transaction or processes with online database. local Storage is likely a good option.

After all that have been said what is your favorite way to store values? And why do you prefer it? also in what scenario you prefer to use such solutions? Please share it with us in the comments section below.

I can't find my Reading list on dev.to

Sara °°° — Fri, 09 Aug 2019 17:10:17 +0000

It's been a while since this is happening, I can't find my reading list although it contains a number of articles

but whenever i visit the link this is what am getting, an empty reading list.

Can any body help!

Visualize Data using chart.js library (Tutorial)

Sara °°° — Fri, 12 Jul 2019 19:55:41 +0000

Sometimes in the software we build we find that we have to deal with data sets which cannot be viewed clearly unless we visualize it, we don't get the chance to have a bird-eye view to what's really happening in our project's data, here where comes the importance of Data visualization, using charts is one of the ways to visualize data.

" A chart can take a large variety of forms, however there are common features that provide the chart with its ability to extract meaning from data.

Typically the data in a chart is represented graphically, since humans are generally able to infer meaning from pictures quicker than from text. Text is generally used only to annotate the data.

One of the most important uses of text in a graph is the title. A graph's title usually appears above the main graphic and provides a succinct description of what the data in the graph refers to.

Dimensions in the data are often displayed on axes. If a horizontal and a vertical axis are used, they are usually referred to as the x-axis and y-axis respectively. Each axis will have a scale, denoted by periodic graduations and usually accompanied by numerical or categorical indications. Each axis will typically also have a label displayed outside or beside it, briefly describing the dimension represented. If the scale is numerical, the label will often be suffixed with the unit of that scale in parentheses. For example, "Distance traveled (m)" is a typical x-axis label and would mean that the distance traveled, in units of meters, is related to the horizontal position of the data within the chart. "

This blog is a tutorial on using the JS library chart.js.

Chart.js

Chart.js is a JavaScript open source library that allows you to draw different types of charts by using the HTML5 canvas element. Since it uses HTML5 canvas , you have to include a polyfill to support older browsers.
Its responsive, have Interactivity features (Mouse over - on click),and also use legend also known as a key. A legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart.

Types of charts supported

Line Chart

Bar Chart

Radar Chart

Pie & Doughnut Charts

Polar Area Chart

Bubble Chart

Scatter Chart

Area Chart

Mixed: With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types.

How to use chart.js in your project

Below two examples, one with Dynamic data that is passed from a controller to a view via JSON. In second example data is fixed, not passed from anywhere.

Example (1) Data Passed from a controller

If we decided to use charts then we have some data sets, chart.js deals with data in form of data sets.

In the beginning include chart.js library to your project.
In example below, we used Ajax along with JSON object of lists to pass the data from a Controller called Charts to our view, it's up to you to decide how to send the data to the canvas. Or if Data is fixed then no need to JSON or Ajax just add data sets in form of fixed arrays/lists. Type of chart used is Doughnut.

Usually we will have 3 data sets that can be represented using an array or a list:

Data set of the labels.
Data set for the Quantity or value that represents each of the labels.
Data set for the colors that represents each of the labels.

In controller, Method that process and send data from controller to view

html
[AllowCrossSiteJson]
public ActionResult PieChartData()
{
List labelsList = new List();
List dataList = new List();
List colorsList = new List();

//Add the code that process data from Database to be added to the three lists

return Json(new { labelsList, colorsList, dataList }, JsonRequestBehavior.AllowGet);
    }

In View, add canvas tag that the chart will be displayed in later.

html

$(document).ready(function () { $.ajax({ type: "get", //Charts is the controller // doughnutChartData is the Actionresult method that sends the JSON data to the view url: "/Charts/doughnutChartData", dataType: 'json', //When success, data is the JSON object of lists passed from doughnutChartData method success: function (data) { //Making chart by using new Chart, and the canvas element with the id: doughnut-chart new Chart(document.getElementById("doughnut-chart"), { //Specify type of chart type: 'doughnut', data: { // First data set that contain labels, its accessed through JSON object data. labels: data.labelsList, datasets: [{ label: "", //Second data set which contains a list of colors that will represent each label backgroundColor: data.colorsList, // Third data set which contains the value of each labe data: data.dataList }] }, // using Configuration Options, one can customize the chart, its explained below in a separate paragraph options: { legend: { display: false }, tooltips: { enabled: true }, maintainAspectRatio: false, title: { display: true, text: 'Sales/ Item for Current Month' } } }); }, error: function (error) { console.log(error.responseText); } }); });

In code above, first, the three data sets that represents our data was declared, and its ready to be displayed in the view, but making adjustments and customization can be done using Configuration options.

Configuration

The configuration is used to change how the chart behaves. There are properties to control styling, fonts, the legend, etc.

Global configuration

This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.

Configuration options:

Animation

A number of options are provided to configure how the animation looks and how long it takes.

Layout

Padding. If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the left property defines the left padding. Similarly the right, top and bottom properties can also be specified.

legend

The chart legend displays data about the datasets that are appearing on the chart.

Title

The chart title defines text to draw at the top of the chart.

Tooltip

Tooltips are the labels that appear when users hover over data points on your chart.

Elements

While chart types provide settings to configure the styling of each dataset, you sometimes want to style all datasets the same way. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: arc, lines, points, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

Resulted Chart after applying code above:

When applying code Hovering over each color will display the label of each value.

Example(2) Fixed Data

html

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});

Just Copy paste the second example and View result in your browser ;)

Further reading
Chart.js
Download chart.js
Configurations Options
Comparison of JavaScript charting libraries
Features of a chart

Your feedback on my website portfolio!

Sara °°° — Tue, 25 Jun 2019 23:10:08 +0000

Here is the first draft of my portfolio that i have created using CSS, HTML, and JS, i need your feedback before publishing it.

One thing am planning to add is a logo.
Also am not satisfied yet with the projects section design, any ideas?
What you think about the font?
Do i need to add more sections, like CV?

Projects listed are Imaginary i didn't create any of them, but will add later when i finish developing

Kindly find the link:
My Portfolio

Thoughts on first Technology meetup I've attended...

Sara °°° — Sat, 22 Jun 2019 22:58:04 +0000

As a Computer science graduate, previous technical support, and a current programmer, i have been into tech related events before, but this one was a little bit different.
Following up my plan to grow my network, i decided to go to this meetup, i look it up in Meetup website.

This meetup was in Egypt Damanhour a small city that is one hour away from Alexandria, I didn't have any geek Egyptian friends, and it's my first time to come to Egypt, so i was excited and a little bit nervous at the same time because i didn't have the slightest idea about the Egyptian technology community, haven't been in touch with any of its members, or searched about it online! and visit to Egypt was originally for a family vacation.
That's why it was different.

Organizer of the meetup?

Google Developers Group Damanhour (GDG Damanhour).

"GDGs are local groups of developers who are specifically interested in Google products and APIs. Each local group is called a GDG chapter and can host a variety of technical activities for developers - from just a few people getting together to watch our latest videos, to large gatherings with demos and tech talks, to hackathons.
Google Developers supports and recognizes GDG chapters, but doesn’t own or manage them."

Topics that were covered?

It contained 3 parts, each of which was an introduction for the topic.

Flutter by: Tarek Alabd.
AI by: Gihad Naguib.
Google Cloud Platform by: Wessam El-shaarawy.

For a complete beginner in each of the topics above with a little of basic knowledge in technology in general, content presented was very good, speakers have impressive CV's and very good experiences.

Did i like it?

Yes i did, i got to know about the tech community and tech market in Egypt, Speakers, organizers and participants were so nice, welcoming and welling to answer all questions.

And it was good to see another side, which is google products, a side that i didn't work with any of its technologies yet.

I've even got my first Programmer stickers :D

Attending 2 Tech related events outside Sudan: half Checked ;)

Contributing to open source for beginners. How and Where!

Sara °°° — Sun, 16 Jun 2019 09:43:26 +0000

As am improving my coding skills in every way possible, and after making a research of it's benefits. I have found that one should contribute to open source projects.

How ever; i didn't know what's really happening in that world! Or how should i enter it.

Do you have some practical tips or recommendations for a beginner to start dive in the open source world? a side from learning Git.

And if you know some beginners friendly projects kindly share the link in the comments section below.

Gridbox vs Flexbox.

Sara °°° — Fri, 14 Jun 2019 14:12:01 +0000

In web development we have two main front-end technologies, and they complete each other, combined they handle the job of structuring and designing our webpages view, which are: HTML and CSS, along with other technologies such as JavaScript frameworks that are not mentioned in this post.
Let's say we have a house, we first have to build the structure of the building, the walls, floor and the ceiling, then later we will be painting the walls, decorating the house and getting the furniture in the second step.
HTML (Hyper Text Markup Language) is our structure for our webpage, CSS (Cascading Style Sheets) is the filling, decor and the furniture of the webpage.

CSS

In this post we are going to go through the two layout methods that are used in CSS to make our layout in the webpage or the software pages respectively.

Gridbox and Flexbox

Both are used to set the layout, we will need to have a parent element first to contain Child element(s), child elements of the parent container automatically becomes Flex/Grid items.

Gridbox

Grid based layout system that distribute the pages for rows and columns
A Grid Layout must have a parent element with the display property set to grid or inline-grid, child element(s) of the grid container automatically becomes grid items.

css

.element1{background:gold;} .element2{background:Gray;} .element3{background:gold;} .element4{background:Gray;} .element5{background:gold;} .element6{background:Gray;} .container { font-size: 40px; width: 100%; background: LightGray; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px 50px; } 1 2 3 4 5 6

Result:

Flexbox

Flex based layout system distribute the elements of a row or a column
A Flex Layout must have a parent element with the display property set to Flex child element(s) of the grid container automatically becomes flex items.

css

#box-container { height: 600px; display: flex; } #element1 { background-color: gold; width: 50%; height: 50%; } #element2 { background-color: gray; width: 50%; height: 50%; }

Result:

Then using different proprieties for the parent container, or for the child element(s) one can manipulate layout further, with more enhancements and adjustments in a very flexible way.

Properties used with Gridbox:

Parent element (Container) Properties:

grid-gap property: The spaces between each column/row are called gaps
grid-template-columns property: defines the number of columns in your grid layout, and it can define the width of each column.
grid-template-rows property: defines the height of each row.
justify-content property: is used to align the whole grid inside the container.
align-content property: is used to vertically align the whole grid inside the container.

Child element(s)(Items) Properties:

grid-column property: defines on which column(s) to place an item,You define where the item will start, and where the item will end.
grid-row property: defines on which row to place an item, You define where the item will start, and where the item will end.
grid-area property: can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Properties used with Flexbox:

Parent element (Container) Properties:

flex-direction property: defines in which direction the container wants to stack the flex items.
flex-wrap property: specifies whether the flex items should wrap or not.
flex-flow property: is a shorthand property for setting both the flex-direction and flex-wrap properties.
justify-content property: is used to align the flex items.
align-items property: is used to align the flex items vertically.
align-content property: is used to align the flex lines.

Flexbox Vs Gridbox

So the core different between two ways is that Grid Layout is a two-dimensional system , it can handle both columns and rows, but Flexbox on the other hand is a one-dimensional system (either in a column or a row).

In a more practical Example, you can use Gridbox, Flexbox, parent and child elements properties combined to make a real layout of webpage just like in the example below.

HTML Code

html

Home Features About contact Us Logout Side Bar Section 1 Section 2 Section 3 Section 4 Footer

CSS Code

css
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}

.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
align: center;
display: flex;
gap: 20px;
align-items: center;
}
.box1 > div:nth-child(5) {
margin-left: auto;
}

.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 5;
}
.box3{
grid-row-start: 2;
grid-row-end: 5;
}

.box7 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
}

{box-sizing: border-box;}

.wrapper {
border: 2px solid gray;
border-radius: 5px;
background-color: #fff4e6;
}

.wrapper > div {
border: 2px solid gray;
border-radius: 5px;
background-color: gold;
padding: 1em;
color: #444444;
}

What else you can benefit from using Gridbox or Flexbox?

Responsiveness, so you will have a dynamic layout.
Widely supported across all platforms & modern browsers.
Easy to use.

For further reading

Flexbox
Gridbox

Forem: Sara °°°

Understanding Http Get request & PODO (Mapping received data) in Flutter!

Communicating with the back-end using HTTP requests

PODO!

Summary

Notes

Further Reading & Resources

6 Learned Lessons From My First Year Working From Home & Being a Freelancer.

1 Time management skills are essential

2 Focus

3 Make reasonable goals

4 Celebrate the small wins and treat your self very well.

5 Change your work environment as much as you can

6 Have some physical outside activities

8 Ways To Test & Debug Your Web Apps Using Web Browsers

How can I access these tools?

8 Ways to debug and test using the web browser

I. Console Tab.

II. Network Tab.

III. Application Tab.

IV. Edit your element's CSS or HTML.

V. Inspect to know what CSS classes your DOM element is really holding.

VI. Inspect to view what each DOM element is actually holding (js values).

VII. Color Picker tool.

VIII. Profiling and auditing

Conclusion

What about your favorite web tools?

Technical Interview Questions For A Back-End Job Position

Managing your time as a junior software developer who wants to make a progress.

Solutions To Store Data Temporally (local storage).

What are we talking about?

What is a local storage?

How it really works?!

How Can i view local storage saved data?

Example for a Scenario that requires using local storage

Advantages

Disadvantages

Ps.

Conclusion

I can't find my Reading list on dev.to

Visualize Data using chart.js library (Tutorial)

Chart.js

Types of charts supported

How to use chart.js in your project

Example (1) Data Passed from a controller

Configuration

Global configuration

Configuration options:

Animation

Layout

legend

Title

Tooltip

Elements

Resulted Chart after applying code above:

Example(2) Fixed Data

Your feedback on my website portfolio!

Thoughts on first Technology meetup I've attended...

Organizer of the meetup?

Topics that were covered?

Did i like it?

Contributing to open source for beginners. How and Where!

Gridbox vs Flexbox.

CSS

Gridbox and Flexbox

Gridbox

Flexbox

Properties used with Gridbox:

Parent element (Container) Properties:

Child element(s)(Items) Properties:

Properties used with Flexbox:

Parent element (Container) Properties:

Flexbox Vs Gridbox

HTML Code

CSS Code

What else you can benefit from using Gridbox or Flexbox?

For further reading