Cipsela Street

Dandelions that dive into the digital ocean searching for a bridge that take us to the root of the essential.

[cipselastreet]

Flexbox Froggy Pro

Remember that recently I shared a game to learn Grid in CSS, well, today I bring you another very interesting game to learn Flex Box ... We must thank again our dear friend Thomas, without a doubt it is an ingenious way to learn coding while you have a good time. Give it a chance and play while you learn!

Flexbox Froggy Pro introduces 8 ponds, each with a mix of 20 levels. Replay a pond and face completely new levels each time. Challenge yourself to beat them all! Practice and improve recall of CSS flexbox properties and values.

Enjoy! :) 

Play here: https://flexboxfroggy.com/ 

[cipselastreet]

Flex Box

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS web layout model that allows us easier distribution, and alignment, of items that is applied to.

By using CSS flexbox you have a ton of new attributes to apply to your CSS elements to make your layouts easier to accomplish and much more 'flexible' :) 

But to start we must talk about the main axis, determined by the property of flex direction and the cross axis, this one runs perpendicular to the main axis.

This may sound a bit complex, but for people who are more visual for learning (like me) there are some resources that can help us understand the logic behind all this new language.

That is why I bring this post with information collected from a wonderful website that is giving me a light to understand what is all this fuss about flex box ... which no longer seems so terrible or crazy. This site is https://css-tricks.com/ 

Well, without more, I leave you a small sample about what I have read on this website, I really recommend you to visit the link to discover more interesting things about CSS and its tricks! Enjoy!

Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”)

Properties for the Parent (flex container)

display

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

flex-direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

nowrap (default): all flex items will be on one line

wrap: flex items will wrap onto multiple lines, from top to bottom.

wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

justify-content

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Flexbox is a broad topic, but once you start with it, step by step, things become more understandable and easy.

I think that something that has caught my attention is that at the beginning I thought that this coding thing would be too boring and only for nerds or something similar... However, I think that to my surprise, I find myself enjoying it and wanting to know more and more. I like to communicate and without a doubt, coding is a form of communication and therefore a way of creating bridges. Do not stop exploring, there is much more to learn...

Source:  https://css-tricks.com/

[cipselastreet]

Netherlands + swings = Your battery charges.

There are many ways to recharge a mobile, but this is one of the most fun!

As we increasingly depend on batteries, we must find new ways to recharge our phones, wireless headphones, smart watches, etc. But what do you think of the idea of ​​recharging your cell phone while you swing?

Yes, that's Play for Power, a swing that recharges your mobile when you use it.

The idea is from the advertising agency ID310, at the request of the Dutch Railways. In the Central Station of Utrecht, in the Netherlands, swings have been installed that recharge the mobile while you wait for your train to arrive.

Its operation is very simple: you just have to connect the mobile to a USB port connected to a generator. The swing seats have straps connected to gears that move when the seat swings. These gears generate kinetic energy that activates a generator that transmits electricity to the mobile battery.

Most likely, it will take a few hours to recharge the mobile to 100% using this system, but that is the least of it. The important thing here is that you have fun on the swing while you wait for the train, and when you leave, the battery of your mobile has been recharged with your own effort. 

I think it is a brilliant idea … the only one but it is Covid, but we are already fighting against it.

Source: https://computerhoy.com

[wacastle]

[cipselastreet]

My classmate and also friend Pri, has her own Tumblr Account with so many interesting posts about Web Authoring, that I really recommend you to have a look at it. 

Her blog is so neat and clear, and the illustrations she has made are super useful! 

Thanks Pri for all your designs, because they helps us to understand and to get less scary when coding! 

[cipselastreet]

Grid Garden

Today I share an excellent interactive game that I got to know, thanks to the Web Authoring module that I am studying at Griffith College.

In this game, you must water your carrot crops and poison the weeds by mastering CSS grid, a powerful new module that makes 2-dimensional grid layouts a piece of cake. With it you can define columns, rows, and grid template areas. 

This great game was created by Thomas Park

By default, you start at level one with a total of 28 levels from start to finish. You can always skip levels if you think any are too hard, but I would say that it’s always good to work through them and give you the chance to get them right.

Thanks Thomas! 

 You can find more about him here:  https://thomaspark.co/

And also you can play the game at this link: https://cssgridgarden.com/

[cipselastreet]

What are cookies?

Cookies are not just delicious to us in the real world, but they are a favourite thing in the web universe… Specially for companies.

Cookies are small text files that are stored on your web browser and computer. They help companies’ websites know more about you to customise your experience. Its because of cookies that your language preferences on a site are saved.

Recommendations based on what you previously clicked on can be made, contents on your shopping are still there when come back to the website a few days later, and marketers know weather or not you are new or returning visitor to the site.

