Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x

Web Languages and Standards

39K

Solutions

30K

Contributors

Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services using a wide variety of languages and standards, including the familiar HTML, JavaScript and jQuery, ASP and ASP.NET, PHP, ColdFusion, CSS, PHP, Flex and Flash, but also the implementation of a broad list of standards including XML, WSDL, SSDL, VoiceXML and many more.

Share tech news, updates, or what's on your mind.

Sign up to Post

Here i the CSS I use to create the dark corner in the upper-right.


.dog-ear {
	position: absolute;
	top: 0;
	right: 0;
	height: 10px;
	width: 10px;
	background: linear-gradient(45deg, #333 0%, #333 50%, #fff 50%, #fff 100%);
}

Open in new window



But It sometimes looks choppy.

Choppy line
Is there a different way to do this?
0
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

I added a class to a div, and verify the booelan's working.  But, the ng-class is failing.

    <div ng-class="{ 'dog-ear' : isDogEared }"></div>

Open in new window


Inside the Typescript template I have:
@Output() isDogEared:boolean;

  dogEarIndexes: number[];

  constructor() 
  { 
    this.dogEarIndexes = [ 1,3,5 ];
  }

  ngOnInit() {
    this.imageFilename = "PuzzlePiece_Maps_" + (this.value.id + 1).toString() + ".gif";
    
    this.id = this.value.id;
    this.isDogEared = this.dogEarIndexes.indexOf(this.id) > -1;
    console.log('Id:'+this.id+" - " + this.imageFilename + " isDogEared="+ this.isDogEared.toString());    
  }

Open in new window


and the page does not generate any errors, and I verified the boolean values are properly set in ngOnInit()

Booleans Work OK

What am I missing?
0
I am unsure about how to change the styling on my PuzzlePiece Component. I draw an image inside of a span.

<div class="puzzle-piece">
    <span><img src="{{ imageFilename }}" /></span>
</div>

Open in new window


with the following styling...
.puzzle-piece {
    width: 12.5%;
    float: left;
    box-sizing: border-box;
    background-color: #007acc;
    position: relative;
    padding-bottom: 12.5%;
    border-right: 2px solid blue;
    border-bottom: 2px solid blue;
    text-align: center;
    z-index: 10;
}
.puzzle-piece span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3em;
    font-family: 'Arial';
    transform: translateX(-50%) translateY(-50%);
    color: rgba(255,255,255,5);
}

Open in new window


In order to make the edges touch for each of the puzzle pieces, I needed to make the width of the puzzle 100%:
.puzzle {
    width: 100%;
    margin: 0 auto;
    border-top: 2px solid blue;
    border-left: 2px solid blue;
}

Open in new window


But I prefer a lower width, like 80%.

Full screen
Also, I'd like the image to maintain its integrity, and stay tight, even when the browser grows.
centered
Lastly, does the span style control the image style? Or does img need its own styling?
0
Code snippet from PuzzleCanvasComponent where I fill the PuzzlePieceComponent array.
ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index].id=index;
        index++;
      }
    }
  }

Open in new window


I want to set the "id" property there, but this line does nothing:
        this.pieces[index].id=index;


So I tried to use the HTML template for PuzzleCanvasComponent, but have the syntax wrong.
<div class="puzzle">
    <puzzle-piece *ngFor="#piece of pieces; #i=index" [value]="piece" [id]="i"></puzzle-piece>
</div>

Open in new window


with the following properties created in the TS file
export class PuzzlePieceComponent implements OnInit {
  @Input() value:PuzzlePieceComponent;
  @Input() id:Number;
...

Open in new window


I'd prefer if the first method could be made to work, especially since I want to expand the number or properties set in
ngOnInit() beyond just the id.

Is method #1 fixable? Or must iI use the second method? If so, what is the syntax?
0
I have a little Angular app with two small Components, PuzzleCanvas and PuzzlePiece. I have a sample number of 9

PuzzlePieceComponent with a style CSS I just can not update. So, as a result, all PuzzlePieceComponents are drawn over the other.
import { Component, OnInit, Input } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'puzzlepiece',
  styles: [ ],
  template: `
     <img id="#PuzzePiece{{ id }}" 
     style="position:absolute; display:block; width:100px; height:100px; left:12px; top:12px;"
     src="../../../assets/images/PuzzleCompleted_{{ id+1 }}.gif"/>
  `
})


