framework

Solid Framework

What is Solid?

Solid is an exciting new project led by Prof. Tim Berners-Lee, inventor of the World Wide Web, taking place at MIT. The project aims to radically change the way Web applications work today, resulting in true data ownership as well as improved privacy.

In the article written by Tim Berners-Lee about the Solid Framework, he believes Solid will resonate with the global community of developers, hackers, and internet activists who bristle over corporate and government control of the web. “Developers have always had a certain amount of revolutionary spirit,” he observes. Circumventing government spies or corporate overlords may be the initial lure of Solid, but the bigger draw will be something even more appealing to hackers: freedom. In the centralized web, data is kept in silos–controlled by the companies that build them, like Facebook and Google. In the decentralized web, there are no silos.

Background graphic highlighting solid framework possibilities

What does Solid offer?

Solid is a proposed set of conventions and tools for building decentralized social applications based on Linked Data principles. Solid is modular and extensible and it relies as much as possible on existing W3C standards and protocols.

It offers –

  • True data ownership
  • Modular design
  • Reusing existing data

We encourage web professionals to review this article to get more information on SOLID.

What is the Solid framework?

The Solid framework takes PDF files and recreates the documents from which they were created. When reconstructing a Word document this includes the identification of text, headers/footers, lists, tables, table of contents, hyperlinks and so on. And it can do this even from printed and scanned documents. Solid Framework can take a printed document and reconstruct it as a Word document including a working table of contents. It can also reconstruct Excel and PowerPoint documents, or extract all of the data from tables within the PDF and create SQL statements, or all of the text or all of the images. And it’s really good at doing so if the original document was a Word, Excel or PowerPoint document. Solid Framework’s super-rich API provides access to the content and context of information within a PDF document, allowing you to use that information for whatever purpose your business requires.

Why use Solid documents?

Electronic documents have replaced standard pen and paper. A myriad of document types now exist – from standard paper, to scans, e-mails, electronic documents, Google Docs, billing forms, etc. While document type may run the gamut — from legacy applications to e-documents — not everybody can read, share or save these documents. People work in different environments, on different platforms, and have different versions of applications. And, the mature worldwide standard to share all these documents —regardless of language or platform — is PDF.

Document integrity is critical to the success of document reconstruction and archiving. It is something that helps all users, whether business or consumer — increase productivity, efficiency and realize the true value of their time.

We encourage you to review these links

https://solidframework.net/

https://solidframework.net/documentation-2/

Version 6 of Solid Framework SDK

This week we briefly discussed the Solid framework, what it offers, and why it may significantly change our view of the WWW. This seems to be a very interesting approach and we encourage web professionals to remain aware as these efforts evolve. We appreciate our member Brian Anderson bringing this initiative to our attention several weeks ago. We always appreciate insights from our members. Thanks again Brian.

We hope you find these resources and overviews useful. We always look forward to your comments and feedback (whether you are a member or not).

We encourage members (and non-members) check out our social media channels. If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. As a member, your first class is free.

The post Solid Framework appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

April Update – JavaScript Framework

What is JavaScript Framework?

JavaScript framework is an application framework written in JavaScript. It differs from a JavaScript library in its control flow: a library offers functions to be called by its parent code, whereas a framework defines the entire application design. A developer does not call a framework; instead it is the framework that will call and use the code in some particular way. Some JavaScript frameworks follow the model–view–controller paradigm designed to segregate a web application into orthogonal units to improve code quality and maintainability.

Here is the link for the popular Wiki article.

JavaScript frameworks

Popular Top JavaScript Frameworks

JavaScript Frameworks are popular among developers for such benefits like efficiency, safety, and cost. The variety of frameworks for each development platform is huge. Every company tends to have a website or at least a landing page still it would be good to review the most popular JavaScript frameworks.

 

  • Angular.js it is one of the most beloved and used JavaScript frameworks for building single page applications.
  • Backbone.js is easy to understand usability modules, as well as the very straightforward learning curve
  • React.js was created by the team of Facebook developers and came out in 2013. This very framework is behind the front-end scenes of the two social giants.
  • Ember.js introduced in 2011 this open-source JavaScript framework was declared as the best JavaScript framework for web application development in 2015.
  • Aurelia.js being a self-proclaimed web development framework, Aurelia makes the process of site development a creative process.
  • Meteor.js with a variety of features for backend, frontend development and database management, Meteor rank as the most popular JavaScript frameworks.
  • Vue.js framework delivers two-way data binding, server-side rendering, Vue-CLI and optional JSX support.
  • Polymer is one JavaScript framework that comes with the ability to create and reuse web components.
  • Socket is a framework you can enjoy a fully functional real-time communication between the client and the server.

The process of choosing a framework depends not only on its functionality but also how it can be used within your own project. To read more about these frameworks visit this link.

More Reads

This week is all about JavaScript Frameworks and top JS frameworks in 2018. All frameworks are used considering the company requirement and what these frameworks offer. Every week we try to deliver something new and informational in Web Professional’s World. We hope you find these resources and overviews useful. We always look forward to your comments and feedbacks (whether you are a member or not).

