Metasyntax

Posted on by rafaeladel

I’ve started this course CS101. It talks about programming, and uses Python. So i decided it’s a good idea to learn Python among other CS stuff. Since my major was not computer science.

One of lectures that drew my attention, is about Grammer of programming languages, and how to define the allowable structure of a programming language statement. Which is also called Metasyntax.

According to Wikipedia, what metasyntax does is it :

 describes the allowable structure and composition of phrases and sentences of a metalanguage, which is used to describe either a natural language or a computer programming language.

Metalanguage is the language or symbols you use when you examine some kind of a language.

And the preceding lecture was about Backus Naur Form, which is one of the ways we can examine a language with.

According to Wikipedia :

In computer science, BNF (Backus Normal Form or Backus–Naur Form) is one of the two main notation techniques for context-free grammars, often used to describe the syntax of languages used in computing, such as computer programming languages, document formats, instruction sets and communication protocol.

But what is Context-free grammar? It’s like the grammar used to produce a language, this language is called Context-free language. It uses that production rule :

V → w

Where V  is called a nonterminal symbol. The non-terminal symbol is the symbol which can be replaced with another one. In other word, you can break it down to a smaller unit w. this unit could be another non-terminal symbol, or a terminal symbol. A terminal symbol is the symbol which cannot be replaced with another symbol. It represents the ending of the replacement process you make.

In another way you can  examine it like this :

z = y
y = x
x = 5
print z

Here, in the code above, x, y and z, are called non-terminal symbols. And the number 5 is called a terminal symbol, since it can’t be replaced with another symbol anymore.

According to Wikipedia :

Quoting the so-called Dragon Book (a standard reference on the latter subject):
In a compiler, the lexical analyzer reads the characters of the source program, groups them into lexically meaningful units called lexemes, and produces as output tokens representing these lexemes. A token consists of two components, a token name and an attribute value. The token names are abstract symbols that are used by the parser for syntax analysis. Often, we shall call these token named terminals, since they appear as terminal symbols in the grammar for a programming language.

Honestly, i didn’t want to dive deep into this subject. I feel like i got what i needed to know from it. You can either read those Wikipedia article or search for how compilers work and how they treat terminal and non-terminal symbols.

Good luck.

“Check!”, my little to-do list app is completed

Posted on by rafaeladel

And finally, i’ve completed my app i’m writing, it’s a simple to-do list. Here it is.. Check!

And here’s the github repository for it, in case you wanted to add more improvement or watch any change i make to it.

It has most of the features i’ve planned to implement right now. I’ll add further improvements later, because i’m going to start learning Python for server-side developments.

And i didn’t chose the framework yet, i’ll chose one after i dive more in the language itself.

So wish me luck. I’ll be back with any interesting thoughts about Python.

My project is completely revamped. Meet “Check!”

Posted on by rafaeladel

It’s been a while since i’ve posted anything, and that’s because i was working on my project. The last design i’ve shown you in the previous post Here didn’t really looked nice.

so i decided to start over trying to make it as elegant and clean as i can, with my little CSS experience.

So here’s a screenshot of how it’d look like if it has many main tasks and sub tasks:

The red boxes that you see indicates the priority of the task, it will be in colors red for urgent, black for normal and blue for low priority.

There’re check button to the right, and that arrow next to it, will pop up a drop down menu for each task and sub task, that provides delete, rename and divide capabilities.

I’ve started in the  JavaScript of it, finished the main task addition mechanism and animations, also finished categorizing mechanism.

I’ve used several jQuery UI plugins, slider, auto complete (for usability) and highlight (for animation). It’s really easy to add and them them thanks to the documentation  in jQuery site.

Github repo

Done designing, started scripting

Posted on by rafaeladel

I’ve finished designing the todo list, it took me couple of hours since i’m not that good with CSS, but still better than before i guess. Here’s where i got so far :

Of course a lot of what you’re seeing is going to change as i propagate more in this project. For example i’m making the top panel to slide up/down by default when user hover on it, so it doesn’t take up much space.

Actually i’ve achieved that, you can check it in my Github repo , Here’s how is it after adding all the scripting for that top panel :