export class PuzzlePieceComponent implements OnInit {
  title = 'Puzzle Piece';
  @Input() data:PuzzlePieceComponent;
  @Input() id:Number;
  //pieceStyling:string=this.getPieceLocation();
  constructor() { }

  ngOnInit() {
    this.id = this.data.id;   
    console.log("ID:" + this.id) 
  }

Open in new window



PuzzleCanvasComponent is constructing the PuzzlePieceComponents correctly
import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzlepiece.component';

@Component({
  selector: 'puzzlecanvas',
  styles: [`canvas { width: 800px; height: 500px; border: 2px solid black; }`],
  template: `<canvas></canvas>
             <puzzlepiece *ngFor="let piece of pieces" [data]="piece" [id]=index></puzzlepiece>`
})

export class PuzzleCanvasComponent implements OnInit {
  title = 'Puzzle Peace';
  @Input() piece:PuzzlePieceComponent;
  pieces = [];
  columns:number = 3;
  rows:number = 3;

  constructor() { }

  ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index++].id=index;
      }
    }
  }
}

Open in new window



The PuzzleCanvasComponents are being written one over the other...
Overwriting

But I have verified all 9 PuzzlePieceComponents are loading
Creation
I feel like I have tried everything. Notice I can use the {{}} for property binding when it comes to setting the ID and the src for image.

I have a jquery (Plan B) solutin that also does not work. That question is here:
https://www.experts-exchange.com/questions/29062600/Angular-CSS-need-to-resort-to-jquery.html

It seems like I reached a limiting factor in the Javascript methodology. Is that possible?

Is there a different place in the page life-cycle, besides ngOnInit(), where I can place update logic?

My project is stuck until I can get past this.

Thanks.
0
I want to make it easy to run my Angular app so it's easier to show the problem I am having. But I just noticed the repo contains tons of node packages, brining the size of this little Angular program (with two Components) to 172 MB.

I did not want to commit and push this without asking how Plunker works and what options I have regarding all those node modules.

Thanks.
0
Using Angular alone, I have trouble setting the "left" and the "top" for the following image tag. But you can see I am successfully updating  the src value with a variable called "id."

 template: `<img id="#PuzzePiece{{ id }}" style="left:10px; top:10px; position:absolute; width:100px; height:100px;"
                  src="../../../assets/images/PuzzleCompleted_{{ id+1 }}.gif"/>`
})

So I am trying to use jquery with no luck. I am just doing a test, trying to get left and top set to 100. I verified the jquery is correct.

The page thrown no errors so I assume I installed jquery correctly.


  ngOnInit() {
    this.id = this.data.id;    
    this.updateImageCoordinates();
  }

  updateImageCoordinates()
  {
    var imageId = "#PuzzlePiece" + this.id.toString();
    $(imageId).css({"left":100,"top":100});
  }
 
What am I missing?

Thanks
0
when I update this:

constructor()
{
}
 
to be this:

constructor(public _id:Number, public _X:Number, public _Y:Number)
{
}

I get the attached error:

error
and the page fails to load.

Clearly, the declaration of PuzzlePieceComponent in the app.module.ts Module is setting up the expectation for a version with no parameters. How do I et around this?

Are these params needed if I use:

  @Input() id:Number;
  @Input() X:Number;
  @Input() Y:Number;

Thanks.
0
I am successfully setting these values inside the PuzzlePiece component...

  @Input() id:Number;
  @Input() X:Number;
  @Input() Y:Number;

The ID is used to successfully load the correct image file. But I do not know how to draw that image at the X and Y values.

How do I pass a component's value to the CSS?
0
I need to load an image based on a generated filename but find the following logic fails.

@Component({
  selector: 'puzzlepiece',
  styles: [],
  template: '<img src="../../../assets/images/PuzzleCompleted_" + {{ id }} + ".gif" />'
})

