Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'html'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Atlassian

Categories

  • Personal
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Invision Community
    • E-Commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Invision Community
  • E-Commerce
  • Affixes & Prefixes

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-Commerce
  • Others

Categories

  • Thoughts
  • Debate
  • Health
  • Hobbies

Categories

  • Personligt
    • Åsikter
    • Humor
    • Spel
    • Träning
  • Allmänt
    • Internet
    • Program & tjänster
  • Intressant
    • Prylar
  • Professionellt
    • Management
    • Krav
    • Designs
    • Webbutveckling
    • Test
    • Atlassian
    • säkerhet
    • Förvaltning
    • Ehandel
    • Wordpress
  • Personligt_

Categories

  • Prologue
    • About This Book
  • The Tools
    • Jira Software
    • Confluence
    • Jira Service Management
  • The Inception Phase
    • Portfolio Management
    • Project Management
  • The Design Phase
    • Design as part of the Inception phase
    • Design as part of the Requirement phase
    • Working with design libraries
  • The Requirement Phase
    • Definition of Requirements
    • The four levels of Requirements
  • The Development Phase
    • Atomic design
    • Estimations
  • The Test Phase
    • The Definition of Test
    • Types of Test
  • The Operations Phase
    • Release Management
  • The Post Go-Live Phase
    • Incidents
    • Changes
  • Notes
    • My Muses
    • Research

Categories

  • Theme Building
  • Javascript Framework
  • CSS Framework
  • IPS: Pages
    • Database Templates
    • Block Plugin Templates
    • Page Templates
  • Custom Applications
  • Tips & Tricks

Categories

  • Professional
    • Consulting
  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
    • Hosting
    • Security
  • Interesting
  • Atlassian
  • Invision Community
  • E-Commerce
    • CRO
    • SEO

Categories

  • Shared Hosting
  • Virtual Private Server
  • Cloud Hosting
  • Dedicated Hosting
  • Co-Location
  • Hosting Services

Categories

  • Professional
  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
    • Security
  • Interesting
  • Atlassian
  • Invision Community
  • E-Commerce

Categories

  • Professional
  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Miscellaneous

Categories

  • Defects
  • Ideas
  • Development
  • ☑ Archive

Categories

  • Professional
  • Management
    • Agile
  • Requirements
  • Design
  • Development
    • Frontend
    • Backend
  • Testing
  • Operations
    • Security
    • Hosting
  • Interesting
  • Atlassian
  • E-Commerce
    • CRO
    • SEO
  • Invision Community

Categories

  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Invision Community
    • E-Commerce
  • Miscellaneous
    • Fun
    • Games
    • Inspiration
    • Music

Categories

  • Jira Software Cloud Basics
    • Projects in Jira Software Cloud
    • Navigation in Jira Software Cloud
    • Boards in Jira Software Cloud
    • Filters in Jira Software Cloud
    • Dashboards in Jira Software Cloud
  • Jira Software Cloud User Guides
    • Working with Boards in Jira Cloud
    • Working with Filters in Jira Cloud
    • Working with Dashboards in Jira Cloud
  • Jira Software Cloud Project Admin Guides
    • Working with Project Settings in Jira Software Cloud
    • Working with People Settings in Jira Software Cloud
    • Working with Automation in Jira Software Cloud
  • Jira Software Cloud Admin Guides
    • Jira Software User Management
    • Jira Software Billing
    • Jira Software System
    • Jira Software Products
    • Jira Software Projects
    • Jira Software Issues
    • Jira Software Apps

Categories

  • Invision Community HTML Framework
  • Invision Community CSS Framework
    • Typography
    • Colors
    • Columns & Grid
    • Responsiveness
    • Forms
    • Datalists
    • Buttons
    • Messages
    • Miscellaneous
  • Invision Community JavaScript Framework
    • Invision Community UI Widgets
    • Invision Community Utilities modules
  • Invision Community CMS Pages
    • Invision Community Pages Basics
    • Invision Community Pages Templates
    • Invision Community Pages Tips & Tricks
    • Invision Community Pages Basic relationship
  • Invision Community Tips & Tricks

Categories

  • Design Guidelines
  • How to work with The Flexible Atlassian Setup
    • Portfolio Management
    • Visual Design
    • Requirements
    • Development
    • Test & Acceptance
    • Deploy & Release
    • Post GoLive Support
  • The Jira Software Cloud Setup
    • Introduction to the Setup
    • Issue Types
    • Issue Type Schemas
    • Workflows
    • Workflow Schemas
    • Screens
    • Screens Schemas
    • Issue Type Screens Schemas
    • Custom Fields
    • Field Configurations
    • Field Configuration Schemas
    • Permission Schemas
    • Notification Schemas
  • The Confluence System Documentation Setup
    • Introduction to the Setup
    • Architecture Section
    • Documents Section
    • Instructions Section
    • Quality Section
    • Requirements Section
    • Tecnical Documentation Section
    • Organization Section
    • Visual design Section

Categories

  • Professional
  • Management
    • Methodology
    • Leadership
  • Design
  • Requirements
  • Development
    • Frontend
    • Backend
  • Testing
  • Operations
    • Hosting
    • Security
  • Interesting
  • Atlassian
  • Invision Community
  • E-Commerce
    • CRO
    • SEO
  • Miscellaneous

Categories

  • HTML References
    • HTML Tags
    • Frontend Frameworks
  • CSS References
    • CSS Properties
    • CSS Methodologies
  • JavaScript References
    • JavaScript Objects
    • JavaScript Libraries
    • JavaScript Methodologies

Categories

  • Product Reviews
  • Company Reviews
  • Hosting Reviews
  • Personal Blog Reviews

Categories

  • Confluence Cloud Basics
    • Confluence Cloud Interface
    • Conflunce Cloud Spaces
    • Confluence Cloud Personal Space
    • Conflunce Cloud Templates
  • Confluence Cloud User Guides
    • Conflunce Cloud Macros
    • Conflunce Cloud Space Blog
    • Conflunce Cloud Space settings
    • Conflunce Cloud Space Pages
  • Confluence Cloud Admin Guides
    • Conflunce Cloud General Configurations
    • Conflunce Cloud Security
    • Confluence Cloud Look and Feel
    • Confluence Cloud Adminsitration

Categories

  • Tools
    • Professional
    • Management
    • Design
    • Requirements
    • Development
    • Testing
    • Operations
    • Interresting
    • Atlassian
    • E-Commerce
  • Methodology
  • Social Interaction
  • Areas of Expertise
    • Management
    • Design
    • Requirements
    • Development
    • Testing
    • Operations
    • Atlassian
    • E-Commerce