Lessons learnt : 

First, for the CSS :

To make a DIV fully vertically stretched along the entire page:

html {
    height :100%; /*did this to get wrapper fully vertically streched*/
}

body {
    height: 100%; /*body is contained inside html, so needs that too*/
}

#mainWrapper {
    height : 100%;   /*finally mainWrapper is inside body which is inside html*/
    margin : auto;

}

And for jQuery, i ran into a problem in the textbox used to enter task name, it is inside the upper panel that’s gets hidden at every mouseout event.

The problem is when the user is typing some task, but moves his mouse away, the panel will automatically slide up, which will disrupt the task input process.

After the help of StackOverflow guys, i found out that i can check inside the mouseout event, whether if the active element id is mainTask  which is the id of the textbox. And if not, the mouseout event get executed normally, here’s the code :

$(function(){
    //when the DOM loads the top panel start visible and after 400ms it slides up
    //so the user know that there's a hidden panel
    $("#taskInput").delay(400).animate({top:-80}, 500);
    $("#taskInput").hover(
        function(){
            $(this).stop().animate({top:0}, 200);
        },
        function(){
            //if textbox is active, stop sliding it back up
            //this is carried out by that if statement
            if(document.activeElement.id !== 'mainTask'){
                $(this).stop().animate({top:-80}, 200);
            }
        }
    );

})

Now, i’m going to work on the task addition mechanism, wish me luck.

Finished reading Chapter 10, and starting a new project, kinda..

Posted on by rafaeladel

I’ve finished reading Chapter 10 in JavaScript and jQuery: The Missing Manual, really interesting stuff. It explained how to make tabbed pages, Tooltips and sliders. It turned out to be somehow easy to make as i thought it need some kind of an expert developer or something.

Now i’m going to rebuild my simple Todo list application using jQuery.

And also here’s its git repository, in case you wanted to take a look at the old code, maybe give some suggestions for the future jQuery code.

I’m going to redesign the interface of course, adding some effects using jQuery, and re-writing all the code.

It’s a long task so wish me luck.

My learning resources

Posted on by rafaeladel

Right now, i’m learning JavaScript and jQuery. Finding resources is quite easy, there’re a lot of it on the web.

But i’ve picked what suits me as a beginner so i have two books :

The last one is truly an amazing book, since i’ve learnt a lot of JavaScript from the first book plus videos, learning jQuery from The Missing Manual is such an enjoyable journey full of tutorials and tips & tricks. I’m at Chapter 10: Expanding Your Interface, which talks about several topics, tabbed panels, content sliders, tooltips and determining the dimensions of a page element.

Also i’ve watched jQuery Essential Training and going to have a look at Net Tuts which is a great site for web development, i highly recommend it.

All the above is kind of useless if i didn’t try to implement what i learn by hand and make mistakes, and here’s where Stack Overflow really comes into play really big time.

Stack Overflow is essentially a web site full of expert developers who are willing to help you and give you advices about your code and mistakes. This site helped me a lot and i hope that it helps you too.

So that’s it, i’ll write what interest me in chapter 10 from The Missing Manual soon.

What i’m doing now

Posted on by rafaeladel

Hi, This is my first post on this new blog, i’m 22 years old guy, living in Egypt.

According to The Learning Pyramid, by the National Training Laboratories, Bethel, Maine. If you want to retain 90% of what you learn you have to teach what you’ve learned to others, if you want to retain 70% you have to get your hands dirty implementing what you’re learning. So, i’m making this blog.

The Learning Pyramide

Computer science, for some reason or another, is not my major, but i don’t really care. All what i’m gonna do in my life now after my graduation, is to learn programming, back-end web development to be specific.

I’ve learnt HTML and CSS so far, and right now i’m learning JavaScript and jQuery. After that, my main task, learning a server-side programming language. Right now i’m going back and forth between PHP and Python. I think i would made my choice by the time i finish what i’m planing for JS and jQuery.

So from now on, i’ll be writing my thought about whatever draw my attention during my learning process in JavaScript and jQuery.