Instead of displaying the image, the path name variable is displayed on the page, thusly:

path name
but when I hard code the filename, it works:

@Component({
  selector: 'puzzlepiece',
  styles: [],
  template: '<img src="../../../assets/images/PuzzleCompleted_1.gif" />'
})

hard coded path
How do I use a variable to set the "src" for an image inside an HTML template?
0
New feature and membership benefit!
LVL 10
New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

I have a PuzzleCanvas component and a PuzzlePiece component. Each PuzzlePiece will persist its location in the matrix of PuzzlePieces.

For example, a PuzzlePiece may be on row 2 of 5 rows and be on column 3 of 8 columns.

How do I transpose this information into the X, Y coordinates for each PuzzlePiece?

Can the PuzzlePiece component use those variables row and column as it calculates where that particular PuzzlePiece should be drawn.

Thanks.
0
I need to create a matrix of child Components inside the parent Component, which creates them. Meanwhile, I need to pass in a few values in init of the child Component, like an Index number and an image filename.

How do I pass in parameters as I create these child Components?

Thanks
0
I have a PuzzleCanvas object and I need it to contain a matrix of PuzzlePieces 8 columns by 5 rows.

I want this done inside the Component itself so that in the HTML for the PuzzleCanvas I can simply use forEach and iterate through a previously created matrix of components.

How do I do this?

Thanks
0
I need to verify I can use automation to create a component, but get errors.

And On the Mac Terminal I also get a new command prompt. is this the CLI?

How do I call up the CLI from terminal?

What's wrong with my

$ ng new component './components/puzzlepiece
The command "new" has an option without the required type and name fields.
Error: The command "new" has an option without the required type and name fields.
    at Class.validateOption (/Users/RA/Documents/Git/PuzzlePeace/node_modules/@angular/cli/ember-cli/lib/models/command.js:377:13)
    at Array.map (<anonymous>)
    at Class.registerOptions (/Users/RA/Documents/Git/PuzzlePeace/node_modules/@angular/cli/ember-cli/lib/models/command.js:163:27)
    at getOptionsTask.run.then (/Users/RA/Documents/Git/PuzzlePeace/node_modules/@angular/cli/commands/new.js:95:18)
    at <anonymous>
$ ng new component './components/puzzlepiece
> pwd


My installation on the Mac looks good, I think:

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.5
node: 8.6.0
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
0
This makes no sense to me. I created CanvasComponent correctly, I think. I did it manually since the automtation failed me on another questionI posted,

c:\Dev\pp\src\app\app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CanvasComponent } from './components/canvas/canvas.component';

