WebDevJourney

When coding, have you ever thought about the method of naming the class? I used to give random class names, all kinds of names without following any rules.

And then, a brother in the profession introduced me to the CSS class naming method, which is BEM (Block Element Modifier) a simple naming convention. 

👉You can see more about BEM here: https://css-tricks.com/bem-101/

What is BEM?

BEM is an acronym for Block Element Modifier which is a naming method for CSS classes, it is commonly used and relatively easy to understand.

Why use BEM?

Perhaps your first question will be why should you use BEM? and me too when I first approached BEM, I also asked myself the same question, I don't know if it's really helpful.

In fact, in small projects, BEM does not clearly show its role, until in large projects, having to work with the team, BEM gradually reveals its value as a lifeline. Specifically:

+ Help the team work together more easily, when working together, each person will have their own naming method that is prone to conflict with each other, BEM eliminates this problem when members comply when using

+ Calculate Modules: Classes will not be affected by other classes

+ Reusability: greatly reduce the amount of code

+ BEM creates a solid structure, simple to understand

Ingredients of BEM

Blocks: Block is the first class name in a new element. The main feature of blocks is their reuse anywhere on a page. And, these blocks can be inside other blocks. The block name is explicitly set by the element.

For example, I will name the class .btn to define the button Elements: Elements is a child element of a block, the name of the element will include the block name and be separated by a "__" sign.

In block .btn I create 2 elements .btn__name and .btn__counter Modifiers: Modifiers are used to change the display style of blocks or elements. Modifiers will be used as separate components. Modifiers names will include block or element names and are separated by "--"

With the initial .btn block, I used modilfiers to create 2 different variants, .btn--positive and .btn—negative

It will take some time to get used to the BEM, but it will be worth it once you understand its true value. 

SASS/SCSS

Working with CSS is a routine for all devs :v. Do you ever get bored of writing Pure CSS that you are still writing every day? Is there a way to write CSS more professionally? Yes, let's find out in this post.

Before learning what SASS is, let's talk about CSS Preprocessor a little bit.

CSS Preprocessors is a CSS preprocessing language. It is used to help you write a CSS syntax close to a programming language and then compile it into pure CSS.

There are many CSS Preprocessors such as SASS, LESS, Stylus, etc.  However, within the framework of this article, I will introduce you to SASS.

What is SASS?

SASS (Syntactically Awesome StyleSheets) is a CSS Preprocessor that helps you write CSS faster and with a cleaner structure. With SASS, you can write CSS in a clean order, manage predefined variables, share classes, or automatically compress CSS files to save space.

And What about SCCS?

SASS is designed and written by Ruby programmers. Therefore, Sass stylesheets use Ruby-like syntax with no curly braces {}, semicolons, such writing CSS is not 'close' to pure CSS so understanding and reading SASS code is difficult to understand, style like this:

Sass was like that until version 3.0 was released in May 2010, which introduced a new syntax called SCSS (Sassy CSS). This syntax aims to bridge the gap between Sass and CSS by providing a CSS-friendly syntax.

To put it simply, SCSS is an upgrade of SASS that helps us write CSS in an easier and more understandable way.

Okayyy now let's learn how to write SCSS:

Nested Rule

For example, I have a piece of HTML like this:

Let's say you just want the CSS for the ul tag with the menu class, with the pure CSS you write

If you continue to want CSS for li tag in ul tag (with class as menu) then

Then you continue to want CSS for the a tag in the li... tag, then you have to repeat the tag name (or class, or id) of the parent tag you want to css, isn't it?

Nested Rule of SASS was born to help you do the above in a simpler way.

The syntax is written as follows:

Wowww now it looks so great, isn’t it?

Variable

Variables contain values that you can use more than once, for example color codes, fonts, or font styles....

To declare a variable in SASS, we will write the $ sign along with the variable name

Mixin

With variable you can only store 1 price in that variable ? Suppose in addition to the color attribute for the a tag, what if I want to add font-size later?

Mixin is a fairly common mechanism in SASS. Its use is to bring many properties that you have conventionalized in a mix and then @include into any element without having to rewrite those attributes.