So how do cookies work? Think of James as you surfing the internet. 

Every website he visits is like visiting a new Lego house. Some houses, or websites, have cookies and other do not. If the house has a cookie, they put the cookie on James’ surfboard which will represent as your computer. This cookie has two features.

First, it stores information about him, his language, the items he saved, what time he last visited. This cookie also starts leaving crumbs behind, as James surfs the house. Now because of the information the cookie and the cookie crumbs have, this landlord can know where James went in the house. Did he stop in the kitchen? Did he visited the bedrooms…? So next time James comes back to the same house, or the website, the landlord will look at the cookie, he stored on James internet surfboard and read information than can help him easily recommend something new. This cookie is helpful for the landlord, to improve his profitability and services for customers in his house, and secondly for James, for him to have a better customer experience when she returns to the same house next time.

However cookies have privacy and ethics issues too. In the early 2000s, Amazon used a cookie to determine if you were a new or existing customer. If you were a new user, they displayed discounted prices on goods that you were interested in getting, but prices remained the same for returning users. While they apparently have stopped this practice, this type of targeted using and targeted discriminatory pricing has been seen for hotels and airlines too. That’s why you get some people browsing privately or clearing their cookies when buying airline tickets.

What cookie crumbs are you leaving behind?

Go into your Privacy settings of your browser and select on Delete Specific Cookies to see all the cookie text files saved on your computer.

Cookies are delicious, just be careful not to get fat.

[nevver]

Man cave, Michel Eisenlohr

[cipselastreet]

Every Webpage on The Internet is HTML + CSS + Java Script

Think of them as the foundation of coding language of the internet... Just as Belgium has 3 official languages: French, Dutch and German... Web pages also have languages (html, css, java script) :)

You might have heard about them, but do you know how do they work?

They work like 3 good friends doing an assignment together (fun and productive), where each of them is the master in their area.

So we have:

html (Hypertext Markup Language) "the builder"

Css (cascading style sheets) "the artist"

Java script “the wizard”

For now I think I understand the builder much better, that by the way I have learned very well the importance of organization and the order in which you must put the codes, since it depends on this that your website achieves the style that you want when you build your css.

If you organize everything correctly and consistently you will be able to communicate exactly what you need.

This is a new language and like everything new, at the beginning it is a bit abstract and complex, but little by little you become familiar and so... who will stop you one day from Padawan to Jedi ✿

[cipselastreet]

HTML language

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It describes the structure of web pages. That means that we use HTML (lots and lots of codes) to build documents to be read online.

So to have a web page that says, for example, "Hello World" you would have to write the following:

And then you will have this:

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

Well... What can I tell you ... Now imagine the amount of codes that are wrapped in the web pages that we look at daily ... I think I'm starting to build a path to be a quirky hahaha ... I'm just joking! It is actually very interesting, it will be a challenge, but everything can be learned if you want to :)

Oh yeah, before I forget… You don't need to buy any software to start editing in html. You can do it in the Notebook that comes in windows or in TexEdit that comes in Mac....And...you can also do it in Atom. I am learning to write in codes in Atom, a free program that makes your life easier as it has additional functions, error checking and well, it is a more intuitive editor. I'm still figuring it out, but the difference between using the notepad and Atom is easily seen.

If you want to try and download the program here is the link: https://atom.io/

Also I want to say that every time you start an HTML document the first thing you have to do is to write <!DOCTYPE html> This declares that the file is an HTML5 document.

Now, HTML consits in a tree of elements. Elements are the building blocks of web pages. So this elements are the paragraphs, headings, images, links, sidebars, etc… that you want to have in your webpage :)

I know, it may sound a bit like Chinese, but once you understand the logic behind this, things start to clear up ... Or at least I hope so!

[cipselastreet]

The Internet vs The Web

These are two terms that we use on a daily basis without making much difference between them. However, there is a difference...

Let's review a bit of history.

Years ago during the cold war build up, the Advanced Research Projects Agency (ARPA) that was created in the USA in 1958 led to a creation of a department called the Information Processing Technology Office (IPTO) which started the Semi-Automatic Ground Environment (SAGE) that linked the radar systems of the USA together. In that time, there was a lot of research going on in the world and the University of California in Los Angeles got the ARPANET. This was a relatively smaller version of the internet in 1969. Due to its necessity, the Internet was developed tremendously to be what it is today.

The web however was invented by sir Berners Lee. Tim Berners envisioned the web as an elaborate information management system. Alongside Robert Calliau, he published a formal proposal for the World Wide web on November 12 of 1990. By December 1990, Berners Lee had built all the necessary tools for a functional Web. These included the first web browser and first web pages which were majorly about the project. He posted a short summary of the www project on the alt.hypertext newsgroup on 6th august of 1991 and this marked the introduction of the web as a publicly available service on the internet.