@NgModule({
  declarations: [
    AppComponent,
    CanvasComponent    
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open in new window


c:\Dev\pp\src\app\components\canvas\canvas.component.html
<h1>Hello from the Canvas1</h1>

Open in new window


c:\Dev\pp\src\app\app.component.html
<p>Hello from App</p>
<canvas></canvas>

Open in new window


c:\Dev\pp\src\app\components\canvas\canvas.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'canvas',
  //templateUrl: './canvas.component.html',
  template: `<h1>Hello from the Canvas2<h1>`
})

export class CanvasComponent {
  title = 'Title';
}

Open in new window



All I get is "Hello from App"

Chrome
Why don't I see?

Hello from the Canvas2

You can see I have commented out:
  //templateUrl: './canvas.component.html',

since that failed also.

Thanks for any help you can provide.

New news...

canvas does show in the debugger...


More new news...

When I place a <br> before <canvas></canvas>
the canvas does not show up on the pages. The same thing happens when I remove:

<p>Hello from the App</>


Lastly, I do see the message in the debugger...

canvas appears on the pageScreen-Shot-2017-10-09-at-11.25.16-P.png
0
I THINK I have a good installation of Node and Angular 4...here's why:

PS C:\dev\pp\src\app\components> ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.5
node: 8.6.0
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4
PS C:\dev\pp\src\app\components>

but I can not generate a new component.

PS C:\dev\pp\src\app\components> ng g component [canvas]
The command "generate" has an option without the required type and name fields.
Error: The command "generate" has an option without the required type and name fields.
    at Class.validateOption (C:\dev\pp\node_modules\@angular\cli\ember-cli\lib\models\command.js:377:13)
    at Array.map (<anonymous>)
    at Class.registerOptions (C:\dev\pp\node_modules\@angular\cli\ember-cli\lib\models\command.js:163:27)
    at getOptionsTask.run.then (C:\dev\pp\node_modules\@angular\cli\commands\generate.js:98:18)
    at …
0
When I have the Angular server running, but I'd like to terminate it, must I select Ctr+X?

ng serve
Is this the right way to shut it down? I do not have a command prompt when using PowerShel on Windows

Thanks
0
I see Typescript can define statically types variable with the word "let"

how do these two lines differ?

let name: string = 'Bob';

name: string = 'Bob';
0
This is my hello.js file:

console.log(“Angular works on the Mac”);

I installed Angular, but an trying to verify it works. What's wrong here?

$ node hello.js
/Users/newbieweb/Desktop/Dev/Angular/udemy-dream-app/hello.js:1
(function (exports, require, module, __filename, __dirname) { console.log(“Angular works on the Mac”);
                                                                          ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:588:28)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3
0
Free Tool: SSL Checker
LVL 10
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

I received the following email today regarding one of my registered websites:

As part of the rules of domain ownership, ICANN (the international governing organization of domain domains) requires that your contact information be publicly accessible. Therefore, your name, address, email address and phone number are made available to anyone who performs a whois search for the domain name.

We understand that making this information publicly available is not the best solution for many customers, but it is a requirement for domain ownership. In addition, using false contact information violates domain registration agreements and could lead to loss of domain ownership.  But there is now an alternative:

---------------------------------------------------------------
Private Whois Service is now available to protect your privacy!
---------------------------------------------------------------

In order to help protect our customer's privacy we offer a Private Whois service which will remove your private information from the whois database. This service will display proxy information for the name, address, phone number and use an alias email address. Any emails sent to the proxy email will be forwarded to your actual domain contact email address.

The Private Whois service is $5 per year and can be activated by visiting your Control Panel Domain manager at:

I'm a bit confused on how they, or anyone else for that matter, can offer this service, as I …
0
How do you go about making design decisions and deciding what browsers to support?
0
When making a mainstream smart phone application today, that is NOT a Mobile App (responsive website), what platforms are there besides iPhone and Android?

I guess I mean "relevant platforms."

Is Blackberry still used by lots of users? And what other ones should I consider?

What development tools exist for these smaller platforms. But I can not use a Javascript framework, since this can not be responsive.
0
I assume when you have an app that is going to involve money, I automatically presume the iPhone and Android apps need to be Native. True?

I also expect to need to interact securely with hardware elements on the phone, both iPhone and Android. How well do Mobile apps do this?

Thanks
0
And what is Semantic Versioning?

Thanks
0
Hi

I don't know javascript: what's the codes below doing
& any harm (in terms of data leaks/loss & IT Security)
that it will pose if tagged onto a web page?


<script data-obct type="text/javascript">
/** DO NOT MODIFY THIS CODE**/
!function(_window, _document) {
var OB_ADV_ID='000e18a9cc209a30aeabceff3b9243dadf';
if (_window.obApi) { return; }
var api = _window.obApi = function() {api.dispatch ? api.dispatch.apply(api, arguments) : api.queue.push(arguments);};api.version = '1.0';api.loaded = true;api.marketerId = OB_ADV_ID;api.queue = [];var tag = _document.createElement('script');tag.async = true;tag.src = '//amplify.outbrain.com/cp/obtp.js';tag.type = 'text/javascript';var script = _document.getElementsByTagName('script')[0];script.parentNode.insertBefore(tag, script);}(window, document);
obApi('track', 'PAGE_VIEW');
</script>
0

Web Languages and Standards

39K

Solutions

30K

Contributors

Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services using a wide variety of languages and standards, including the familiar HTML, JavaScript and jQuery, ASP and ASP.NET, PHP, ColdFusion, CSS, PHP, Flex and Flash, but also the implementation of a broad list of standards including XML, WSDL, SSDL, VoiceXML and many more.