Above, I have introduced you to some common syntaxes to write CSS in SASS/SCSS. 

Animation with Greensock

I'm especially interested in a website with beautiful moving effects rather than all elements being static. I tried using @keyframe to create some simple movements, but I found the results to be not very nice, and also quite time consuming to calculate these movements correctly. So, I researched some other alternatives, and I found Greensock

Here I will briefly introduce Greensock, and will give some examples to make it easier for everyone to imagine.

Overview of GreenSock

GreenSock is a powerful web animation platform that allows you to animate nearly any DOM element property, CSS value, canvas object, and more. https://greensock.com/gsap/

GreenSock has 4 main tools:

TweenLite Used to animate properties with numeric values such as width, height. With CSSplugin you can animate any css elements like backgroundColor, fontSize. TweenLite is good for simple effects with a few elements. TimelineLite Includes multiple effects or timelines like pause, reverse, restart, speed up, slow down, etc. TimelineLite for creating chronological effects TimelineMax Added functions like repeat, yoyo, etc. Used to create advanced effects in chronological order. TweenMax Includes all the above features, plus some functions like delay, stagger individual tweens or timelines. TweenMax is the most powerful effects tool.

In this article, I will demo with TweenLite. First, we need to download TweenLite from Greensock's website first, click Download button, select Customize option, copy and paste two CDN links (TweenLite.min.js and CSSPlugin.min.js) at the end of your html, just before the closing body tag.

Let's start HTML, inside the body we add 1 parent div tag #box and 2 child div tags .boxSmall

In CSS, add some properties to center the viewport.

Now you can see the square in the center of the screen like this.

To be able to move elements on the page with TweenLite, first we need to create a variable to select the correct element by classname or id.

Now we will move this square to the left of the screen with the function .to()

It moves from the position we specified in the css (left: 50%) to the position defined by the .to() function in Tweenlite (left: 0).

But there is a problem that only half of the square shows up. Because in css we define transform: translate(–50%, –50%) and this css still applies to $box. We need to add the x value after the left in the tween so we can see the whole square.

Now the square has moved to the right position left: 0 that we want.

You see, so with just a few simple lines of code, we have created a beautiful motion effect.

However, to make the animations smoother and more natural, we need easing. TweenLite has several standard eases: Power0 is similar to Linear Power1 is similar to Quad Power2 is similar to Cubic Power3 is similar to Quart Power4 is similar to Quint

I just finished a job where a client asked to design a one-page layout for their company website. So thanks to this small project, I had the opportunity to learn more about the current trend of one-page websites.

What is One-page website?

Onepage is a single website that introduces a service or a product on the internet. Simply put, all web pages will show up on a single page. Users simply scroll down to see the entire website.

Then what advantages does onepage have that businesses choose it to build a website for their company?

Advantages of onepage website design

Onepage has become a choice for small-scale websites with SEO optimization goals thanks to the great advantages it brings:

Intuitive design: The first is the intuitive interface. The content-focused design with simple navigation elements makes the website clean and user-friendly. Help customers feel comfortable when using the website and make a good impression on them about your business.

Responsite design: For businesses, this is an important factor because it affects the number of potential customers accessing the website via mobile devices. Based on the simple layout of onepage design, businesses can easily build a mobile version.

Good SEO potential: Onepage SEO standard web design is much simpler than normal websites. The banklinks all point to the homepage, the website of the business will quickly achieve high rankings on the search results table.

Easier organization: With onepage, businesses do not need to worry about website organization and hierarchy because all information and images are encapsulated in a single page.

However, it can be clearly seen that the characteristics of Onepage designs emphasize the visual element more than the content. Websites of this type are often suitable for small projects such as introducing new products, or promoting information for a certain place, or used to build a personal or business portfolio. Event companies and marketing agencies can use this type of website. Because the page load speed is not high and it cannot display too much content, it is not suitable for large-scale websites, especially e-commerce websites.

I also found some one-page pages with unique layouts to share with everyone

