|
It entirely depends on the circumstances. You have to strike a balance between how much overhead the library adds to you page versus how much developer time it would take to implement the feature using pure Javascript.
Something like drag and drop[^] is fairly easy to implement in pure Javascript these days. But a library might have more advanced features which may take a while to replicate.
But either way, I wouldn't necessarily expect anyone to "know" the APIs, since there are plenty of references available to look them up. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I'm trying to create a 90 deg rotated layout. But the problem is that none of the method I used to use works in this case. Since it is rotated, changing size, getting it responsive does not seem to work.
I'm trying to let the "My Project" title take half of the rotated screen and the other half will contain images and containers.
Can anyone help me out with this? How do i make sure that it resizes and placement is always half:half layout without overflow during resize in different device size. Please provide me with a hint to complete my work. Thank you!
Link to the code in jsfiddle.
Here's a link to the think I'm doing: https://jsfiddle.net/7tfy4gdh/1/
Here's what i want to build: https://prnt.sc/10wb1p7
What I have tried:
I've tried doing flex, using vh, and media query. I just can't seem to get it done. Please help!
|
|
|
|
|
Hi. I need some idea on how to document this refresh token API details based on this codes? What details should I provide? I can't really understand.
@GetMapping(value = Constants.REST_API_REFRESH_TOKEN)
public ResponseEntity<Object> getRefreshToken(@RequestHeader(Constants.HTTP_AUTH_HEADER) String authHeader, HttpServletRequest request) {
log.info("Generate refresh token");
String token = httpUtil.extractSecurityToken(authHeader);
ResponseBase body = new ResponseBase();
body.setSuccess(true);
body.setMessage("Refresh Token generated");
String refreshToken;
DefaultClaims claims = (io.jsonwebtoken.impl.DefaultClaims) request.getAttribute("claims");
if(null == claims) {
refreshToken = jwtTokenUtil.renewToken(token);
} else {
refreshToken = jwtTokenUtil.renewToken(claims);
}
return httpUtil.createResponseEntityJson(HttpStatus.OK, httpUtil.createSecTokenHeader(refreshToken), body);
}
|
|
|
|
|
I've been trying for a couple of hours. So I have these models or object classes, one called KeyValues and KeyValue. I make a database call, and create the KeyValues object with a collection of KeyValue. This is working pretty good in just PHP V7.4.14, and I'm happy with it.
So now, I made an API, that creates a JSON array of KeyValues, and some plain Javascript to call Fetch and get the list from my hacked together PHP file. I can't figure out how to package the JSON from my object in PHP.
I wanted to use the example below, forJSON(), and was thinking that it can take an object, and package it in one line of code, but I have no clue if I fabricated it right, and how to call it. I would that it belongs in the InteratorIterator to process the whole object.
The last example is me trying just piece something together from information on the internet. I had a couple that worked, but the format was wrong, so this is just concept code of what I'm trying to do.
I just need help in filling in a couple of blanks I'm missing in the concept of how it works.
class KeyValues extends IteratorIterator {
<pre>
public function __construct(KeyValues ...$keyValues)
{
parent::__construct(new ArrayIterator($keyValues));
}
class KeyValue {
var $key;
var $value;
var $keyValues;
public function __construct()
{
}
public function getKey() { return $this->key; }
public function setKey($key) { $this->key = $key; }
public function getValue() { return $this->value; }
public function setValue($value) { $this->value = $value; }
public function forJSON(): array
{
foreach ($this->keyValues as $keyValue) $keyValues[] = $keyValue->forJSON();
return array(
'key' => $this->getKey(),
'value' => $this->getValue()
);
}
}
$jsonRaw = [];
foreach ($keyValues as $keyValue) {
$jsonArray = $keyValue->getKey() => $keyValue->getValue();
array_push($jsonRaw, $jsonArray);
}
echo json_encode($jsonRaw, JSON_PRETTY_PRINT);
exit();
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I can't believe how much time I spent on this, to write about 5 lines of code. I wasn't able to get my object forJson() to work 100% but I'm pretty close on it, actually being able to generate JSON from an object->forJson();. So this is my temp solution for now so I can move forward.
I'm kind of surprised that json_encode knew to wrap the strings in quotes, and leave the numbers as is.
$jsonArray = [];
foreach ($keyValues as $keyValue) {
$jsonItem = array(
"key" => $keyValue->getKey(),
"value" => $keyValue->getValue()
);
array_push($jsonArray, $jsonItem);
}
echo json_encode($jsonArray, JSON_PRETTY_PRINT);
Also using plain Javascript, and trying to stay sort of ECMA 6, which also took forever to figure out yet so simple. This is inside a Fetch call to a PHP file that just echos out JSON.
I was really surprised that I didn't have to parse the JSON, or do anything special with it. I fiddled with the Object using different types and they all seem to produce the same values.
for (const keyValue of Object.values(data)) {
let option = document.createElement('option');
option.text = keyValue.key;
option.value = keyValue.value;
addOperationElement.add(option);
}
Alright, back to being able to move forward with this section of the app. I'm starting to like PHP V7+ and can see why so many companies use it. It does the job and is fairly simple to construct and fabricate. But you need a damn good editor like PHP Storm to keep it organized and clean.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I have this upload files button in my app. So far my progress bar works fine but it just shows the loading bar while the file is uploading. So how do I add features to show the status of the upload % completed, also display the upload speed and the real time counter ETA to complete upload? Can it be achieved from front-end alone?
Here's my file-upload.component.html
<pre><input *ngIf="uploader.queue.length < 3" #uploadButton ng2FileSelect (change)="fileUpload()" [uploader]="uploader" id="supporting-doc-type-{{docType}}"
type="file"
class="upload-button"/>
<label for="supporting-doc-type-{{docType}}" class="fake-upload-button">
{{'account.uploadNric.uploadDoc'| translate}}
</label>
<ng-container *ngIf="uploader != undefined && uploader.queue.length">
<div class="row" *ngFor="let item of uploader.queue">
<div class="col-8 text-left">
<ng-container *ngIf="item.isSuccess; else elseBlock1">
<a [attr.href]="getFileDownloadUrlByName(item.file.name)" target="_blank">{{item.file.name}}</a>
</ng-container>
<ng-template #elseBlock1>
{{item.file.name}}
</ng-template>
</div>
<div class="col-2">
<ng-container *ngIf="item.isSuccess; else elseBlock2">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-template #elseBlock2>
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-template>
</div>
<div class="col-2 text-right">
class="fa fa-trash trash-can-icon">
</div>
</div>
</ng-container>
<div *ngIf="documentFormatInvalid" class="alert alert-danger roboto-condensed-font">
{{'account.uploadNric.uploadFormatInvalid'| translate}}
</div>
<div *ngIf="documentExists" class="alert alert-danger roboto-condensed-font">
{{'account.uploadNric.uploadDocExists'| translate}}
</div>
<div *ngIf="documentGenericError" class="alert alert-danger roboto-condensed-font">
{{'account.uploadNric.uploadError'| translate}}
</div>
<div *ngIf="isExceedDocumentSize" class="alert alert-danger roboto-condensed-font">
{{'account.uploadNric.uploadSizeInvalid'| translate}}
</div>
My upload-file.component.ts
@Component({
selector: 'file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.scss']
})
export class FileUploadComponent {
docType = 'NRIC_FIN_DOCUMENT';
uploader: FileUploader;
fileIdentifier = new Map<string, string>();
@Input()
orderId: string;
@Input()
accountForm: FormGroup;
documentFormatInvalid = false;
documentExists = false;
documentGenericError = false;
isExceedDocumentSize = false;
@ViewChild('uploadButton') uploadButton: ElementRef;
constructor(private uploaderService: UploaderService, private utilService: UtilService,
private novusService: NovusService, private authService: AuthService) {
}
ngOnInit() {
this.utilService.observeData().subscribe(message => {
this.initiateUploader();
}
);
}
fileUpload() {
this.resetErrors();
const fileItem = this.uploader.queue[this.uploader.queue.length - 1];
fileItem.file.name = this.utilService.appendTimeStamp(fileItem.file.name);
this.uploader.queue[this.uploader.queue.length - 1] = fileItem;
const format = fileItem.file.type;
if (!this.uploaderService.validFileSize(fileItem.file.size)) {
this.isExceedDocumentSize = true;
this.uploader.queue.pop();
this.updateForm();
return;
}
if (!this.uploaderService.validFileFormat(format)) {
this.documentFormatInvalid = true;
this.uploader.queue.pop();
this.updateForm();
return;
}
const name = fileItem.file.name;
const orderId = this.orderId;
this.uploader.onBuildItemForm = (fileItem: any, form: any) => {
form.append('name', name);
form.append('orderId', orderId);
form.append('token', this.novusService.getMetaToken());
};
this.uploadButton.nativeElement.value = '';
this.uploader.queue[this.uploader.queue.length - 1].upload();
}
getFileIdentifierByName(fileName: string): string {
return this.fileIdentifier.get(fileName);
}
getFileDownloadUrlByName(fileName: string): string {
return this.uploaderService.getDocumentDownloadUrl(this.getFileIdentifierByName(fileName));
}
getSimplifiedSize(size: string): string {
return this.uploaderService.fileSizeConvertor(parseInt(size));
}
deleteFile(fileIdentifier: string): void {
this.uploaderService.fileRemove(fileIdentifier).subscribe(res => {
});
}
removeFileFromUploader(fileName: string): void {
this.uploader.queue = this.uploader.queue.filter(function(el) {
return el.file.name != fileName;
});
this.updateForm();
}
resetErrors(): void {
this.isExceedDocumentSize = false;
this.documentFormatInvalid = false;
this.documentExists = false;
this.documentGenericError = false;
}
updateForm(): void {
const fileNames = this.uploader.queue.map(res => {
return res.file.name;
});
this.accountForm.controls.fileUpload.markAsTouched();
this.accountForm.controls.fileUpload.setValue(fileNames.join(';'));
}
initiateUploader(): void {
const uploadHeaders = [{
name: 'Accept', value: 'application/json, text/javascript, */*; q=0.01',
}, {
name: 'Authorization',
value: `Bearer ${this.authService.getToken()}`
}];
const options: FileUploaderOptions = {
url: `api/document/upload`,
itemAlias: 'data',
headers: uploadHeaders,
};
this.uploader = new FileUploader(options);
this.uploader.onSuccessItem = (item, response) => {
if (response) {
const resp = JSON.parse(response);
if (resp) {
this.fileIdentifier.set(item.file.name, resp.api_message);
} else if (resp.key === 'FILE_EXISTS') {
this.uploader.queue.pop();
this.documentExists = true;
} else {
this.uploader.queue.pop();
this.documentGenericError = true;
}
}
this.updateForm();
};
this.uploader.onAfterAddingFile = (file) => {
file.withCredentials = false;
};
}
}
And upload-file.component.css
.upload-button {
display: none;
}
.fake-upload-button {
border-radius: 4px;
color: #fff;
background-color: #29b6f6;
padding: 4px 20px;
cursor: pointer;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
padding: 0;
}
.trash-can-icon {
cursor: pointer;
font-size: 18px;
}
|
|
|
|
|
Your asking for lots of features, and it looks like you downloaded a angular package.
Well for a spinner, you have to declare a variable to flag the upload event at the start of upload, then the HTML page would be set to pick up that variable change and show the spinner, when the upload is complete, you toggle the variable and the HTML will hide the spinner.
I have to code to show you. But to write the upload speed and percent, would require you to make a custom component and author it. Not an easy task and very time consuming. There is no quick answer for that.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi all
Could any body help me to clear the code line : total[language] = total[language] + 1 || 1 in this code block:
const url = 'https://api.github.com/users/john-smilga/repos?per_page=100'
const fetchRepos = async () => {
const response = await fetch(url)
const data = await response.json()
const newData = data.reduce((total, repo) => {
const { language } = repo
if (language) {
total[language] = total[language] + 1 || 1
}
return total
}, {})
console.log(newData)
}
fetchRepos()
thanks a lot
|
|
|
|
|
To "clear" the code line, simply delete the line. That will of course render the surrounding if block irrelevant, and ensure that your reduce method simply returns an empty object, so your fetch request is also irrelevant. The final function would be:
const fetchRepos = () => {
const newData = {};
console.log(newData);
};
NB: If that's not what you're trying to do, then you need to provide a clearer explanation of your requirement.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks for your reply
I still confuse with
total[language]
could you clear to me
thanks alot
|
|
|
|
|
It's an alternative syntax for a property accessor, which is required when the property name is not fixed.
Property accessors - JavaScript | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
thanks alot
i know total[language] shall return to string but here they took total[language] plus with 1 that is point i still confuse.
Could you make it more clear
kidly thanks
|
|
|
|
|
No, language will be a string; total[language] will be a number.
Initially, it will be undefined, which is why there's a || 1 on the end:
undefined + 1 === undefined;undefined || 1 === 1;
Assigning a default value to a variable - JavaScript | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks alot for your deep explaination
But when i console.log(total[language]) it return for me string: javascript, css and html rather number
thanks alot
|
|
|
|
|
Hello! I need some help with my project, it's only html and css, please contact me in private and we can talk there. Thank you very much!
|
|
|
|
|
Sorry, no. This is an open forum for technical discussions and questions. If you want someone to work for you then try freelancers.com.
|
|
|
|
|
i said i need help not for someone to do the project for me 
|
|
|
|
|
|
No private. Ask your questions here and there are lots of people who can answer.
|
|
|
|
|
You can tell here what help you need, i will give you solution as much as possible.
|
|
|
|
|
Hi, i need some help with a project with a responsive gallery, can anyone help me please contact me in private here .  
|
|
|
|
|
I was wondering if anyone would suggest me to remove the unused CSS and whether or not it would do any good to decrease the page loading time.
|
|
|
|
|
How Do You Remove Unused CSS From a Site? | CSS-Tricks[^]
The effect on page loading time will depend on how much you remove. It's unlikely to have as much effect as optimizing your images and Javascript, but you would need to profile your page load time to determine where the bottleneck is.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi,
as light-weight files,
web resources like scripts pages ( htm ; php ; js ... ) , and css files are the costless.
1 video 2 Go
1 UHD picture 8 Mo
1 HD picture 4 Mo
1 CSS file 0 Mo 200 ko
It's really to forget with the aim to increase load speed.
Something usual is to increase code quality, with 'less' code as effect.
It's refactorising.
Html can be skills increased, Css too.
With a better use of tags, and current features.
It's bring the code to a higher quality, with refactorizing.
Then sending the code to a client is faster,
loading, and building the page DOM is faster again,
and so displaying, and interacting
It's a gain.
modified 23-Aug-21 21:01pm.
|
|
|
|
|
We have four possible environments within two possible categories of environments in which to run our web apps (about 15 apps).
Unclassified dev box, dev server, test, QA, and prod
Classified dev box, dev server, test, QA, and prod
Each of these environments also has an environment-specific database server, and several connection strings were required per application.
At one point, we were building a web app deployment package that was category and environment specific, meaning we could potentially be creating 8 different packages depending on the target environment. So, as we progress through the dev/test/acceptance/production life cycle, we'd eventually have to create at least four deployment packages.
Yes. It was a pain in the ass and as you might guess, fraught with danger with regards to deploying essentially untested code (that could even be different from package to package assuming something goes sideways during the creation of the package).
---------------------------------------------------------
We recently transitioned to "the cloud", and the "new way" is to create just one package, and as it transits the dev/test/prod life cycle, the same package is merely deployed to the next environment. While this is by far a better idea, I have concerns.
The connection strings are contained in the web.config file, which means that we can't deploy the "new way", because the deployment package we build has always been environment specific (remember, each environment has its own database).
---------------------------------------------------------
Are my concerns justified? In the interest of full disclosure, we do not use Entity Framework for database access.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