Forums

  • General
    • Open Forum
    • Support
    • Applications
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Test / QA
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
    • Invision Community
  • Jobs
    • Looking for employee / consultant
    • Looking for Job / Assignment
  • Building The Site's Forums
  • Destiny 2's Discussions
  • The Journey's Discussions
  • Cinephilia's Topics
  • Diablo 4's Diablo 4 Topics
  • Shadownessence's Topics
  • sensory hyperreactivity's Topics
  • Wolcen's Wolcen Topics
  • Quality Assurance Heroes's QA Topics
  • Visual Studio Code's Forum
  • Adobe Illustrator's Adobe Illustrator Forum
  • Sketch Guru's's Sketch Topics
  • Requirements & test management in Jira's Topics
  • Microsoft Teams's Microsoft Teams Discussions
  • Figma's Figma Topics
  • Microsoft Planner's Microsoft Planner Topics
  • Psychology's Psychology Topics
  • Microsoft Word's Microsoft Word Topics
  • Microsoft Powerpoint's Microsoft Powerpoint Topics
  • WordPress Devs's Wordpress Topics
  • Ornamental Design's Ornamental Design Topics
  • Adobe Photoshop's Photoshop Discussions
  • Agile 2's Agile 2 Topics
  • Agile 2's Agile 2 Principles
  • Microsoft Outlook's Outlook Topics
  • My Book's Discussions
  • Outriders's Outriders Discussions

Categories

  • Jimi's Files
    • Curriculum vitae
    • Presentations
    • Certificates
  • Management
  • Requirements
  • Design
    • Fonts
  • Code
  • Test
  • Operations
  • Atlassian
    • Certificates of Excellence
  • Security
  • Ecommerce
  • Invision Power Services
    • JWSE Support Tickets
    • JWSE Task Management
  • Shadownessence's Files
  • WordPress Devs's Wordpress Files

Calendars

  • Project: JWSE Workboard
  • Project: JWSE Workboard
  • Community Calendar
  • Professional Events
  • Management Events
  • Requirement Events
  • Design Events
  • Development Events
  • Test Events
  • Atlassian Events
  • Operations Events
  • E-commerce Events
  • Invision Community Calendar
  • Destiny 2's Events
  • The Journey's Events
  • Cinephilia's premieres
  • Diablo 4's Diablo 4 Events
  • Agile 2's Agile 2 Events

Blogs

  • How to start your own blog
  • Sketch Blog
  • Building The Site's Blog
  • Destiny 2's Destiny 2 ramblings
  • The Journey's Stories
  • Diablo 4's Diablo 4 blog
  • Sketch Guru's's Sketch News
  • Requirements & test management in Jira's News
  • Agile 2's Agile 2 Blog

Categories

  • Movies
    • Action Movies
    • Adventure Movies
    • Animated Movies
    • Comedy Movies
    • Crime Movies
    • Drama Movies
    • Fantasy Movies
    • Horror Movies
    • Romance Movies
    • Sci-Fi Movies
    • Thriller Movies
    • Western Movies
  • TV Shows
    • Action TV Shows
    • Adventure TV Shows
    • Animated TV Shows
    • Comedy TV Shows
    • Crime TV Shows
    • Drama TV Shows
    • Fantasy TV Shows
    • Horror TV Shows
    • Romance TV Shows
    • Sci-Fi TV Shows
    • Thriller TV Shows
    • Western TV Shows

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me