Everylastdrop

Balsoy

Olszanska

The Rafael 

Toasted Digital

We ain't plastic

Okay we will continue with some awesome themes for Portfolio and Company Website. 

Portfolio

Portfolio Lite

Feature:

Specially designed for people with artistic and creative souls

Create unlimited photo gallery pages

Minimalist and unique design

Works well with WooCommerce

TheFour Lite

Feature:

Easy to set up and edit

Support portfolio and testimonials

Provide flexible customizations to edit layout

Jetpack support

Radiate

Feature:

Offers a wide variety of color settings

Integration using Everest Forms

Compatible with other page builders

Fast and multi-language support

Company Website

Corporate Plus

Feature:

Custom widgets and custom sidebar areas

High customization support

Custom CSS and premium slider options

Responsive and translation support

Fully compatible with WooCommerce

Make

Feature:

Choice of branding

Layout box and full-width

Google Fonts integration and typography control

Child theme ready

Zakra

Feature:

Easy to customize

Fully responsive and modern design

Compatible with many devices

SEO-friendly and RTL-ready

Freddo

Feature:

Responsive design

WooCommerce Support

WPML multi-language ready

Sidebar and footer widgets

Airi

Feature:

Full screen header image option

Support navigation and social media buttons sticky on the screen

Access to Google Fonts

Lightweight and responsive

Translation ready

E-commerce Website

Zigcy Lite

Feature:

Use the online Customizer to edit and preview your website

Specially designed for WooCommerce

Various layouts for pages and posts

This Free WordPress Theme is optimized for speed and built-in SEO

EightStore Lite

Feature:

Integrated support for YouTube videos and CSS3 animations

Premium typography options

Choice of sidebar styles, including product and post finder

In the previous post, I briefly talked about some popular Wordpress applications. Then in this post, I will summarize some Wordpress themes that I find most beautiful and like, divided into 4 topics: Personal Blog, Portfolio, News, Company Website and E-commerce Website.

A WordPress theme is a collection of files that control how the content on your website is displayed. Without a theme, a website consists of only the main components, such as content and features. But like a skeleton, it does not have a beautiful display layer.

Personal Blog

Yosemite Lite

Feature:

Simple and clean design, no fancy elements

Perfect for personal, style and travel blogs

Supports compilation and works well on all popular browsers

Striker

Feature:

Simple but art-oriented design

Compatible for localization and WPML

There is a theme customizer

Customer support

Moesia

Feature:

Use block front page to easily manage custom homepage

Use parallax backgrounds

Ready to translate with lots of social media icons to choose from

Activello

Feature:

Built-in awesome font icon

Unlimited color options

Optimize SEO friendly compatible with Schema structure

Responsive and retina-appropriate

News

ColorMag

Feature:

A huge and ever-expanding library of designs

Optimize SEO with high speed

Using a unique post system

Compatible with other page builders, like Beaver Builder and Elementor

News Portal

Feature:

The layout is designed in the form of an online magazine

Retina ready for a wide selection of tone sets

Great Responsive theme with SEO

MH Magazine Lite

Feature:

Very good responsive theme and optimized for SEO

Support for custom widgets like MH Custom Posts, MH Custom Pages and MH Spotlight

Supports all current browsers.

I started to use Wordpress

Hi all, I come back after a long holiday with lots of assignments 😬😬😬

I started to use Wordpress to build my blog a week ago and I found it very interesting. 

👉Here is link to my Blog if you want to take a look: https://knuth.griffith.ie/~s3058825/wordpress/

Okay back to the topic of this post, I had some lectures about Wordpress a couple weeks ago. I also heard about WP before but I haven’t used it honestly. After lecture, I started to look for some information about WP on the Internet and found something that I think they could be useful for beginners who want to build a blog or a website by WP. 

What is Wordpress?

Simply put, WP is a content management system which is an application that helps website owners, editors and authors to manage their websites and publish content without any knowledge. any programming. It uses PHP and MySQL, two components that are fully supported on all web servers.