If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. This includes an introduction to JavaScript class. As a member, your first class is free.

 

The post April Update – JavaScript Framework appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

You might not need a CSS framework

CSS frameworks have been around for a while and they have gotten extremely popular in the front-end development scene. These frameworks provide snippets of code you can just copy and paste in your website to craft the whole layout and UI.

You have already probably read a lot of articles about how they might be good for your projects, but here I would like to do the opposite: to highlight some of the drawbacks they might bring to your websites or applications, and how you can avoid or mitigate them.

webangelist_001-1

When I ask people why they are using a particular framework, their answer usually falls into one (or more) of these categories:

  1. Speed: Most people believe it will make development faster. And this may be true in the initial stages of a project. But this gain may be followed at the expense of technical debt – we will see how the debt is produced – that will need to be paid later on, with interest.
  2. Best practice: Some people believe it is a best practice to use a framework, especially those just beginning front-end development. This is reinforced by the avalanche of articles and by the inclusion of frameworks in bootcamp curriculums or in job descriptions that mention them.
  3. Design: A lot of developers just want to release something and they don’t have a designer available for their project. CSS frameworks provide a basic design developers can use. While this is useful, the consequence is that your site or app ends up looking like every other recent site on the Internet –but whether that impacts your project is up to you to decide.

Technical debt

Regardless of the reasons for using a framework, frameworks might introduce technical debt in your project. Sometimes it can make sense to have this technical debt, for instance if you need to launch something as soon as possible or if you’re building a prototype whose code will be discarded later.

However, for big projects like an ongoing website or application, this technical debt can potentially become unmanageable and hinder development. Let’s see why this happens.

Unsemantic HTML code

This is not a problem of frameworks per se, but I have seen it happen a lot in the most popular ones.

For instance, maybe you’re reading documentation for styling buttons: You might find a code snippet that tells you to use a CSS class for disabled buttons instead of adding the disabled attribute to the <button> tag itself.

There are abundant examples of <div> or <span> where a more semantic tag would be appropriate. And let’s not talk about the <div> inside a <div>, inside a <div>

Over-specific CSS selectors

Again, this is not a problem intrinsic to frameworks, but something we can observe in the most popular ones: there is a tendency to use very specific selectors to create the CSS rules. For instance:

.table-responsive > .table-bordered > thead > tr > th:first-child

What happens if you need to override some of the properties of your <th>? Then you need to create an even more specific selector! You can’t just get away with creating a generic rule like:

th.important-heading { color: #000; }

Instead you would need to set up a rule like this:

.table-responsive > .table-bordered > thead > tr > th:first-child.important-heading {
  color: #000;
}

What happens in the wild is that nobody wants to write that kind of code. We soon start to see these kind of rules popping up:

th.important-heading { color: #000; !important }

…which only makes the problem worse!

Rules you don’t need

If you include a whole framework instead of just the bits you really need you will have CSS rules you are not actually using.

Of course you can mitigate this with the aid of a post-processing tool to remove unused rules, but the moment you begin to add or remove classes dynamically with JavaScript, you’ll never be 100% sure that you will not need that code.

Unused CSS not only makes your files bigger, which can be a problem for mobile devices that are connected to a cellular network rather than wi-fi, but they make your codebase larger too, and thus harder to maintain.

Owning your opinions and decisions

All frameworks are opinionated. This is not an issue if you don’t have a strong opinion or if yours is the same as the frameworks.

But sometimes you do have strong opinions. For instance, here’s the HTML one framework proposes to create some coloured text labels:

<span class=“label label-warning”>Out of stock</span>

I find these classes redundant, since I like to use only the classes I deem necessary. If that were my code, I would probably only have a class label-warning.

And what if you are a fan of a specific CSS methodology (like “Block, Element, Modifier”) your framework doesn’t use?

Alternatives to frameworks

Write your own HTML and CSS. If you don’t like the markup a framework produces, you should write your own. If the CSS rules a framework provides makes you work inefficiently, you should craft your own rules.

If you need a grid, you can use Flexbox today, which makes crafting a layout much less painful than using floating divs. If you are not familiar with Flexbox, take a look at this MDN guide. If you are curious about how the code might look, here’s an implementation of the Holy Grail layout I did using Flexbox.

In the future we will have Grid! This will make creating layouts a breeze, and you won’t feel the urge to use an existing grid framework ever again. Here’s another implementation of the Holy Grail layout, this time using Grid.

(Note: To see the actual result running in your browser, try Firefox Nightly or the latest Firefox Developer Edition browser —it just works. To view these examples in any other Firefox release, you’ll need to flip the flag. Go to about:config in the browser to enable layout.css.grid.enabled functionality.)

If you just need a UI widget, like a custom dropdown menu, and you don’t want to code it from scratch, you can always grab that bit—instead of the whole framework—or use a 3rd-party component that has no external dependencies.

If you need a design you can use, one reasonable way to use these frameworks would be to grab the Sass or Less sources instead of the generated CSS files. If you do this, you can grab the mixins and create your own selectors, which will allow you to have your own markup. But keep in mind that your site will look exactly like loads of other sites as well!

If you need a way to standardise the UI creation in your project, so people know which code to use and how to add new interface elements, what you are looking for is a style guide (in short, your very own custom framework). You should have one for big projects!

In summary

CSS frameworks may have advantages, but they also have drawbacks that are often overlooked. Be aware of those and also know the tools and APIs you have at your disposal for creating the CSS and markup of your sites and apps.

 

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

App Framework and Firefox OS

Intel’s App Framework is an open source, MIT licensed, cross platform HTML5 framework for building mobile applications. It is hosted on GitHub where you can contribute to the project, especially the Firefox OS theme.

App Framework is comprised of three main areas.

  1. Query selector library
  2. UI/UX library
  3. Plugins

The query selector library implements a subset of jQuery* API’s, with additional API’s targeted for mobile development. The UI/UX library offers top notch performance on a broad range of devices, including responsive design for phones and tablets. Plugins, the heart of App Framework UI, allow developers to write and share code for App Framework applications.

Firefox OS support

With the 2.1 launch of App Framework, Firefox OS is now officially supported. This was easy to accomplish, due to Firefox supporting vendor neutral prefixes on many CSS features, like CSS transforms. We will be adding an official Firefox OS theme soon.

Getting the code

To see everything that is offered in the framework, take a look at the App Framework website. You can find the quickstart guide, API documentation, and the UI component preview. You can clone the source code at GitHub

Download the zip from GitHub and extract the zip file. View the index.html file to see a sample of the kitchen sink and example API’s. You can test drive App Framework UI and see a demonstration of the provided plugins.

Building your first app

Here we will build a sample Hello World app with App Framework UI. Create a new folder and copy over the following files from the kitchen sink into your project

  1. build/ui/appframework.ui.min.js
  2. build/css/af.ui.base.css
  3. build/css/icons.css

Next create an index.html file, manifest.webapp, and app.js. You can find documentation for the manifest.webapp on MDN. See below for the folder structure for this project.

__folder__
    index.html
    manifest.webapp
    js
        appframework.ui.min.js
        app.js
    css
        af.ui.base.css
        icons.min.css

Open up your index.html file in your favorite editor and copy in the following code for the basic ‘Hello World’ app

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
 
    <head>
        <title>FF OS sample</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/af.ui.base.css" />
        <script type="text/javascript" charset="utf-8" src="ui/appframework.ui.min.js"></script>
        </head>
 
    <body>
        <div id="afui">
            <!-- this is the main container div.  This way, you can have only part of your app use UI -->
            <!-- this is the header div at the top -->
            <div id="header">
            </div>
            <!-- content is where your panels live/scrollable area -->
            <div id="content">
                <!-- here is where you can add your panels -->
                <div data-title='Firefox OS' id="main" class="panel" selected="true">
                    Hello World
                </div>
            </div>
            <!-- bottom navbar. Add additional tabs here -->
            <div id="navbar">
                <a href="#main" id='navbar_home' class='icon home'>home</a>
            </div>
        </div>
    </body>
 
</html>

Test

Now you can test your sample app on the Firefox OS simulator or a device. You should see the header with the title “Firefox OS”, “Hello World” in the content area, and a footer with a single icon at the bottom. Since we did not add any additional panels, there isn’t much you can do. Let’s update our code and add more. Open up index.html in your editor and change it to the following.

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
 
    <head>
        <title>FF OS sample</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/af.ui.base.css" />
        <script type="text/javascript" charset="utf-8" src="ui/appframework.ui.min.js"></script>
        </head>
 
    <body>
        <div id="afui">
            <div id="header">
            </div>
            <div id="content">
                <div data-title='Firefox OS' id="main" class="panel" selected="true">
                    Hello World
                </div>
                <div data-title='Page 2' id="page2" class="panel">
                    <ul class='list'>
                        <li>
                            <a href='#page2'>Item 1</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 2</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 3</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 4</a>
                        </li>
                        <li class='divider'>
                            Divider
                        </li>
                        <li>
                            <a href='#page2'>Item 5</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 6</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 7</a>
                        </li>                                       
                    </ul>
                </div>
 
            </div>
            <!-- bottom navbar. Add additional tabs here -->
            <div id="navbar">
                <a href="#main" id='navbar_home' class='icon home'>home</a>
                <a href="#page2" id='navbar_home' class='icon gear'>home</a>
            </div>
        </div>
    </body>
 
</html>

View the new code

Run your updated code again in the simulator or device. You will see two items in the bottom tab bar, and a link to “Page 2″. Navigate to Page 2 and you will see the slide up transition, along with a stylized list. You can scroll the list using the built in JavaScript scroller. Hit the back button at the top to go back in the history stack.

What’s next?

Get a starter template and start building your application! Check out the App Framework website for more documentation and tips.

We are working on a Firefox OS theme and you can check our work out. We love feedback and are happy to fix any bugs found. Just head on over to GitHub and report the issues. If you want to extend your app more, build plugins and share them with other developers

Screenshots

Below are some screen shots from the Intel® XDK App Preview application, powered by App Framework. This is a cross platform application that runs on phones and tablets.

login

list

demo

*Other names and brands may be claimed as the property of others.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)