Found 18 results

  1. Jimi Wikman

    HTML <!DOCTYPE> Declaration

    The HTML DOCTYPE declaration is not an HTML tag in the normal definition. The DOCTYPE tag defines what type of content the document is, which help the browsers understand what type of content to expect. A document type declaration, or DOCTYPE, is an instruction that associates a particular XML or SGML document (for example, a webpage) with a document type definition (DTD) (for example, the formal definition of a particular version of HTML 2.0 - 4.0). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax. The HTML layout engines in modern web browsers perform DOCTYPE "sniffing" or "switching", wherein the DOCTYPE in a document served as text/html determines a layout mode, such as "quirks mode" or "standards mode". The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don't use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers. <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> In HTML5, we declare the HTML DOCTYPE in the shortest possible way. The <!DOCTYPE> declaration is NOT case sensitive. <!DOCTYPE html> More information The general syntax for a document type declaration is: <!DOCTYPE root-element PUBLIC "FPI" ["URI"] [ <!-- internal subset declarations --> ]> or <!DOCTYPE root-element SYSTEM "URI" [ <!-- internal subset declarations --> ]> In XML, the root element that represents the document is the first element in the document. For example, in XHTML, the root element is <html>, being the first element opened (after the doctype declaration) and last closed. The keywords SYSTEM and PUBLIC suggest what kind of Document Type Definition (DTD) it is (one that is on a private system or one that is open to the public). If the PUBLIC keyword is chosen then this keyword is followed by a restricted form of "public identifier" called Formal Public Identifier (FPI) enclosed in double quote marks. After that, necessarily, a "system identifier" enclosed in double quote marks, too, is provided. For example, the FPI for XHTML 1.1 is "-//W3C//DTD XHTML 1.1//EN" and, there are 3 possible system identifiers available for XHTML 1.1 depending on the needs, one of them is the URI reference "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd". If, instead, the SYSTEM keyword is chosen, only a system identifier must be given. It means that the XML parser must locate the DTD in a system specific fashion, in this case, by means of a URI reference of the DTD enclosed in double quote marks. The last part, surrounded by literal square brackets ([]), is called an internal subset which can be used to add/edit entities or add/edit PUBLIC keyword behaviors.[3] The internal subset is always optional (and sometimes even forbidden within simple SGML profiles, notably those for basic HTML parsers that don't implement a full SGML parser). On the other hand, document type declarations are slightly different in SGML-based documents such as HTML, where the public identifier may be associated with the system identifier. This association might be performed, e. g., by means of a catalog file resolving the FPI to a system identifier. Example The first line of a World Wide Web page may read as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ar" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> This document type declaration for XHTML includes by reference a DTD, whose public and whose system identifier is http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd.Common DT Some common DTDs have been put into lists. W3C has produced a list of DTDs commonly used in the web, which contains the "bare" HTML5 DTD, older XHTML/HTML DTDs, DTDs of common embedded XML-based formats like MathML and SVG as well as "compound" documents that combine those formats.[5] Both W3C HTML5 and its corresponding WHATWG version recommend browsers to only accept XHTML DTDs of certain FPIs and to prefer using internal logic over fetching external DTD files. It further specifies an "internal DTD" for XHTML which is merely a list of HTML entity names.[6]: §13.2  HTML 4.01 DTDs Strict DTD does not allow presentational markup with the argument that Cascading Style Sheets should be used for that instead. This is how the Strict DTD looks: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> Transitional DTD allows some older PUBLIC and attributes that have been deprecated: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> If frames are used, the Frameset DTD must be used instead, like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> XHTML 1.0 DTDs XHTML's DTDs are also Strict, Transitional and Frameset. XHTML Strict DTD. No deprecated tags are supported and the code must be written correctly according to XML Specification. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> XHTML Transitional DTD is like the XHTML Strict DTD, but deprecated tags are allowed. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> XHTML Frameset DTD is the only XHTML DTD that supports Frameset. The DTD is below. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> XHTML 1.1 DTD XHTML 1.1 is the most current finalized revision of XHTML, introducing support for XHTML Modularization. XHTML 1.1 has the stringency of XHTML 1.0 Strict. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTML Basic DTDs XHTML Basic 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> XHTML Basic 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> HTML5 DTD-less DOCTYPE HTML5 uses a DOCTYPE declaration which is very short, due to its lack of references to a DTD in the form of a URL or FPI. All it contains is the tag name of the root element of the document, HTML.[7] In the words of the specification draft itself: In other words, <!DOCTYPE html>, case-insensitively. With the exception of the lack of a URI or the FPI string (the FPI string is treated case sensitively by validators), this format (a case-insensitive match of the string !DOCTYPE HTML) is the same as found in the syntax of the SGML based HTML 4.01 DOCTYPE. Both in HTML4 and in HTML5, the formal syntax is defined in upper case letters, even if both lower case and mixes of lower case upper case are also treated as valid. In XHTML5 the DOCTYPE must be a case-sensitive match of the string "<!DOCTYPE html>". This is because in XHTML syntax all HTML element names are required to be in lower case, including the root element referenced inside the HTML5 DOCTYPE. The DOCTYPE is optional in XHTML5 and may simply be omitted.[8] However, if the markup is to be processed as both XML and HTML, a DOCTYPE should be used.
  2. Learn how to easily let your users fill out forms and send them in your application. It only takes a few minutes image from snipcartWhen building SPA applications, either using Nuxt, Next, or some other framework, you are likely to have a contact form in your application that can allow users to contact you easily by filling in the form. I’ll show you how to easily handle and submit forms using Netlify Forms, and without you having to do any backend code whatsoever. Using forms with Netlify forms, we get the ability to handle forms without the need for a lot of backend configuration or code. Get started Before getting started, there are a few things you need set up. A site hosted on NetlifyA unique domain, it won’t work with your test domain on NetlifyHTTPS enabled in NetlifyOn Netlify, you are granted free HTTPS, so no need to go out and buy a certificate. When dealing with forms, t’s always a good idea to have HTTPS turned on — this way you ensure that your application does not send unencrypted data over an insecure connection. https://medium.com/media/18214d8333adbb5668f31791a3202b60/hrefBuild the HTML The first thing we need to do is create a basic contact form with some simple HTML. In my example, I’m using Nuxt, but you can use whatever you like. The form needs to contain three fields; Name, Email, Message My form looks something like this: <template> <div class="form"> <form name="contact" method="POST"> <div class="form__input"> <input type="text" name="name" id="name" required /> <label for="name">Name</label> </div> <div class="form__input"> <label for="email">Email</label> <input type="email" name="email" id="email" required /> </div> <div class="form__textarea"> <label for="message">Message</label> <textarea name="message" id="message" required></textarea> </div> <button type="submit" class="button button--submit"> <span> Send message </span> </button> </form> </div> </template>We have a form with 3 input fields and a submit button. As you may have noticed, no “action” has been added. We’ll deal with that later. Your input fields must have a “name” attribute, as these are the ones that will be mapped to Netlify. Important, remember to also give your form attribute. In my case, the form name is “contact” Add some CSS to your form, and you might have something similar to mine: Setting up Netlify To ensure that our form works correctly and can send the data to Netlify, our form requires a bit more work. We need to add the necessary Netlify attribute. This allows for when the user submits the form, the data it sent over to Netlify. We can do this by adding the “data-netlify =” true “ attribute to our form tag. <form name="contact" method="POST" data-netlify="true">This makes sure that Netlify will handle whatever is submitted in the form. If you test your form now, you should be able to see your submission within the Netlify control panel, under “forms”. If you have more than one form in your application, you can make sure that form submissions are grouped. If you would like this, you simple add the following code to your form: <input type="hidden" name="form-name" value="contact">With the above code added, Netlify now saves data under Contact (as the value is contact) in the Netlify control panel. Secure your form from SPAM A form without any captcha integration is likely to be spammed. To prevent this we can implement the “honeypot” method from Netlify. The honeypot method is basically hidden form fields that trick bots into filling in what we humans cannot see. Expand your form with the following: <template> <div class="form"> <form name="contact"´method="POST" netlify-honeypot="bot-field" data-netlify="true"> <p class="hidden"> <label><input name="bot-field" /></label> </p> <div class="form__input"> <input type="text" name="name" id="name" required /> <label for="name">Name</label> </div> <div class="form__input"> <label for="email">Email</label> <input type="email" name="email" id="email" required /> </div> <div class="form__textarea"> <label for="message">Message</label> <textarea name="message" id="message" required></textarea> </div> <button type="submit" class="button button--submit"> <span> Send message </span> </button> </form> </div> </template>Remember to hide the bot-field with CSS. The above makes sure if someone fills in the “bot-field” field, then Netlify will see it as spam! If it’s filled in, it is likely to be a spam bot, as the field is not visible to the user! This is one of the small gold nuggets hidden by Netlify, namely automatic “spam-bot detection” Test your form Unfortunately, we can’t test the form locally! If requires that you have your application deployed to Netlify. Once you have made a deployment, navigate to the page where your contact form is located. In my case, the URL would be: https://nickychristensen.dk/kontakt/ Fill in the fields and press the submit button. Then log in to Netllify (https://www.netlify.com/) and go to forms. If everything goes to plan, you will now be able to see your data: If you would like to redirect the user to eg: a thank you page after submission, you can do this by adding an action to your thank you page: <form name="contact" action="/thank-you-page" netlify-honeypot="bot-field" method="POST" data-netlify="true">You now have a working form in your application with SPAM protection! Thanks for reading and I hope you liked the article, if so, please help support me by hitting that clap button or subscribing. If you’re not a Medium member yet, consider becoming one! You get access to great content like this from thousands of authors! It helps support writers, and you have the chance to make money with your writing as well. Sign up here for only $5 a month. If you want to subscribe my all of my content, you can do that here Stop using Moment.js for Dates — This is the Better Alternative10 Tips I Would Have Given My Younger Self as a DeveloperA closer look on array.reduce() with useful examplesTypeScript Generics Explained in 2 Minutes with ExamplesIf you’d like to catch up with me sometime, follow me on Twitter | LinkedIn or simply visit my website (That is in Danish) Send forms in your application using Netlify Forms was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.
  3. If you wish to make Web development a career or it is merely your hobby it can be overwhelming to decide where to begin. You can certainly… Continue reading on Medium »
  4. Jimi Wikman

    <!--...-->

    Definition and Usage When you work with code, you often find yourself in need of some comments to make sense of the code and to document things in the code. This is when the HTML comment tag can be useful. You use this either by just writing a comment in proximity of a set of code, but you can also use it to comment out blocks of code. This is done by placing the starting tag before the block of code and then the closing tag after the block of code. The HTML comment tag will not show in the browser, but it will be in your code for anyone that inspect it. Example code <!--This is a comment. Comments are not displayed in the browser--> <p>This is a paragraph.</p> Click the Code tab above to see this in action.
  5. ISO 3166 The International Standard for country codes and codes for their subdivisions The purpose of ISO 3166 is to define internationally recognized codes of letters and/or numbers that we can use when we refer to countries and their subdivisions. However, it does not define the names of countries – this information comes from United Nations sources (Terminology Bulletin Country Names and the Country and Region Codes for Statistical Use maintained by the United Nations Statistics Divisions). The country codes can be represented either as a two-letter code (alpha-2) which is recommended as the general-purpose code, a three-letter code (alpha-3) which is more closely related to the country name and a three-digit numeric code (numeric-3) which can be useful if you need to avoid using Latin script. iso.org --- In HTML, we use the country code when we define the lang atribute. The lang attribute is used to identify the language of text content on the web. This information helps search engines return language specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation. The way the country codes are defined is that it has two parts. The first two characters defines the language (ISO 639-1) of the website, and the second two characters define the country. This is because several countries have more than one language as the official language. The following example specifies English as language and United States as country: <html lang="en-US"> ... </html> Country Codes Country Iso Code AFGHANISTAN AF ALBANIA AL ALGERIA DZ AMERICAN SAMOA AS ANDORRA AD ANGOLA AO ANTARCTICA AQ ANTIGUA AND BARBUDA AG ARGENTINA AR ARMENIA AM ARUBA AW AUSTRALIA AU AUSTRIA AT AZERBAIJAN AZ BAHAMAS BS BAHRAIN BH BANGLADESH BD BARBADOS BB BELARUS BY BELGIUM BE BELIZE BZ BENIN BJ BERMUDA BM BHUTAN BT BOLIVIA BO BOSNIA AND HERZEGOVINA BA BOTSWANA BW BOUVET ISLAND BV BRAZIL BR BRITISH INDIAN OCEAN TERRITORY IO BRUNEI DARUSSALAM BN BULGARIA BG BURKINA FASO BF BURUNDI BI CAMBODIA KH CAMEROON CM CANADA CA CAPE VERDE CV CAYMAN ISLANDS KY CENTRAL AFRICAN REPUBLIC CF CHAD TD CHILE CL CHINA CN CHRISTMAS ISLAND CX COCOS (KEELING) ISLANDS CC COLOMBIA CO COMOROS KM CONGO CG CONGO, THE DEMOCRATIC REPUBLIC OF THE CD COOK ISLANDS CK COSTA RICA CR CÔTE D'IVOIRE CI CROATIA HR CUBA CU CYPRUS CY CZECH REPUBLIC CZ DENMARK DK DJIBOUTI DJ DOMINICA DM DOMINICAN REPUBLIC DO ECUADOR EC EGYPT EG EL SALVADOR SV EQUATORIAL GUINEA GQ ERITREA ER ESTONIA EE ETHIOPIA ET FALKLAND ISLANDS (MALVINAS) FK FAROE ISLANDS FO FIJI FJ FINLAND FI FRANCE FR FRENCH GUIANA GF FRENCH POLYNESIA PF FRENCH SOUTHERN TERRITORIES TF GABON GA GAMBIA GM GEORGIA GE GERMANY DE GHANA GH GIBRALTAR GI GREECE GR GREENLAND GL GRENADA GD GUADELOUPE GP GUAM GU GUATEMALA GT GUINEA GN GUINEA-BISSAU GW GUYANA GY HAITI HT HEARD ISLAND AND MCDONALD ISLANDS HM HONDURAS HN HONG KONG HK HUNGARY HU ICELAND IS INDIA IN INDONESIA ID IRAN, ISLAMIC REPUBLIC OF IR IRAQ IQ IRELAND IE ISRAEL IL ITALY IT JAMAICA JM JAPAN JP JORDAN JO KAZAKHSTAN KZ KENYA KE KIRIBATI KI KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF KP KOREA, REPUBLIC OF KR KUWAIT KW KYRGYZSTAN KG LAO PEOPLE'S DEMOCRATIC REPUBLIC (LAOS) LA LATVIA LV LEBANON LB LESOTHO LS LIBERIA LR LIBYA, STATE OF LY LIECHTENSTEIN LI LITHUANIA LT LUXEMBOURG LU MACAO MO MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF MK MADAGASCAR MG MALAWI MW MALAYSIA MY MALDIVES MV MALI ML MALTA MT MARSHALL ISLANDS MH MARTINIQUE MQ MAURITANIA MR MAURITIUS MU MAYOTTE YT MEXICO MX MICRONESIA, FEDERATED STATES OF FM MOLDOVA, REPUBLIC OF MD MONACO MC MONGOLIA MN MONTENEGRO ME MONTSERRAT MS MOROCCO MA MOZAMBIQUE MZ MYANMAR MM NAMIBIA NA NAURU NR NEPAL, FEDERAL DEMOCRATIC REPUBLIC OF NP NETHERLANDS NL NETHERLANDS ANTILLES AN NEW CALEDONIA NC NEW ZEALAND NZ NICARAGUA NI NIGER NE NIGERIA NG NIUE NU NORFOLK ISLAND NF NORTHERN MARIANA ISLANDS MP NORWAY NO OMAN OM PAKISTAN PK PALAU PW PALESTINE, STATE OF PS PANAMA PA PAPUA NEW GUINEA PG PARAGUAY PY PERU PE PHILIPPINES PH PITCAIRN PN POLAND PL PORTUGAL PT PUERTO RICO PR QATAR QA RÉUNION RE ROMANIA RO RUSSIAN FEDERATION RU RWANDA RW SAINT HELENA SH SAINT KITTS AND NEVIS KN SAINT LUCIA LC SAINT PIERRE AND MIQUELON PM SAINT VINCENT AND THE GRENADINES VC SAMOA WS SAN MARINO SM SAO TOME AND PRINCIPE ST SAUDI ARABIA SA SENEGAL SN SERBIA RS SEYCHELLES SC SIERRA LEONE SL SINGAPORE SG SLOVAKIA SK SLOVENIA SI SOLOMON ISLANDS SB SOMALIA SO SOUTH AFRICA ZA SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS GS SOUTH SUDAN SS SPAIN ES SRI LANKA LK SUDAN SD SURINAME SR SVALBARD AND JAN MAYEN SJ SWAZILAND SZ SWEDEN SE SWITZERLAND CH SYRIAN ARAB REPUBLIC SY TAIWAN TW TAJIKISTAN TJ TANZANIA, UNITED REPUBLIC OF TZ THAILAND TH TIMOR-LESTE TL TOGO TG TOKELAU TK TONGA TO TRINIDAD AND TOBAGO TT TUNISIA TN TURKEY TR TURKMENISTAN TM TURKS AND CAICOS ISLANDS TC TUVALU TV UGANDA UG UKRAINE UA UNITED ARAB EMIRATES AE UNITED KINGDOM GB UNITED STATES US UNITED STATES MINOR OUTLYING ISLANDS UM URUGUAY UY UZBEKISTAN UZ VANUATU VU VENEZUELA VE VIET NAM VN VIRGIN ISLANDS, BRITISH VG VIRGIN ISLANDS, U.S. VI WALLIS AND FUTUNA WF WESTERN SAHARA EH YEMEN YE ZAMBIA ZM ZIMBABWE ZW
  6. Database relations in Pages is a very powerful way to bring content from different databases into entries of ther databases. In this example I will show you how I added the People in project area in My Projects. Creating the Database I started by creating a new database called "People Profiles". It will be a database just to hold the data as it will not be publicly presented anywhere outside of the My Projects area. just to make it easier to work with I created a page and added the database to it. I also made the page available only to me so I can use it, but it will not be visible to anyone else. Then I decided on the fields that I wanted to use. I want to use an image, so I activated the record image. Then I went through the data I wanted to add: Name Title Awesome URL Linkedin URL Instagram URL Twitter URL Homepage URL Working area These are the basic fields. I realized thad I will probably have multiple versions of the profiles depending on when in time I worked with them. To search for the correct profile I would need more information, so I also added a Long Title that i se as the title field. I also added a Notes field to act as the Content field in case I wanted to scribble something down for myself. Setting up a Database Relationship After I added a few profiles it was time to bring them from the People Profiles database into the My Projects database. The first step was to add a new field into the My Projects database of the type "Database Relationship". When creating that I have to choose what database I want to create the relationship to, so I selected People Profiles. In the settings for display options I set a template key so I can reference it later and I unchecked the show in listing template and show in display tempate. Adding the database relationship in the template As I have selected not to display anything in the listing or display templates nothing will happen yet. So new we have to add this to our template for My Projects so we can show the data where we want it. So we head over to Templates in Pages where I have created my own template set for My Projects. Adding custom fields are done by adding a code line. There are some variations on this, but I will not into it in this post. This is the code: {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} As you only want to show this field if it is actually not blank, then we wrap that in a condition to only show if it is not blank: {{if $record->customFieldDisplayByKey('your custom field key')}} {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} {{endif}} In my case I also wanted to add some styling and a header. So my code looks like this: <!- People in Footer --> {{if $record->customFieldDisplayByKey('project_people')}} <div class="project_people_footer"> <h3>People in the Project</h3> <div class='ipsGrid ipsGrid_collapseTablet'> {$record->customFieldDisplayByKey('project_people', 'display')|raw} </div> </div> {{endif}} Defining the output in basicRelationship Now that we have included the data from the People Profiles database you will see that it is just a link. We want to have more data than that so now we must define what data we want to pull from that database and how we want that to be displayed. We have to do that be editing a theme file called basicRelationship. So we head over to our Theme folder and click the "Edit HTML and CSS" icon to get into the templates. Then under CMS->Global you will find the basicRelationship file. This file is a bit tricky because it defines all database relations. In order for us to target specifically the data coming from People Profiles we need to figure out what ID that database has. We can do that from Pages under Content->Databases which will list all database. If you hover over the edit button over your selected database, then you can see the URL at the bottom of your screen with the ID of the database at the very end. With the ID defined we can add a bit of code to make sure we only target specific databases with our changes: {{foreach $items as $id => $item}} {{if $item::$customDatabaseId == 19}} <!-- People database --> {template="BasicRelationship_PeopleProfiles" app="cms" group="basic_relationship_templates" params="$item"} {{elseif $item::$customDatabaseId == 16}} <!-- Author database --> {template="BasicRelationship_author" app="cms" group="basic_relationship_templates" params="$item"} {{else}} <!-- all other databases --> <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a> {{endif}} {{endforeach}} Creating Theme Templates instead of just using basicRelationship In this code I have added 2 databases (19 and 16) and then I have a fallback for all others at the end that will show the default link. While it is very possible to add the code directly into this template I have used a different approach and instead created separate templates outside and then referenced them in the basicRelationship. This way I can work on the content for each database in a more focused way and the basicRelationship becomes a bit easier to overlook. In order to create a new template you go to Create New at the bottom of the template listings. Select HTML template and then fill out the form accordingly. Name - the name of the template. Variables - We add $items here since that is what is defined in the foreach loop in basicRelations. Location - Here we select front to place the template in the correct section. Group - I suggest you create your own group here so it is easier for you to find later. Application - Here we select Pages If you have done this as I have then you will have your new template located under CMS->Front->basic_relationship_templates. If you have selcted another group, then that is where you will find it instead. Adding data to the theme template Now that we have a template for our connection between the databases, then we can start adding the data to it that we want to show in My Projects. This is done in a very similar way as when we add the data to the entry templates. Instead of using $record however we use $item: {{if $item->customFieldDisplayByKey('your custom field key')}} {$item->customFieldDisplayByKey('your custom field key', 'raw')} {{endif}} As I added the default record image that is called a bit differently: {file="$item->_record_image_thumb" extension="cms_Records"} You can also reference the title field and the content field with a shorter tag: {$item->_title} {$item->_content|raw} In my current code I have nested the fields a bit and I have used the field for working area pretty sloppy, but I think you get the general idea. <div class='ipsGrid_span2 people-profiles_card'> <div class="people-profiles_image {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}_image"> <img class="ipsImage {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}" src="{file="$item->_record_image_thumb" extension="cms_Records"}" class=" {{if $item->customFieldDisplayByKey('working-area')}} {$item->customFieldDisplayByKey('working-area', 'raw')} {{endif}} " /> </div> <div class="people-profiles_Name"> {{if $item->customFieldDisplayByKey('people-profiles_Name')}} {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')} {{endif}} </div> <div class="people-profiles_Title"> {{if $item->customFieldDisplayByKey('people-profiles_Title')}} <span class="{{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}">{$item->customFieldDisplayByKey('people-profiles_Title', 'raw')}</span> {{endif}} </div> <div class="people-profiles_links"> {{if $item->customFieldDisplayByKey('people-profiles_Awesome')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Awesome', 'raw')}" class="people-profiles_Awesome"><i class="fas fa-id-card"></i></a> {{else}} <i class="fas fa-id-card"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Linkedin')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Linkedin', 'raw')}" class="people-profiles_Linkedin"><i class="fab fa-linkedin"></i></a> {{else}} <i class="fab fa-linkedin"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Instagram')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Instagram', 'raw')}" class="people-profiles_Instagram"><i class="fab fa-instagram-square"></i></a> {{else}} <i class="fab fa-instagram-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Twitter')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Twitter', 'raw')}" class="people-profiles_Twitter"><i class="fab fa-twitter-square"></i></a> {{else}} <i class="fab fa-twitter-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Homepage')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Homepage', 'raw')}" class="people-profiles_Homepage"><i class="fas fa-home"></i></a> {{else}} <i class="fas fa-home"></i> {{endif}} </div> </div> This guide should help you to bring in the data from any database into another database with the styling of your choice. I know this is a pretty short and not very detailed guide, but I hope it was useful anyway. Please add questions and I will improve upon the guide where I am jumping a bit to fast. Happy coding! View full blog article
  7. Database relations in Pages is a very powerful way to bring content from different databases into entries of ther databases. In this example I will show you how I added the People in project area in My Projects. Creating the Database I started by creating a new database called "People Profiles". It will be a database just to hold the data as it will not be publicly presented anywhere outside of the My Projects area. just to make it easier to work with I created a page and added the database to it. I also made the page available only to me so I can use it, but it will not be visible to anyone else. Then I decided on the fields that I wanted to use. I want to use an image, so I activated the record image. Then I went through the data I wanted to add: Name Title Awesome URL Linkedin URL Instagram URL Twitter URL Homepage URL Working area These are the basic fields. I realized thad I will probably have multiple versions of the profiles depending on when in time I worked with them. To search for the correct profile I would need more information, so I also added a Long Title that i se as the title field. I also added a Notes field to act as the Content field in case I wanted to scribble something down for myself. Setting up a Database Relationship After I added a few profiles it was time to bring them from the People Profiles database into the My Projects database. The first step was to add a new field into the My Projects database of the type "Database Relationship". When creating that I have to choose what database I want to create the relationship to, so I selected People Profiles. In the settings for display options I set a template key so I can reference it later and I unchecked the show in listing template and show in display tempate. Adding the database relationship in the template As I have selected not to display anything in the listing or display templates nothing will happen yet. So new we have to add this to our template for My Projects so we can show the data where we want it. So we head over to Templates in Pages where I have created my own template set for My Projects. Adding custom fields are done by adding a code line. There are some variations on this, but I will not into it in this post. This is the code: {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} As you only want to show this field if it is actually not blank, then we wrap that in a condition to only show if it is not blank: {{if $record->customFieldDisplayByKey('your custom field key')}} {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} {{endif}} In my case I also wanted to add some styling and a header. So my code looks like this: <!- People in Footer --> {{if $record->customFieldDisplayByKey('project_people')}} <div class="project_people_footer"> <h3>People in the Project</h3> <div class='ipsGrid ipsGrid_collapseTablet'> {$record->customFieldDisplayByKey('project_people', 'display')|raw} </div> </div> {{endif}} Defining the output in basicRelationship Now that we have included the data from the People Profiles database you will see that it is just a link. We want to have more data than that so now we must define what data we want to pull from that database and how we want that to be displayed. We have to do that be editing a theme file called basicRelationship. So we head over to our Theme folder and click the "Edit HTML and CSS" icon to get into the templates. Then under CMS->Global you will find the basicRelationship file. This file is a bit tricky because it defines all database relations. In order for us to target specifically the data coming from People Profiles we need to figure out what ID that database has. We can do that from Pages under Content->Databases which will list all database. If you hover over the edit button over your selected database, then you can see the URL at the bottom of your screen with the ID of the database at the very end. With the ID defined we can add a bit of code to make sure we only target specific databases with our changes: {{foreach $items as $id => $item}} {{if $item::$customDatabaseId == 19}} <!-- People database --> {template="BasicRelationship_PeopleProfiles" app="cms" group="basic_relationship_templates" params="$item"} {{elseif $item::$customDatabaseId == 16}} <!-- Author database --> {template="BasicRelationship_author" app="cms" group="basic_relationship_templates" params="$item"} {{else}} <!-- all other databases --> <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a> {{endif}} {{endforeach}} Creating Theme Templates instead of just using basicRelationship In this code I have added 2 databases (19 and 16) and then I have a fallback for all others at the end that will show the default link. While it is very possible to add the code directly into this template I have used a different approach and instead created separate templates outside and then referenced them in the basicRelationship. This way I can work on the content for each database in a more focused way and the basicRelationship becomes a bit easier to overlook. In order to create a new template you go to Create New at the bottom of the template listings. Select HTML template and then fill out the form accordingly. Name - the name of the template. Variables - We add $items here since that is what is defined in the foreach loop in basicRelations. Location - Here we select front to place the template in the correct section. Group - I suggest you create your own group here so it is easier for you to find later. Application - Here we select Pages If you have done this as I have then you will have your new template located under CMS->Front->basic_relationship_templates. If you have selcted another group, then that is where you will find it instead. Adding data to the theme template Now that we have a template for our connection between the databases, then we can start adding the data to it that we want to show in My Projects. This is done in a very similar way as when we add the data to the entry templates. Instead of using $record however we use $item: {{if $item->customFieldDisplayByKey('your custom field key')}} {$item->customFieldDisplayByKey('your custom field key', 'raw')} {{endif}} As I added the default record image that is called a bit differently: {file="$item->_record_image_thumb" extension="cms_Records"} You can also reference the title field and the content field with a shorter tag: {$item->_title} {$item->_content|raw} In my current code I have nested the fields a bit and I have used the field for working area pretty sloppy, but I think you get the general idea. <div class='ipsGrid_span2 people-profiles_card'> <div class="people-profiles_image {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}_image"> <img class="ipsImage {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}" src="{file="$item->_record_image_thumb" extension="cms_Records"}" class=" {{if $item->customFieldDisplayByKey('working-area')}} {$item->customFieldDisplayByKey('working-area', 'raw')} {{endif}} " /> </div> <div class="people-profiles_Name"> {{if $item->customFieldDisplayByKey('people-profiles_Name')}} {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')} {{endif}} </div> <div class="people-profiles_Title"> {{if $item->customFieldDisplayByKey('people-profiles_Title')}} <span class="{{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}">{$item->customFieldDisplayByKey('people-profiles_Title', 'raw')}</span> {{endif}} </div> <div class="people-profiles_links"> {{if $item->customFieldDisplayByKey('people-profiles_Awesome')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Awesome', 'raw')}" class="people-profiles_Awesome"><i class="fas fa-id-card"></i></a> {{else}} <i class="fas fa-id-card"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Linkedin')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Linkedin', 'raw')}" class="people-profiles_Linkedin"><i class="fab fa-linkedin"></i></a> {{else}} <i class="fab fa-linkedin"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Instagram')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Instagram', 'raw')}" class="people-profiles_Instagram"><i class="fab fa-instagram-square"></i></a> {{else}} <i class="fab fa-instagram-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Twitter')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Twitter', 'raw')}" class="people-profiles_Twitter"><i class="fab fa-twitter-square"></i></a> {{else}} <i class="fab fa-twitter-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Homepage')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Homepage', 'raw')}" class="people-profiles_Homepage"><i class="fas fa-home"></i></a> {{else}} <i class="fas fa-home"></i> {{endif}} </div> </div> This guide should help you to bring in the data from any database into another database with the styling of your choice. I know this is a pretty short and not very detailed guide, but I hope it was useful anyway. Please add questions and I will improve upon the guide where I am jumping a bit to fast. Happy coding!
  8. Victor Aflarenko

    Victor Aflarenko

    Hi! I'm Victor Aflarenko, a Swedish guy who is very passionate about music and graphic design. I love what I do, this is my passion. My inspiration comes from everything between music and buss rides.
  9. MikaelX

    Mikael X Johansson

    I am a very driven developer with a wide spectrum of knowledge and I like to take part in the whole process of the product. Great knowledge in NodeJS, Express, GIT, Jade/Pug, Sass/CSS, MySQL, XML, CSS, HTML, jQuery, xAuth, Facebook, Twitter, routing, prototyping just to mention a few Specialties: NodeJS, Express, PM2, Routing, Plugins, NPM, Bower, mySQL, XML, HTML, SASS/CSS, JS/ES2016, Gulp, Vagrant etc, please ask me for more details if you're interested
  10. My assignment was to create a new design for a political community called TheLeft. The design would then be implemented using HTML and CSS. The community also needed custom content blocks using Invision Communities Pages module. I created a new structure for that and added blocks for hero banners and other blocks need to create the desired design. I also configured Invision Community and built the structure of information to make it a complete community experience.
  11. In this article, we suggest you to get acquainted with the free editor of web languages - CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans. CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content. If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files. The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors. CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key. The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script. Other useful functions and features of the IDE: A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it. Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale. Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others. The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian. The professional version of CodeLobster IDE provides the programmer with even more features. For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting. In addition the professional version includes an extensive set of plug-ins: Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS. A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins. Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress. Also CodeLobster IDE has special plug-in for Bootstrap. We can download and install any framework directly from the program without being distracted from the main tasks. In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects. You can download CodeLobster IDE from the original website: http://www.codelobster.com/
  12. In this article, we suggest you to get acquainted with the free editor of web languages - CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans. CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content. If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files. The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors. CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key. The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script. Other useful functions and features of the IDE: A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it. Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale. Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others. The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian. The professional version of CodeLobster IDE provides the programmer with even more features. For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting. In addition the professional version includes an extensive set of plug-ins: Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS. A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins. Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress. Also CodeLobster IDE has special plug-in for Bootstrap. We can download and install any framework directly from the program without being distracted from the main tasks. In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects. You can download CodeLobster IDE from the original website: http://www.codelobster.com/ View full blog article
  13. Going over requirements and making time estimations and technical solutions for the front end part of the project.
  14. Adobe Edge Code, baserad på open source projektet Brackets, är en fantastisk editor som verkligen får min kreativitet att gå i taket. Med en enkelhet som är uppfriskande över klumpiga system som Eclipse och funktioner som gör att jag kan se min kod i realtid på flera enheter samtidigt så kan jag ärligen säga att jag älskar den lilla editorn som ännu knappt tagit sina första steg. Det var ett tag sedan jag först såg den första glimten av Adobe Edge Code och Brackets och redan då så var jag imponerad. En editor som är så snabb, enkel och anpassningsbar var helt enkelt förbluffande. Jag har suttit i många editorer under åren och de senaste åren så är det Eclipse och Dreamweaver som varit mina huvudsakliga editorer. Eclipse för att det är vad vi använder i jobbet och Dreamweaver för att det kommer med Adobe Creative Suite. Båda editorerna är väldigt kapabla, men precis som andra editorer som Netbeans och Visual Studio så är de alldeles fulla av funktioner som jag antingen inte behöver eller har tid att lära mig. Adobe Edge Code däremot har precis det jag behöver och sedan finns det en uppsjö av extra extensions om jag vill utöka funktionaliteten. Funktionen att kunna expandera vilket element som helst och se CSS klasser inline som jag kan modifiera direkt i koden istället för att hoppa mellan filer är helt otroligt hjälpsamt. Autocomplete funktioner och codehints är förvisso ganska vanligt, men ändå ganska trevligt. Lägger vi till funktionen att kunna se ändringar live så att jag kan se layouten samtidigt som jag jobbar med koden så har vi en riktig vinnare, men det finns mer! Genom att inkludera Adobe Edge Inspect så kan jag se koden live inte bara på den skärm jag jobbar på, jag kan även utöka med ytterligare enheter så att jag kan se hur koden ser ut på ipad, galaxytab, iphone och valfritt antal android telefoner - samtidigt! Det blir inte bättre än så, speciellt om du sitter och jobbar med responsiv design eller måste se hur din design ser ut på olika enheter. Nu är Adobe Edge Code fortfarande väldigt ung som system och har mycket utveckling som är pågående. En av de saker jag ser mycket fram emot är integrationen av Adobe Edge Reflow som ger ett visuellt interface för att jobba med media queries och olika upplösningar. En annan sak är något som kallas för Adobe Lens. Det låter användaren helt enkelt ta in en .psd fil i Adobe Edge Code och har sedan alla mått, fonter mm tillgängliga som code hints. Det är något liknande som CSS Hat, fast integrerat i Adode Edge Code. Överlag kan man säga att Adobe Edge Code är ett fantastiskt verktyg för frontendutvecklare, och det är ett verktyg som kommer att utvecklas mycket de närmaste åren.
  15. Adobe har kommit ut med ett nytt spännande verktyg som dom kallar Muse. Muse är en slags korsning mellan Dreamweaver och InDesign som ger användaren möjlighet att skapa webbplatser utan att skriva någon kod alls. Lite spännande tycker jag, även om jag fortfarande föredrar att skriva min HTML och CSS själv...
  16. HTML 5 är på frammarsch ordentligt och är du som jag van vid den strikta XHTML syntaxen så gissar jag att du också rullar med ögonen över HTML5's luddiga och ibland snudd på obegripliga standard, men visst finns det potential?! HTML5 känns väldigt influerad av Internet Explorer och Microsoft med sina lösa regler och den där hopplösa "man kan göra lite som man vill" mentaliteten, något som förmodligen var XHTML's stora fördel när det petade ner HTML4.1 från tronen och skapade lite ordning i kodträsket. Nu är vi på väg tillbaka till ett mer avslappnat och förlåtande HTML som jag är inte helt säker på att jag gillar. Det som jag däremot gillar är dom nya strukturtaggarna. Dom nya taggarna ger en ny dimension till div-itis sjukan där div taggar nästlas tills man får tunnelseende. Nu går det Vid första anblicken så ser dom ganska enkla ut, men sedan så kollar man specifikationen och då blir det plötsligt inte lika tydligt: the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn't be wrong either; it's mostly a matter of authoring preference.) Trots den förvirringen som först uppstår så finns det några riktlinjer att gå efter och jag gissar att ju mer taggarna används desto tydligare blir det, men tills dess tänkte jag beskriva taggarna och hur dom är tänkta att användas, enligt mig. Header header beskrivs som "a group of introductory or navigational aids", vilket inte säger speciellt mycket direkt. Många tänker direkt på HTML dokumentets head tagg, även kallad MastHead, men i HTML5 så kan det finnas många headers och det är till och med rekommenderar att varje section ska ha en header och även article kan ha det om det känns lämpligt (luddigt det här). Namnet kanske får dig tt tro att det alltid ska ligga överst i ett dokument eller sektion, men det stämmer inte alltid utan det är beroende på innehållet, dvs var introduktionen eller navigationshjälpmedel finns. A header element is intended to usually contain the section's heading (an h1 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos. Nav Nav taggen är tänkt för olika delar av webbplatsen som länkar till andra områden på webbplatsen, något som vanligtvis brukar ligga som huvudnavigation i MastHead eller som en sidosektion. Nav kan användas på huvudnavigering och undernavigering, men bör inte användas på annat. I footern på en webbplats ligger det ofta navigering, men där ska nav inte användas utan footer taggen är tillräcklig. Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary. User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request. Section Section används för att gruppera olika sektioner av relaterad information. Section är förmodligen den tagg som kommer att användas mest som ersättning för en vanlig div tagg, som inte har någon semantisk betydelse, men den ska inte användas som en slags generisk ersättare. Section ska bara användas när det är logiskt att dela upp innehållet i sektioner, ungefär som om du skulle dela upp sidan i en punktlista med dom olika delarna på webbsidan. Något som är lite intressant med section är att det är helt ok att använda H1 taggar för varje sektion utan att därför bryta mot sidans semantiska uppbyggnad. Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element. The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline. Article Article används för "self-contained related content" vilket kanske inte alltid är helt enkelt att avgöra. Generellt kan man säga att innehåll som du publicerar styckevis i ett system, som nyheter, bloggposter osv kan använda article. Om innehållet skulle kunna syndikeras med RSS så är det med största säkerhet lämpligt att använda article eftersom article taggen är skapat speciellt just för syndikerat innehåll. When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM] The time element's pubdate attribute can be used to provide the publication date for an article element. Aside Första tanken var att aside är en slags sidebar tagg, men som många andra taggar så har namnet en lite annorlunda betydelse. Aside är tänkt för innehåll som är skild från huvudinnehållet. Det kan till exempel vara en sidebar, ett annonsblock eller undernavigation för sidan. Pullquotes är också något som passar väl i en aside tagg. It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document. Footer footer associeras, precis som header taggen, med en viss position, men precis som med headern så är det innehållet som styr. Footer används för information om vem som skrivit en viss artikel, copyright information, länkar till relaterat innehåll osv. Kontakt information ska däremot inte ligga i en footer utan i adress, men adress i sin tur kan mycket väl ligga inne i en footer. Precis som med header taggen så kan det ligga flera footer taggar i ett dokument. Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer. The footer element is not sectioning content; it doesn't introduce a new section.
  17. Varje dag som går är en dag närmare ett slarvigare och mer oorganiserat Internet, samtidigt som den semantiska webben är på frammarsch. Med HTML5 så överger vi, i mångt och mycket, den organiserade webben som XHTML tvingade fram. HTML5 är som HTML4 ganska förlåtande när det gäller konstruktionen av markup. Det betyder att vi kan skriva en hel uppsjö av olika markups i samma dokument och det ska ändå fungera. Öppna och stängda taggar kommer att mixas med stora och små bokstäver som kan få en epileptiker att hamna i koma. Jag vet, jag har sett det förut och det var inte vackert. XHTML strict var när det kom ett av dom mest irriterande fenomenen i webbdesignvärldens historia (animerade giffar tar fortfarande priset), inte för att vi då blev tvungna att skriva kod ordentligt och organiserat, utan för alla jäkla skriptkiddies som tog XHTML strict som en religion. Det gick inte ens att påbörja en diskussion innan man hörde "Du kör inte XHTML strict", även om det gällde designen! Det positiva med XHTML strict eran är att det lärde nya stjärnskott att skriva ordentlig kod och inte blanda markup. Logiken gjorde sitt intåg i HTML. Nu med återgången till HTML5 så är vi tillbaka i HTML motsvarigheten till hippe tiden och det blir återigen fritt fram att skriva markup lite som man vill och sen hålla tummarna att alla webbläsare ska tolka det på samma sätt. Det kommer ju att gå lysande med tanke på att webbläsarna idag inte ens kan samsas om hur kod ska presenteras när det skrivs på ett organiserat sätt. Om vi har problem att få webbläsarna att fungera idag så kan du gissa hur kul det kommer att bli i framtiden. Jag har ett tag haft hoppet att validering ändå ska vara användbart och något som webbdesigners använder i framtiden, men nu går Google ut och trumpetar ut att skit i att validera, vi fattar vad din sida handlar om ändå. Tack så mycket Google, där dog mitt hopp om att validering skulle kunna rädda oss från webbens motsvarighet till en bokstavssoppa... Jag ser fram emot HTML5, det är mycket skojigt som framtidens webbdesigners kommer att leka med, speciellt tillsammans med CSS3, men varför i hela friden är man tvungen att släppa på kravet att markup ska skrivas korrekt? Skriv på samma slappa sätt i PHP, Javascript, Flash eller något annat programmeringsspråk så skriker editorn ut error, men i HTML går det fint? Jag tycker det är tragiskt och jag förutspår en jobbig framtid när dagens hobbydesigners kastar ut sina alster på nätet, precis som under slutet på -90 talet och början på 2000. Det värsta är att jag skulle inte bli förvånad om vi får se canvas återuppväcka alla förbaskade javaapplets effekter från samma tidsperiod... Nu går webben åt fanders...igen.
  18. Internet Explorer 9 släpptes idag på morgonen och när andra webbplatser listar upp nya funktioner så undrar jag som webbdesigner bara en sak: hur jävla illa blir det nu? Internet Explorer har länge varit den webbläsare som krävt flest kreativa lösningar i form av CSS hack och extra CSS filer för att få en webbplats att visas som det är tänkt. Att bara nämna IE6 i närheten av en kreativ webbdesigner är som att smeta senap i röven på en rakad iller och reaktionen är ungefär likvärdiga. Nu vill till och med Microsoft att skiten ska begravas och frågan är om IE9 kan skapa lite ordning bland webbläsare så att alla kan visa webbplatser lika med samma kod. Glädjande nog verkar Microsoft lyssnat på gnället som skvalat över dom under det senaste decenniet och IE9 ser bra ut på papper iallafall med godkänt ACID test och godtagbart stöd för både HTML5 och CSS3. IE9 skippar dock stöd för SVG fonter och fokuserar istället på Web Open Font Format (WOFF). Tillsammans med dom nya funktionerna som bland annat inkluderar webbplatsgenvägar som jag älskar med Chrome's Speed Dial och maskinvaruacceleration för grafik så ger jag IE9 tummen upp...iallafall just nu. Det är en ganska trevlig webbläsare som för mig tyder på en lite mindre krånglig framtid när Windowsanvändare uppgraderar sina IE7 och IE8 webbläsare. Problemet just nu är bara att Microsoft nu har tre versioner som suger som vi måste försöka bli av med, så vi får hoppas att vi blir av med dom fort så att dom inte ligger kvar som stoppklossar på samma sätt som IE6 gjort i många år nu.
×
×
  • Create New...