One of the biggest advantages of WordPress is its easy-to-use and seamless interface. Also, WordPress is open source and free for everyone. In fact, it is because of this that millions of people around the world have created high-quality, modern websites, regardless of whether they are new to the profession or have many years of experience.

What is the difference between WordPress.org and WordPress.com?

When you search for WordPress in Google or on other search engines, you will see two related websites, WordPress.com and WordPress.org. It can be confusing, but each site has its own purpose and users.

WordPress.org WordPress.org is the website you need if you want to create your own self-hosted WordPress site. You can download the platform and find free themes and plugins here. To host your website, you need to register a domain name and rent a web hosting package.

WordPress uses PHP and MySQL to run, both components are supported on all web hosts. However, there are many web hosting that also create their own WordPress hosting package to have the most suitable and optimal hosting environment for WordPress.

WordPress.com WordPress.com is a hosting company that uses the WordPress content management system for every blog hosted on it. Users who sign up for the service will receive a private blog with a domain name like myblog.wordpress.com (of course, a private domain name can also be used, you only need to pay a fee). The default plan is free, although it has some limitations.

WordPress is a very flexible tool you can use to create a variety of websites. • Blogs • Portfolios • Website • Online store

Famous websites using WordPress

Although WordPress is well known among bloggers and small businesses, it is also used for many other popular websites.

The New Yorker 

Time Magazine

CNN Press Zoom

The New York Times Company

The White House

TechCrunch

The Mozilla Blog

Sony Music

Disney Book

It can be seen that today Wordpress is applied quite a lot not only for personal blogs but also for large and reputable commercial websites.

I found that writing a post like this helps me synthesize and remember the knowledge learned in class in a better way. So today I will talk about how to use Grid in CSS to layout pages. In the previous post, I talked about flexbox used to create a simple layout. However, for more complex layouts, I think using Grid will be more optimal.

First, I create an HTML and CSS file with the following structure.

Just like flexbox, to represent the grid structure, we need to set the display property on the parent container.

And we have a simple layout like this:

Because the content about Grid in CSS is quite long, in this post I will mention the properties of the div container (parent) first.

Grid-template-columns

When using this property, the grid container will divide the column among the elements within it. Here you can divide as many columns as you want. For example, here I have 10 elements, I want to divide each column with 2 elements, so I will have 5 columns. The unit here you can use px, %, em rem, auto.

However, it can be seen that if using the unit of px, the grid items will not scale when resizing the screen right? Therefore, for the grid, we have a new unit called fraction (fr).

It is similar to the flex-grow property of flexbox. We get the following result:

Grid-template-rows

Similar to grid-template-columns but this property is row divider. Here I have 10 elements, I want to divide it into 3 columns and 3 rows, it will be like this.

However, there is a problem, what if you want to split the layout into 12 columns or 12 rows? Typing values for both 12 columns or rows seems a bit time consuming. That's why the repeat function comes in. This helps us to quickly create multiple columns or rows with the same value. For example, I want to create a layout with 5 columns, an element occupies 20% of the size of the container. Instead of writing: grid-template-columns: 20% 20% 20% 20% 20%; Now I can write it more concisely like this: grid-template-columns: repeat(5, 20%);

Grid-gap

This property helps us to create spacing between elements in columns and rows. This property includes the grid-row-gap and grid-column-gap properties written as

grid-gap: grid-row-gap grid-column-gap

.

Grid-template-areas

Extremely cool and useful property that allows us to create layouts quickly, easily, and simply. To use, I have created a demo as below.

And the layout will appear like this:

Just use grid-template-areas for the container and use grid-area for the elements to display in the desired position.

Above I create a layout layout with 2 columns and 3 rows for the container and in which Header occupies 2 columns at the top, Navigation occupies 1 column + 2 rows on the left then Main content occupies 1 column + 1 row on the right and Finally, the Footer occupies a column one row bottom right always.

Note if you want the Header to occupy only one column and the second column to be empty, you should use the dot "." into grid-template-areas like this.

Minmax

This function helps us to set the column width or row height according to the minimum and maximum value for the element.