So now... Can you see what is the difference?

The Internet is a connection of interconnected computers. This is a series of millions and millions of devices all connected together and can communicate with each other thus the interconnected networks.

The web is a collection of digital pages that are viewable over the internet using a web browser. These web pages contain lots of content which is mostly dynamic. And as you can imagine the nature of the wide world web has turned it to be the most vast collection of human knowledge ever, and of course the most vast collection of fake news...

Anyway, this is something basic but important to understand if we want to enter this world that rules us today.

[verenawulfweb]

A Cloud You Can Touch

Of course, we all know that in order to send an email, we need a computer (or any other web-enabled device). We type the text, input the recipient’s address, press a button, and seconds later the other end receives our message. A very simple process. In fact, it’s so simple even my 93-year-old grandpa manages to send me the ‘thumbs up’ icon via Facebook (along with many other randomly elected icons he presses accidentally during the process). 

I must admit, I had never given much thought to what actually happens with my message after I press the ‘send’ button. The question has crept up on me a few times: Does it dissolve into tiny particles that float in the air and then get put back together? How do the particles know in which order they need to accumulate again? Where do they end up if they get lost? And how do they know where to go? Kind of like the question ‘Did I exist before I was born?’ I quickly dismissed those thoughts because they seemed like unsolvable riddles out of this world and beyond my comprehension.

Image: A Google Data Centre. Available at theguardian.com

Luckily, in order to tackle those questions, one does not need to go into metaphysics. The answer is, indeed, (at least partially) quite physical. Even though it was nothing new to me when I read it again recently, I tend to forget that all the information we send back and forth needs to be stored somewhere. And this ‘somewhere’ are giant data centres housing huge server farms consisting of servers containing our information. That means the information we send and receive in form of simple messages requires electricity, physical space and security personnel (Yes! People are guarding your smoochy-emojis!).

What had definitely not crossed my mind before, but what was brought to my attention in an article by The Guardian about Pointless Emails, is that every message we send leaves a carbon footprint, and consequently every unnecessary message we do not send is good for the environment.

Will I tell my grandpa to please send me less pointless emojis? Probably not. That would be just cruel.

[cipselastreet]

Welcome to my life

T1:E1 “The beginnings” ===>The expectation of opening new doors.

It has been a bit difficult to feel totally convinced to start writing a new article on my blog.

I'm one of those persons who takes time to digest things before talking about them. The truth is that I am new to this language of coding in html and creating web sites, but for now, everything I have been learning seems very interesting to me.

I must confess that every time I learn a new code and put it into practice, I always do it being very strict about whether I put the tag correctly, if the html declaration is correct, whether or not I closed each section ... and well, that pass the bill, because sometimes I feel that it takes me ages to verify everything ... HOWEVER ... once verified and opened, not in ATOM, but, as a website ... and see that in effect, each of the codes has worked out… generates a feast of fireworks inside me ... I go step by step, but safe and happy with what I have learned until today ...

From now onwards, wait for more publications where I tell you how I am doing in this new stage of my life: the coding one.

- What is not shared rots - I do believe this.

Dear html language, welcome to my life.

[cipselastreet]

Big Brother is watching you

Not many months ago I read Orwell's book 1984. A fascinating and dystopian book that tells us about how the system keeps society in repression. The system, known as the big brother, is in charge of mentally feeding the population through the choice of what to look at, listen to, speak and read. Freedom is only an illusion and those who seek it, risk being imprisoned, tortured and through torture, being forced to convince themselves that rowing against the current is dangerous ... They are convinced that actually  they love, adore and depend on the system because the system makes them "who they are." The system is ...The big brother.

It's funny how we as a human beings easily give ourselves up as slaves.

The elements mentioned above make it clear that Orwell was not so wrong about the dystopian world he created in his narrative. Our world gets more and more used to eating lies and half-truths (which in the end are also lies).

This is stated in the documentary The Social Dilemma which is a 2020 American docudrama film directed by Jeff Orlowski and written by Orlowski, Davis Coombe, and Vickie Curtis. The film explores the dangerous human impact of social networking, with tech experts sounding the alarm on their own creations. If you haven't seen it, I really recommend that you look at it and together we reflect on the power we give to certain companies to manage our data and feed our minds with what they want. If we think about it twice, it is actually very dangerous.

Don't get me wrong, I don't think technology, digital media or social networks are the problem. No, they are not the problem. The problem is, as always, in how we use the tools that we have at hand.