CSS Typography

 

Inset Text In Pure CSS

 

The first thing that we will do is define gradient background so that our inset text is clearly visible.

 

The next thing that we are going to do is define the style to make the text appear inset. To so that we will make use of text-shadow.

Now we will put these styles in use.

Let’s put it all together

CSS Typography

Inset Text In CSS

 

Doesn’t it looks gorgeous? And we just used the power of CSS to make this.

3D Text In Pure CSS

To make the text look like we will make use of text-shadow. To start lets create a container in which we will place the text. This will give the gray background to the container.

Now let us style the h1 component within this container with some special font and text-shadow. This will make the text look 3D.

And now let us add some html bones to this CSS muscle.

And when we put of this together then we will see the magic.

CSS Typography

3D Text In CSS

First Letter Capitalization Using Pure CSS

This is useful at lot of places like articles, news, blogs, etc. to distinctly mark the start of a paragraph. Let’s add the style to do that. In the code below we have defined the font-size of the first-letter in a paragraph as 4 times (4em) the normal size and the font-weight as normal. We have defined this style for the pseudo class first-letter (For more details on pseudo class visit http://www.abhishekshukla.com/css/css3-basics-part-1/). Also we have changed the font weight of the span to be bold so that it’s distinctly visible.

Now let’s put this style in use

Let’s put everything together and then this is how it will look like.

CSS Typography

First Letter Caps In CSS

In the above example the first letter takes the space above itself. We could make the first letter slide down by changing the style for pseudoClass first-letter.

 

Let’s put this style to use.

It would look something like below:

 

CSS Typography

First Letter Caps In CSS

 

First Line Bold In Pure CSS

To achieve this we will make use of first-line pseudo class (For more details on pseudo class visit http://www.abhishekshukla.com/css/css3-basics-part-1/). We will also make the first letter as bigger and slide below just the way we had it before.

 

Let’s put these styles to use.

When we see this html page in the browser we would see something like below. An interesting point to note it that when we resize the browser then still the first visible line will be bold.

 

CSS Typography

First Letter Bold In CSS

 

Rotate Text Using Pure CSS

To rotate we will make use of transform property of the elements. The below style will rotate the elements by 90 degree in the counter clockwise direction.

 

Let’s put the rotate style to use.

It would look something like below.

 

CSS Typography

First Letter Bold In CSS

 

The htmls file for this post are available @skydrive and @googledrive.

Any questions, comments and feedback is welcome.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

 

In this post we will talk about building RESTful services. However before we do that I would recommend reading the previous part of the series

 

 

One of the biggest roadblock in developing REST base systems are influencing technical factors like Object Oriented design, abstractions or the technologies that the architects are familiar with. This situation could even become worse if the architect has good technical background in web technologies like MVC and thinks about implementation in these technologies while designing REST services.

 

Design Workflow for Agile Board

We need to think independently of any technology or other influential factors that might corrupt our design. We should not think about classes or methods while designing a RESTful system and I think the best way to do that is stay away from the computer and use pen and paper for the design purpose. To practice that let’s think of the process of managing the task tracking workflow with the example of an agile board.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Agile Board

 

Let’s think about the process of managing an agile task board. When we want to design the workflow, the first thing that we look at are the elements that enable the workflow. The elements that enable the workflow are:

  • Agile board – The agile board is divided into 5 sections to do, design, code, test, done. When a new task is created it would go in the “to do” list. When a team member will start of work on a task then it would be moved to the “design” list and so on to the different lists.

 

  • Sticky notes – These are the communication interface for communicating among the team members as well outside the team as well. The sticky note will have the story number, description, estimate and Assignee.
Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Sticky Note

This would seem like a very simple workflow but we are making an assumption here that all the team members know how to move tasks across the agile board. We are also expecting the team to know that new tasks will be going in the “to do” as well. What if we change the process then we would have to share the same knowledge with complete team. We could eliminate all of this by a simple solution. We could define icon for each of the lists on the agile board.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Agile Board With Icons

We also add the corresponding items to the sticky node as well then we could easily track the current stage of the task. Now in the sticky we could see the icons of the various stages of the task starting from “to do” till “done”.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Sticky Note Icons

We can track it by simply crossing out the stage which the task has already passed through. In the image below it clearly shows that the task has passed though the “to do” and “design” list and currently in the code phase.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Sticky Note Stage 3

Whenever any changes happen in the sequence or number of stages we just need to update the board and the sticky and no other communication is needed to anyone. Suppose we remove the design phase from our systems. Now we could simply update the board and the sticky and everyone using it would be able to understand as what needs to be done. Whenever a task is being moved then the team member crosses off the icon of the current state and look at the next icon and move the task to that list.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Agile Board Without Design

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Sticky Note Without Design

Now if you image this kind of change to be done in an RPC system then it would require versioning and redeployment of the clients so that they are aware that they have to call a different method.  And this might be a reason for the failure of the RPC system. However in this model our client workflow hasn’t changed at all whereas the system workflow has changed. And hence it adheres to the RESTful principle where I could change the system workflow without changing the client workflow. The client workflow is still the same where the team member has to cross off the current matching icon and look for the next matching column on the board and place the sticky note in that column.

 

Software design for Agile Board

Now when we are comfortable with the idea and workflow of a physical agile board, we can go ahead and design for a software based agile board. Like any software system before we start working on the software we will list down a few high level requirements. Since this is an example we will keep the requirements pretty simple:

  • Add new tasks to the backlog
  • Move task to design
  • Move task to code
  • Move task to test
  • Move task to done

State Transitions

We have a simple domain hence we have a simple state transition model. From the starting state we could reach to different states each of which is a collection tasks. You could see in the diagram below that we have captured two types of information:

  • Application states such as entry and task collection. This will be useful when we will design the media type later in the module.
  • States that a task can go through like to do, design, etc. This information will be used in the next section of the module to identify resources.
Journey to RESTfulness – Part 4 of 4– Building RESTful Services

State Transitions

Using this state transition our client would have to know about only one url that is the entry url and then the client should be able to discover all the other services from there.

 

Identifying the Resources

Now let us create the resources corresponding to the states for the application. The resources with their urls are shown below in the image.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Resources

  • /tasks – The entry point of the application. It supports the following operation

o   GET – fetches the hypermedia elements for navigation and addition of a new bug to backlog.

  • /tasks/todo – The list of the tasks that have not been started yet.

o   GET – fetches the list of tasks in the todo list

o   POST – adds a new task to the todo list

  • /tasks/design – The tasks that are currently in the design phase

o   GET – fetches the list of tasks in the design list

o   POST – adds a new task to the design list

  • /tasks/code – The tasks that are currently in code phase

o   GET – fetches the list of tasks in the code list

o   POST – adds a new task to the code list

  • /tasks/test – The tasks that are currently in test phase

o   GET – fetches the list of tasks in the test list

o   POST – adds a new task to the test list

  • /tasks/done – The tasks that are done.

o   GET – fetches the list of tasks in the done list

o   POST – adds a new task to the done list

 

Designing the representation of Resources

Once we have identified the application states, the transitions between them and mapped them onto the Uniform Interface element of resources and self-describing messages then we need to figure out how we want to represent our resources.

We have multiple options to decide from and Mike Amundsen in his book on Hypermedia API design, has broken these options into 4 questions.

 

  1. What format do we want to base our representation on?

This can be anything however the most common formats being used by the API today are JSON, XML, etc. We could choose to support multiple base formats as well.

  1. What type of state transfer will the API support?

The various types of state transfers could be

  • Read Only – In this type of state transfer, the client does not transfer any data to the servers.
  • Predefined – In this type of state transfer, the client is aware of the valid transfer elements beforehand via the media types shared by the server.
  • Ad-hoc – In this type of state transfer, the details of the valid transfer elements id shared with the clients in a representation.

 

  1. How will the domain elements map onto the base format?

There are 3 ways in which we could map the domain elements onto the base format.

  • Specific – In this style we create domain specific elements and attributes. For example in case of an XML based format we could create a task element having a title attribute.
  • General – This style as you might have guessed will be bound to a generic domain. It will not be specific to our business domain. One of the majorly used domain media type is Atom.
  • Agnostic – This style we would have a media type is completely unrelated to any specific business domain like HTML.
  1. What will be the application flow?

Application flow are the elements that allows a client to recognize and respond to possible state transitions. It could also be thought of as how the representation format will tell a client that a links exists and what the client can do with it. The application flow identifiers could be:

  • None – The client does not have any flow identifiers.
  • Intrinsic – The media type have built in elements for representing links and expressing the semantics.
  • Applied – The media type does not have the full capabilities to express the media type identifiers. This opens up the opportunity for the designer to apply attributes to the elements to express the identifiers. The example for this application flow could be seen in rel and class attributes of HTML.

 

Task Tracking Service Representation

Let’s make the choices for designing the task tracking service:

Base Format = HTML (since it’s easier to test)

State Transfer = Ad-hoc (since we will be using HTML forms to provide state transfer information to the clients. This way the client will just have to fill in the values and submit the form.)

Domain Style = Agnostic (Since HTML is domain agnostic)

Application Flow = Applied (Since HTML is a domain agnostic language so we will have to apply the custom application flow identifiers using an element of HTML)

 

Based on the above information and decisions we would need the elements for:

  • List of tasks
  • Link template to add a task
  • Link template to move task to to do
  • Link template to move task to design
  • Link template to move task to code
  • Link template to move task to test
  • Link template to move task to done
  • Navigation links

The advantage of using the Hypermedia design is that not all these elements will exits for each of the states. When a task is in to do state then only the design link will be visible and so on. This is how a hypermedia enabled design will help the client in deciding the right thing to do without any prior knowledge.

 

Mapping domain style to base format

Below is a table showing the mapping of domain style onto the base format which is HTML here. This is really useful way to document the representation. Here we are capturing all the details that client will need to recognize. Since in rest we do not have service description hence the client will look for a documentation top understand the representation.

 

Attribute Value AppliedTo Description
id task DIV Container for task state elements
name id INPUT[hidden] The task identity. Found as a child of FORM.move
  title Input[text] The task title state transfer element. Found as a child of FORM.new
class all UL List of tasks
  title SPAN Task title. Found as child of LI
  description SPAN Task description. Found as child of LI
  new to do FORM Application flow identifier for adding a new task to to do
  next FORM Hints to the client for ideal next state transition. Should be used with FORM.move class
rel index A Navigate to index resource; should not be more than 1
  to do A Navigate to to do resource; should not be more than 1

 

Id – is used to represent a unique data element or block in a representation. We are using it here to identify the various state formats in the task tracking representation.

Name – is used to identify a state transition element within a representation. For example input elements.

Class – is used to identify any non-unique data element or block in a representation. Here we have used title to identify a task in the task list. It can have multiple value separated by space. This is used by the client to show available transitions instead of showing the same one dimensional list.

Rel – is used to identify a non-unique process flow element within the representation. Here we have used rel to identify the purpose for the link. It can have multiple value separated by space. This is used by the client to show available transitions instead of showing the same one dimensional list.

 

Sample Markup

The table provides a good visualization on how the representation looks like however nothing beats a dummy markup as shown below.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Sample Markup

I have not provided any href and action attributes since the actual link value do not matter to the client. In REST url is not the most important part.

Also you would notice that I have specified move active next in the class value for the form. This would tell the client that it could show the optimal path as per the workflow.

 

Modifying the workflow dynamically

We will now go ahead and modify the workflow and remove the design phase. This will eliminate the transitions from todo to design, design to todo, design to code and code to design. It will add new transitions which are from todo to code and code to todo.

Journey to RESTfulness – Part 4 of 4– Building RESTful Services

Modified Workflow

This will not have any impact on the clients since the clients do not need to know about the urls. The only thing that a client would have to know is about the new relationship values of both forms class and the rel attribute anchors since we removed a relationship value called design. Even if the client do not understand these, still the client doesn’t necessarily need to crash.

 

As per the new design a task in the todo list will never see a link to move it to design anymore. This design lets the client see only the valid operations that could be performed.

 

Versioning

Generally rolling out the version 1 of a service is easy and difficulties come in rolling out new versions and fixing the bugs in the previous versions as there may be many clients using it. In REST the contract is the uniform interface.

Versioning within representation

In this form of versioning we do not need to do anything in form of formal versioning as we would be doing the versioning inside the representation. The core concept lies in the fact that the service could add whatever they want and clients would ignore whatever they do not understand.

Versioning the representation

When the semantics of a representation change as a result of the rename or deletion of an element then we might need to version the representation. Here we could make use of content negotiations to make sure the clients are able to get the representations they need in order function properly. We could transfer this representation metadata from the client to server by:

  • Embedding this information as part of custom media type name.
  • Using a parameter on http accept header like version or profile
  • Using custom http header

Versioning the resource

When the service is no longer able to keep the mapping between the resource and its associated profile then we would have version the resource itself. This would more creating a new resource rather than versioning the old one. But it will manifest in the resource identifier which is url in http terms.