Please see the example below

Okay stop here, I will come back with the next post about the remaining properties and functions of Grid.

Two weeks ago I learned about Flexbox. To be honest it gave me a bit of a headache. But I have an assignment to apply this knowledge, so I want to learn more about it. Fortunately, I found a pretty good website that summarizes the most basic knowledge about Flexbox, named css-tricks.com.

So, what is Flexbox?

Flexbox is a layout mode that will resize the elements inside to display on all devices. In other words, you don't need to set the size of the element, don't let it float, just set it to display horizontally or vertically, then the elements inside can display as you like.

The Flex layout is set up from a parent container that acts as a flex container and its immediate children that act as flex items.

Flexbox properties

Parent (Flex container)

Display

To use the Flexbox layout you just need to set the display property on the parent container.

Flex-direction

This property specifies how the flexible items are presented in the flex pane, by setting the flex frame orientation along the main axis and the cross axis. They can be presented in two directions, like horizontal or vertical.

In rows, flexible items are arranged in a row from left to right. On the contrary, we have “row-reverse”. Similar to the vertical, we also have the "column" and "column-reverse" arrangement.

Flex-wrap

The original idea of flexbox was to place flex items in a single row. But what if we want to have a layout with items lined up in multiple rows? The flex-wrap property was created to help us with this.

Flexible items are displayed on the same row, by default they will automatically stretch or shrink to fit the width of the large frame.

You can also abbreviate the combination of Flex-direction and Flex-wrap as below

Justify-content

The justify-content property aligns the flex items according to the main axis in the flex pane.

To determine the main axis and the cross axis, you can see the picture below

The arrangements of the Justify-content property are as follows:

Align-items

It works like justify-content but in the cross axis of flex.

So, how about flex items (children)?

Flex-basis

Set the width or height of the element based on the flex-direction row or column. The default is flex-direction: row, so now flex-basis will correspond to the width property of the element and when flex-direction: column then flex-basis will be the height of the element

Below is the difference between flex-basis: 0 and flex-basix: auto

Flex-grow

The default value in the flex-grow property is 0. This means that the elements will not automatically scale when the width of the container (parent) changes. If flex-grow is increased to 1, the elements will automatically stretch evenly to fit the container frame. The element with a larger flex-grow value will take up a larger area than the rest.

Flex-shrink

This property is the opposite of the flex-grow property above, it does not expand but shrinks when we change the width of the container down. The default value in flex-shrink is 1 which means that the elements are allowed to shrink when the container width is reduced.

But if you set it to flex-shrink: 0 then it will not stretch and now it will take the value of the width property. For example, I set the element number 3 with flex-shrink: 0. Then when it shrinks back to its 120px width, it will still keep that width, not shrink any more like the elements have flex-shrink: 1.

One of the things that gives a designer a headache when starting to code a website, is cutting and inserting icons from the layout they've placed into the site they're coding on. Because the icons must be inserted pixel-by-pixel or they will not be displayed in the wrong place. I used to be very frustrated and annoyed when I had to do this boring stuff, until I came to know Font Awesome. And I feel like I've found heaven on the earth. Like how I enjoy a delicious bowl of hot ramen on a chilly autumn night. 

Okay, so before we run out, What is Font Awesome?

Font Awesome has been known to be one of the libraries of font letters that are visual symbols used in web pages. It's a font, guys, but not a normal font like A, B, C. They are icons.

Font Awesome can be built into formats with various font files like otf, eot, ttf files, etc., so it can be easily installed and used as it is compatible with most operating systems on computers today.

Then Is it difficult to install Font Awesome?

The answer is extremely simple.

First, visit Font Awesome's website and download its library. Then create a path to link the file “font-awesome.min.css” to the html file you are working on.

You can refer to this picture

Next, you just need to return to the company's website and select the icon set to use. For example, if you want to use this coffee cup icon, for example, its name is "coffee", then follow the instructions below.

In addition, we can change the color, resize and even rotate 90%.

Big advantage of Font Awesome

If we use images, the loading speed of the website will be slower because we have to load an image quite heavily. But with Font Awesome, you only need to load a CSS file, a Font file and only load it once, so the speed will be significantly improved.

An image cannot change its color or size. As for the size, we can use CSS to set the width and height, but if we do so, the image quality will be affected. But with Font Awesome, you can easily change the size and color of the icon with the usual CSS properties of the font like color, font-size or any other CSS property for the font.

So, those things are enough for you to see the greatness of this font set? 

HTML

HTML stands for Hypertext Markup Language. It helps users build and structure components in an application or a web page such as Segmentation, Heading, Links and Blockquote.

HTML is not a programming language. Therefore, it cannot create a "dynamic" function. It is used to format and layout web pages; responsible for displaying text such as italic, bold, adding images or linking to other pages. Each web page is made up of a series of these HTML tags that represent each type of content on the page. Each type of content on the page is "wrapped", that is, surrounded by HTML tags. Once a tag has been opened, all content that follows is considered part of that tag until you "close" the tag.

CSS

CSS stands for Cascading Style Sheets. This programming language regulates how the HTML elements of the website will actually appear on the frontend.

JavaScript

JavaScript is a more complex language than HTML or CSS, and it wasn't released in beta until 1995. JavaScript is a logic-based programming language that can be used to modify web page content and do let it work in different ways in response to user actions. Common uses for JavaScript include confirmation boxes, calls to action, and adding new information to existing information.

In a nutshell, JavaScript is a programming language that allows web developers to design interactive web pages.

The Relationship between HTML, CSS and JavaScript (JS)

HTML provides the raw requirements tools for structuring the content on a web page.

CSS is responsible for the design, styling of the background, colors, layout, separators, and effects. This language affects the entire mood and tone of a website. It allows websites to adapt to different screen sizes and types of devices.

JavaScript helps you create functions such as sliders, pop-ups, and photo galleries. It helps identify elements and interactions on the page. Restrictions such as what happens when the user hovers or clicks on a certain element in the web page.

 The Internet is growing strongly and the advent of 5G networks has proven that the amount of data that each person creates is expanding exponentially. And there are more and more technology companies that sprung up as a trend of the new era, the digital era, and seek to become major players in today's data-driven economy. And of course, the data center is still one of the most important parts of the communication industry.

How Data centres become the new frontier in the fight against climate change?

While most climate change activists are focused on limiting emissions from the automotive, aviation and energy sectors, it’s the communications industry that is on track to generate more carbon emissions than all of the aforementioned sectors.

A huge amount of electricity that data centres around the world consume goes for cooling. While some heat is good for computers, too much can cause systems to crash, and with each generation of computer chips running faster and hotter, the systems will soon be too hot for even the most efficient air conditioner.

For a data centre to remain functional, it either needs to have been built in a country with a naturally cold climate. Some industry experts believe building data centres in cold countries could help cut emissions.

However, the problem is not only with electric cooling systems, cooling chemicals also contain a lot of toxic chemical components. And the use of batteries for backup in the event of a power failure also has a great impact on the environment due to the battery handling process after use.

Another problem is nowadays many countries are passing laws that require citizen data to be stored on servers located domestically, picking colder climates beyond these borders is no longer a viable option.

Should Ireland pause the development of data centres to limit excessive energy consumption?

According to EirGrid, the State-owned National Grid Operator, data-driven annual electricity demand increases by about 600 GWh, which equates to an additional 140,000 households joining the power system each year. EirGrid estimates that by 2030, data centers could account for 25% of total demand.

This has created a great pressure for the entire system when starting from 2018, the Irish government pursued the plan to make the country become "silicon valley of Europe". But perhaps facing with the rapid increasing of energy consumption from data centers around the country and its negative effects on the global climate change, the government should consider providing timely resolutions.

You may want to read more 👇

The Data Center Dilemma: Is Our Data Destroying the Environment?

Warning on data centres’ increasing energy consumption expected in report 

A couple months ago, my classmate, Vero, recommend me a very interesting application named Mimo that helps me a lot on learning code.

This app grabbed my attention for a while. You enter answers, select options and get rewards. Plus you have a streak to keep up – so you better not miss a day!

You can find it easily on App Store and Google Play as well and it’s totally free 👏👏👏

How’s cool about Mimo

Mimo’s best feature is simplicity. It’s easy to use and addictive. It guides you through a path and helps you get to where you want to go.

So far I’ve consumed over 20 courses on HTML and CSS code and I’m now making my way through Javascript.

Mimo is also good for making you feel rewarded. It gives you coins (at intervals that sometimes seem a bit random) and there’s a leaderboard each week. You start at the bronze league and if you do enough – after 7 days you’re onto stone.

One of the things I’ve enjoyed the most is the reassurance that I knew more than I thought I did. But I’ve also been learning things that were probably quite simple about the code I knew – the structure, names and the meaning.

For example, look at some lessons about “image” and the way to use <img> in HTML.

If you’ve ever thought “my coding is ok, but it can be better” then, the Mimo app is for you. Or if you’ve never coded before and want a simple way to get started then get on Mimo. 

It's time to code... AGAIN

This week I had my first lab in Web Authoring that about HTML, CSS and other programming languages such as JavaScript. Everything reminds me of the time three years ago, when I started to write the first lines of code in my life.

I still remember feeling awkward taking in a new language, the language of a computer, and trying to understand its logic. Like any relationship in this world, we need to talk to each other more every day, to understand each other better. And then after 4 months of persistently learning to code, I feel like I'm starting to understand a little bit about this "new friend". It is important that you be patient and careful enough. A logically faulty line of code can make a webpage stop working. And honestly, finding bugs among thousands of lines of code is always like a bloody nightmare. But trust me, you'll be fine.

This time, our wonderful teacher introduced me to a new companion, Atom. Atom is one of many software to code, the interface is quite friendly and it is completely free. I used to use Adobe Dreamweaver but now I will vote for Atom because of its convenience and ease of installation.

After a long time without coding, I am quite excited about this comeback. Hope I don't forget too much 🤣

Although appearing in recent years, virtual reality technology has brought many benefits to users. Augmented reality (AR) allows experiencing the virtual elements of VR (Virtual Reality) technology in real space.

The field of multimedia journalism has now begun to adopt this technology. It can be said that the development of technology is strongly influencing the mode of operation of modern media. With the help of virtual reality technology, viewers can perceive information more intuitively, because they feel like they are involved in the moment of the event. In the virtual event re-enactment space, the characters are modeled after their faces, shapes and actions are similar to the characters in the actual event. Sounds are also simulated according to the scene.

The first journalistic work that New York Times Magazine (USA) tested to adapt the content in VR 5 years ago was enthusiastically received by the public attending the 2016 Cannes Lions Creative Festival. At that time, the magazine gave readers virtual reality glasses, so that they could experience journalistic content in a new way, with vivid images. Viewers seem to be watching this movie while wearing VR glasses. This work is called "The Displaced". Thanks to virtual reality technology, the story of 3 refugee children who had to leave their homeland because of the war is told in a concise, visual, and understandable way.

"When they attacked, we fled into the swamps. We could see crocodiles. What I know is that if I am eaten by a crocodile, it may be a slow death, but it is better than being killed by the fighters.” - the boy Chuol shared.

The New York Times' 360 VR film is only about 11 minutes long, but it clearly depicts the devastation, ruin, and life in the refugee camps of more than 60,000 people around the world when they had to leave their homeland because of the war. And half of them are children. Virtual reality technology has described in detail and vividly the classrooms with only blackboards with broken tables and chairs scattered on the floor or the hot cucumber fields that students have to daily work from 4 am. 

“The Displaced” won the Cannes Lions Creative Festival award, considered the Oscars of the creative and advertising industry.

For more information 👇https://www.nytimes.com/2015/11/08/magazine/virtual-reality-a-new-way-to-tell-stories.html

https://www.nytco.com/press/nyt-mag-and-vrse-works-win-cannes-lion-grand-prix-for-the-displaced/